网页设计图片怎么变小（图片怎么压缩啊）

本文目录

• 图片怎么压缩啊
• 网页制作，如何让图片太大时自动缩小显示
• 如何让网页中的图片自动缩小
• 在Dreamweaver中怎么改变背景图片的大小
• 怎么改图片的大小啊

图片怎么压缩啊

图片怎么压缩啊？使用轻秒格式工厂在线图片压缩，支持批量缩小图片功能。只需要输入你期望压缩后的KB大小就可以一键搞定，比如把图片压缩到200KB以下，可以这样操作：

1、浏览器输入“轻秒在线或轻秒格式工厂”-》图片压缩 -》拖入或添加图片

2、压缩指定大小》输入200，即200KB

3、点击开始压缩，稍等片刻即可压缩完成，并且显示压缩后的图片参数。

4、点击下载即可完成把图片压缩到200kb以下，如果大于200kb，可以输入190kb，直到指定压缩大小的数值满足需求即可。

当涉及到存储和共享图像时，有多种常见的图像格式适用于不同的情境和需求。以下是一些常见的图像格式及它们的一般用途：

• JPEG（Joint Photographic Experts Group）：JPEG格式以有损压缩为特点，适合存储照片和图像。它通常用于在线共享、数字摄影和社交媒体，因为它能提供较小的文件大小。

• PNG（Portable Network Graphics）：PNG格式以无损压缩为特点，常用于图标、透明背景的图像、图形设计和照片。由于支持透明度，它在网页设计和图形中很有用。

• GIF（Graphics Interchange Format）：GIF通常用于简单的动画、小型图标和在线表情。由于支持透明背景，它在社交媒体和在线通信中非常流行。

• BMP（Bitmap）：BMP是一种无损位图图像格式，通常用于图像、图形设计和图像数据存储。但文件大小较大，不太适合在线应用。

• TIFF（Tagged Image File Format）：TIFF格式通常用于存储高质量的图像，如扫描文档、专业摄影和印刷。它支持无损压缩，适合出版领域。

• RAW：RAW格式是相机捕捉的未经压缩的原始图像数据，通常用于专业摄影和后期处理。它保留了最高质量的图像信息，但文件较大。

• WebP：WebP是一种现代的图像格式，综合了JPEG和PNG的优点，旨在提供高质量和小文件大小。它在网页加载速度优化中非常有用。

• HEIF（High Efficiency Image File Format）：HEIF是一种高效的图像格式，常见于移动设备和相机，提供高质量和较小的文件大小。

• PSD（Adobe Photoshop Document）：PSD格式是Adobe Photoshop的原生文件格式，通常用于图像和图形设计。它保留了图层和信息。

这些不同的图像格式各有其优点和用途，您可以根据具体的需求和应用场景来选择最适合的格式。

网页制作，如何让图片太大时自动缩小显示

1、用鼠标拖动来改变大小
以下是代码片段：
《SCRIPT LANGUAGE="JavaScript"》
function resizeImage(evt,obj){
newX=evt.x
newY=evt.y
obj.width=newX
obj.height=newY
}
《/script》
《img src="7say.gif" ondrag="resizeImage(event,this)"》
2、用鼠标滚动控制图片大小
以下是代码片段：
《img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(window.event.wheelDelta==120)?-5:+5;"》
3、图片标签里用代码控制大小
以下是代码片段：
《img border="0" src="" onload="if(this.width》screen.width-500)this.style.width=screen.width-500;"》
4、CSS控制图片大小
1. css2直接实现: img{max-width: 500px;} (IE暂不支持)
2. expression实现: img{width:expression(width》500?"500px":width);} (IE only)
3. 使用js. 方法: 用 document.getElementsByTagName("IMG") 的方法取得全部img元素 遍历img元素 判断其宽度并做相应操作
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～·～
当访问者点击页面中的缩略图时，其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。
实现此功能的最简单作法是用以下HTML代码创建一个图像链接：
《a href="fullsize.jpg" target="_blank"》《img src="small.jpg"》《/a》
其中《a》标记的href属性指定全尺寸图片的URL，target属性设置为_blank指定在新窗口中显示该图片；《img》标记的src属性指定缩略图的URL。
如果我们想对显示全尺寸图片的窗口的外观进行某些控制（比如希望弹出窗口的高度、宽度能与全尺寸图片的大小匹配时），则可调用 window.open 方法，该方法接收三个参数，分别指定要打开文件的URL，窗口名及窗口特性，在窗口特性参数中可指定窗口的高度、宽度，是否显示菜单栏、工具栏等。以下代码将显示全尺寸图片在一个没有工具栏、地址栏、状态栏、菜单栏，宽、高分别为400、350的窗口中：
《a href="fullsize.jpg" onClick="window.open(this.href,’’, ’height=350,width=400,toolbar=no,location=no,status=no,menubar=no’);return false"》《img src="small.jpg"》《/a》
这里就提出了个问题，如果所有全尺寸图片都具有统一的大小（比如都是400x350），那么以上代码适用于所有的缩略图片链接（只是href属性指向的全尺寸图片文件不同）。但如果全尺寸图片的大小并不统一，还用以上代码则我们需要先取得每幅全尺寸图片的大小，然后在window.open方法的窗口特性参数中一一设置height和width为正确的值，在图片数量较多的情况下，这显然效率太低了。那么是否有一劳永逸的方法，即让弹出窗口能自动适应要显示图片的大小？通过研究，发现可以使用 DHTML 中的 Image 对象来达到我们的目的，Image 对象可动态装载指定的图片，通过读取其 width 和 height 属性即能获得装入图片的大小，以此来设置弹出窗口的大小，即可实现自适应图片大小的弹出窗口了。下面即是实现代码:
《script language="JavaScript" type="text/JavaScript"》
《!--
var imgObj;
function checkImg(theURL,winName){
// 对象是否已创建
if (typeof(imgObj) == "object"){
// 是否已取得了图像的高度和宽度
if ((imgObj.width != 0) && (imgObj.height != 0))
// 根据取得的图像高度和宽度设置弹出窗口的高度与宽度，并打开该窗口
// 其中的增量 20 和 30 是设置的窗口边框与图片间的间隔量
OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20) + ",height=" + (imgObj.height+30));
else
// 因为通过 Image 对象动态装载图片，不可能立即得到图片的宽度和高度，所以每隔100毫秒重复调用检查
setTimeout("checkImg(’" + theURL + "’,’" + winName + "’)", 100)
}
}
function OpenFullSizeWindow(theURL,winName,features) {
var aNewWin, sBaseCmd;
// 弹出窗口外观参数
sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,";
// 调用是否来自 checkImg
if (features == null || features == ""){
// 创建图像对象
imgObj = new Image();
// 设置图像源
imgObj.src = theURL;
// 开始获取图像大小
checkImg(theURL, winName)
}
else{
// 打开窗口
aNewWin = window.open(theURL,winName, sBaseCmd + features);
// 聚焦窗口
aNewWin.focus();
}
}
//--》
《/script》
使用时将上面的代码放在网页文档的《head》《/head》标记对中，然后在链接的点击事件中调用OpenFullSizeWindow函数，如《a href="fullsize.jpg" onClick="OpenFullSizeWindow(this.href,’’,’’);return false"》《img src="small.jpg"》《/a》即可。
以上代码在IE 5.x－6.0中测试通过。

