关于 网页图片优化和体积压缩

质量不要太高，画质能忍受就好（储存为web时品质50-70）

另外用 ctrl+alt+shift+s 储存为web所用格式，比直接另存为jpg少了很多备注信息，会小一点

 

jpg质量和文件大小的平衡点大约在7左右，大于7之后，画质增加缓慢，大小增加很快，小于7之后，画质下降很快，大小减少较慢

 

如何用Photoshop优化你的网页图片

0

By xtremefuture000 :: 小技巧 :: 八月 5th, 2011

要想制作一个优秀的网页，好的图片时必不可少的，但在把各种图片加到你的网页中之前，对这些图片进行优化是非常必要的，否则就可能让你的网页出现加载时间过长，浪费流量或者图片画质低下的问题。这里我们就来了解一下如何用Photoshop全方位优化你的图片。

在进入正题之前，我们先来了解一下各种常有的图片格式：

1.BMP(BitMap)

这是Windows系统中的标准图像格式，不采用任何压缩方法，但颜色深度可以任意改变。所有在Windows系统上运行的图片浏览软件都一定能支持BMP格式，但由于它没有经过任何压缩，体积过大，因此网页中是不能使用这种格式的，所有的论坛、博客的上传功能中都不支持BMP格式的图片。另外，有一种叫WBMP(Wireless BMP)的格式，专门用于移动设备，仅支持黑白两种颜色。在前些年单色屏幕手机霸占市场的时候拿它来做WML网页中的图片是最佳选择，但在这个彩屏普及的年代，这种格式也被淘汰了。

2.JPEG(Joint Photographic Experts Group)

可以说这种格式是网页中最常用的格式，大部分数码照相机生成的图像文件也默认是这个格式。JPEG支持8位（不常用）和24位色彩的图像。它之所以流行于各种网页，是因为它具有很高的压缩比（1MB的BMP图像最高可以压缩到20多KB），但这种高度压缩却会牺牲图片的品质，这也是我们看某些网络图片带有大量模糊斑块的原因。幸运的是，在Photoshop等图片处理软件中我们可以在生成JPEG图像时调整图片的品质（这也是我们优化图片的重点），来寻找画质与体积的平衡点。

一个品质被设定得很低的JPEG图片，我们可以看到很多模糊斑块。在颜色丰富的区域还会出现马赛克。

3.GIF(Graphics Interchange Format)

GIF格式使用的是一种LZW的压缩算法，一般情况下压缩率在50%多（但如果图片中有大片平色区域的话压缩比会更高，可能会压到几KB或更少），是一种无损压缩。但这种格式并不适合色彩太丰富的图片，因为GIF最高只支持8位256色的色彩深度，因此如果图片色彩太多或优化不好的话会严重失真。GIF还有一个最大的特点就是支持动画，这是其它图片格式办不到的。

4.PNG(Portable Network Graphic Format)

PNG格式可以说是一种万能的图像格式，在网络图片上可以替代GIF，在打印机设备上可以替代TIFF，它还支持很多GIF不能实现的特性，如它可以支持最高48位的色彩深度（但我们在Photoshop中生成的PNG大多是24+8位或8位的），支持流式读写和渐次显示（允许边下载边显示），还能完美的展示半透明效果[因为它的Alpha通道最高可以有16位，而GIF只能有一位]。PNG使用LZ77无损压缩，在高色彩模式下可以避免任何失真，不过这也使文件体积相对于JPEG来说稍微大一些。PNG与GIF相比唯一的不足就是不支持动画。

好了，我们现在开始了解如何全方位优化图片：

1.JPEG,GIF or PNG?

一般网络图片也就这三种格式，而我们优化图片首先就要选择合适的格式，这样才能达到最佳的效果。

先说JPEG。JPEG虽然是有损压缩，但它损失的并不是图片中的重要部分，而是一些不引人注意的细节，况且我们可以调节图像质量，因此我们并不需要担心有损压缩能让图片变得多难看。JPEG最适合各种照片和屏幕截图（一般照相机默认生成的就是JPEG格式）等色彩丰富的图片。

至于GIF，可就不能用于色彩丰富的图片了，特别是照相机拍摄出来的作品，因为照片的色彩一般非常丰富，而GIF最多能显示256种颜色，这样出来的照片色彩失真就会很严重了。但是GIF处理平色的能力很强，还支持背景透明，适合网页中的Logo、导航条等基本元素，因为这类图片使用的色彩一般并不是很多。还有，制作动态图片也可以用到GIF格式。

PNG我在前面也说了，它不仅是无损压缩，还支持与JPEG一样的色彩深度，但是上传的照片、截图最好不要用这种格式，因为它的体积还是有点大，如果上传这种大文件的话会影响网页加载时间，还可能浪费移动设备用户的网络流量。不过PNG适合那些带有半透明和阴影效果的图标和网站Logo，如AtomSquare的Logo就是PNG格式的。

2.裁剪/缩小图片

一个尺寸过大的图片是不能放在网页上的，这样可能会使图片超出整个浏览器的阅读范围而影响视觉效果，还会让文件体积变大，因此我们需要控制图片的尺寸。