如何让网页中的图片自动缩小

在网页代码设计中，有些大图片会让表格撑破，为了让网页中的图片自动缩小到指定值，可以参考以下代码：
《img border=0 src="/images/banner/xtdiy.gif" onload="if(PicWidthWidth100)width=100;"

在Dreamweaver中怎么改变背景图片的大小

在Dreamweaver中改变背景图片的大小的方法：

打开DW点击已经设置好的图片，输入“backg-s”，输入需要的数值输入500px，即为图片X轴拉伸至500像素，输入500px 500px，即为图片X轴Y轴均拉伸至500像素，可以直接输入图片的缩放百分比，50%即为图片缩放一半。百分比数值过大，图片会依照背景裁减掉一部分。

DW是网页代码器。利用对 HTML、CSS、JavaScript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。Adobe Dreamweaver使用所见即所得的接口，亦有HTML的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。

相关信息

1、CS6新增功能

利用Adobe DreamweaverCS6软件中改善的FTP性能，更高效地传输大型文件。更新的“实时视图”和“多屏幕预览”面板可呈现HTML5代码，使您能检查自己的工作。

2、自适应网格

可响应的自适应网格版面，使用响应迅速的CSS3自适应网格版面，来创建跨平台和跨浏览器的兼容网页设计。利用简洁、业界标准的代码为各种不同设备和计算机开发项目，提高工作效率。直观地创建复杂网页设计和页面版面，无需忙于编写代码。

怎么改图片的大小啊

打开ps软件/ 文件/ 打开/ 找到你电脑里要制作的图片，打开/ 在打开图片的标题栏上鼠标右键图像大小/ 像素大小：调整宽度和高度的尺寸，按回车键，这样就完成了。

在word中选中插入的图片后，在“格式”选项中可以调整图片大小，具体操作请参照以下步骤。

1、在电脑上打开一个word文件，依次点击菜单选项“插入/图片”将目标图片导入进word文档中。

2、然后选中图片后，在“格式”页面找到“大小”区域，点击区域右下角的“箭头”图标。

3、然后在出现的“大小”页面中，去掉“锁定纵横比”选项框的勾。

4、然后在“尺寸和旋转”区域将高和宽需分别设置为2.99cm和5cm，点击“关闭”按钮返回。

5、完成以上设置后，即可word中按需求设置图片的大小。

从功能上看，该软件可分为图像，图像合成，校色调色及功能色效制作部分等。 图像是图像处理的基础，可以对图像做各种变换如放大，缩小，旋转，倾斜，镜像，透视等。也可进行复制，去除斑点，修补，修饰图像的残损等。

图像合成则是将几幅图像通过图层操作，工具应用合成完整的，传达明确意义的图像，这是美术设计的必经之路；该软件提供的绘图工具让外来图像与创意很好地融合。

校色调色可方便快捷地对图像的颜色进行明暗，色偏的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计，印刷，多媒体等方面应用。