首先我们应该裁减掉图片周围不需要的部分，如大片的白纸、无用的背景等，这在Photoshop中很容易办到，使用裁剪工具即可。

例如：我不需要这张照片周围的白纸部分，因此我要对其进行裁剪。方法很简单，点击Photoshop工具箱中的裁剪工具，然后选中你想留下的部分，然后右键点图片，按"裁剪"即可。这样可以省去不需要的背景，从而增加网页的可读性，还可以为移动设备用户节省流量。

照相机生成的照片通常有几百万甚至上千万像素，这样的照片放在网页上毫无疑问会超出浏览器的可读范围，也会使体积剧增，因此我们还要在最后缩小这个图像。放在网页上的图像宽度应该在650像素左右（大约是AtomSquare中放置正文的宽度）。虽然一般网页的总宽度都在1000多像素，但放置正文的宽度应该窄一些，这样能使阅读更舒适。

在"储存为Web和设备所用格式"中点击"图像大小"即可设置图像的尺寸。注意，一定要"约束比例"，也就是等比缩放，否则出来的图片可能会非常令人尴尬，不是地球变瘪了就是正方型变成长方形了。

尺寸调整好以后先不要急着保存，还有一些地方需要设置

3.JPEG的各种配置

JPEG是一种有损压缩，但我们可以调整它的品质损耗程度，使图像在微小损耗的条件下获得最高的压缩比。Photoshop中JPEG的品质级别为0-100,0为最差，压缩比最高，100为最好，但图像体积很大。但品质与文件体积之间并不是一个线性关系，在50-60和80-100之间曲线非常陡，而其他范围曲线比较平缓。

事实证明，当品质为80时几乎看不出图片品质的损耗，而此时文件体积比品质为100时要小一半多，因此80的品质是JPEG的最佳选择。如果不需要高画质的话可以选择50，但再往下就没必要了：品质低于50图像的模糊斑块数量会剧增，但文件体积并不会减小多少。

我们再看一下其他的选项。"优化"可以进一步缩小文件体积，但可能会降低兼容性；"连续"是干什么的呢？"连续"的JPEG图像可以先显示低分辨率，下载完以后再呈现高分辨率的图像。ICC配置文件用于打印机等设备的色彩补偿。

由于JPEG适合平滑颜色的压缩，因此适当模糊可以减小体积。在Photoshop中我们还可以对JPEG图像进行"加权优化"，也就是选取一块需要高清晰度的区域，剩下的背景按普通品质来压缩。具体方法如下：

1.在图片上选择一块区域。

2.点选择->保存选区，然后随便给新加的通道命名。

然后保存为JPEG格式，在"品质"右边有一个小按钮，点击它，进入"修改品质设置"对话框

通道选择刚才新建的通道，然后把品质调成比较高的一个值，然后确定。

这样被选取的区域很清晰，而剩下的不需要强调的区域则是普通画质。

优化好了以后保存即可。

4.GIF/PNG-8的配置

对于GIF来说，我们不需要调整它的品质（因为它是无损压缩，虽然它有"损耗"选项，但这种损耗将会使图片有被撕裂的感觉），要调整的是调色板类型、仿色和透明度。

Photoshop内置了很多标准调色板，分别有可感知、可选择、随样性、受限、自定义、Mac、Windows、灰度、黑白这几种。其中前三种调色板是Photoshop根据图像的色彩自动生成的，可以保证图像尽量少失真；受限、Mac、Windows是使用固定的调色板，图像会失真（由于现在基本上没人使用256色的显卡，这三种调色板也就没什么意义了）；灰度可以处理黑白相片，而黑白仅仅是单色图像，就像WBMP一样。

为了减少图像失真，仿色是必须使用的，但Photoshop提供的三种仿色（扩散、图案、杂色）需要根据图片来选择，哪种仿色的效果好就使用哪种。

至于透明度，GIF虽然支持透明但仅支持1位Alpha，这种透明也就仅仅能做到背景透明了，虽然它有"透明度仿色"可以模拟出半透明的效果，但实际效果并不是太好，所以如果你的图片存在必要的半透明效果，那么请使用PNG格式。

还有颜色深度，如果你需要减小图像体积，那么你就应该通过适当减少颜色深度来达到这个目的。减少时需要一点点地尝试，当图像刚好不大量失真时的颜色数为最好。

注：PNG-8与GIF的配置是一样的，但PNG-8生成的图像体积似乎要比GIF小；还有任何带有标志的选项都可以像JPEG的品质那样进行加权优化。

5.PNG-24配置

PNG24的配置选项就很少了，因为它是无损压缩，不需要调节品质，又支持真彩色，不需要调色板和仿色，我们能选择的仅仅是是否支持透明度和是否交错。这里我就不多说了，根据自己的需要进行配置就可以了。

结束的分割线

经过这些全方面的优化，我们终于可以存储制作好的图片并把它加入到网页或上传到Blog/Forum中了，这样也就不会让网页半天加载不完或浪费无线网络用户的流量了。这篇文章或许并不是非常的专业，仅仅能提供基本的优化知识（我在本文中基本上没提到各种格式的底层工作模式），但对于制作网站或上传博客、论坛图片的人是非常有帮助的。