网页图片为了达到更快的加载速度，就必须要进行图片压缩，那么怎么压缩图片是最好的呢？我们来一起研究一下。

最近在做webapp，发现产品图的大小无论怎么压缩都还是有20-30KB，这样的大小在搜索列表页可不是个小数目。经我们的后台提醒，说京东上有一张产品图  220*220px-96dpi-6.62KB~~为了一探究竟，我做了如下实验！

在前端网页中，关于产品图和banner图的压缩，有一个总体的结论：

1.实物图倾向用jpg/jpeg格式；

2.具备较大亮度差异及强烈对比的图像倾向于png格式。

注:本文章最后详细说面了上面的结论。

但是这篇文章也提出一个观点:“jpg格式中，谨慎使用50%品质以下的压缩率”

乍一看50%以下的压缩率好像是雷区（我一直被这句话忽悠了）....

所以我一直用一个在线压缩图片的网址来压缩图片:https://tinypng.com

在要求不高的情况下，是非常好用的。根据图片内容、大小的不同，压缩率在60%-90%不等。

随便找几张图，100-200KB的图，压缩到20-30KB已经上天了，真心好奇220*220-96dpi-6.6KB是怎么做到的！

-----------------------------------------------------分割线------------------------------------------------------

于是今天做了个实验，将原图为800*800px-96dpi-75KB的图压缩到220*220px-96dpi-6.6KB，

这里需要注意，必须是使用PS的这个功能(截图版本:PS CS6 13.0):

而在PS CC16.0版本中这个选项没有了！

----------------------------------------------------- 开整 ------------------------------------------------------

先附上原图属性的截图，这3张图都是从京东上直接down下来的。

1.把800*800尺寸的图改成220*220，这个大家都会，此处略。

2.通过ps“存储为web所用格式..”其实只要把存储品质选到40左右（我为了测试，发现39这个值生成的文件大小最接近原图）这时候再点击上图下面的“存储”按钮。就大功告成了

此例中，220*220-96dpi的图能压缩到6KB，并且在手机端几乎看不出来100品质和40品质的区别，换句话说，仅仅牺牲了一点肉眼很难分辨的清晰度，换来了更小的图片大小。

这篇文章纯属用来告诫自己不要想当然，网上一些所谓的“结论”，并不一定使用所有情况。

----------------------------------------------------- 补充知识 ------------------------------------------------------

《京东后台图片优化技巧》作者：PointNet

文档主要包括以下几方面内容：

1. 基本概念
   • 位图
2. 实际应用
   • 什么时候应该使用PNG
   • 什么时候应该使用JPG
   • 总结
3. Photoshop中各种参数的含义及设置技巧

1、基本概念

• 位图

位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点，当我们把这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的图像。所以当我们放大一幅像素图时，能看到这些拼片一 样的像素点（如下图）。在web页面中所使用的JPG、PNG、GIF格式的图像都是位图。

优点：利于显示色彩层次丰富的写实图像。

缺点：文件大小较大，放大和缩小图像会失真。

• JPG和PNG

JPG和PNG的一些特性对比：

格式

压缩模式

交错支持

透明支持

动画支持

JPG

有损压缩

支持

不支持

不支持

PNG

无损压缩

支持

支持

不支持

JPG的特性

    1、支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。

    2、有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。

    3、JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。

PNG的特性

    1、能在保证最不失真的情况下尽可能压缩图像文件的大小。

    2、PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。

3、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

PNG8与PNG24

提到PNG格式可分为PNG8和PNG24，两者后面的数字则是代表这种PNG格式最多可以索引和存储的颜色值。”8″代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。

PNG8还支持1位的布尔透明通道，所谓布尔透明指的是要么完全透明要么完全不透明。而PNG24则支持8位（256阶）的alpha通道透明，也就是说可以存储从完全透明到完全不透明一共256个层级的透明度（即所谓的半透明）。

格式

最高支持色彩通道

索引色编辑支持

透明支持

PNG8

256色

支持

支持布尔透明

PNG24

约1600万色

不支持

支持8位（256阶）alpha透明

• GIF

由于GIF现在使用率偏低，常适用于GIF动画，由于PNG本身是开发者为了代替GIF而衍生出的图片格式，所以透明图片建议采用PNG8。

GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50%左右，它不属于任何应用程序。 GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。

2、实际应用

• 什么时候应该使用PNG

案例1：

下图为京东商城header部分用JPG和PNG8格式分别进行保存，可以看到保存的结果有两个值得注意的地方：

1、JPG保存的文件大小比是PNG保存的文件大

2、JPG文件出现了噪点

 

造成结果的原因分析：

1、 首先我们发现文字颜色和描边等都是采用纯色， 图像所包含的色彩信息非常有限。当用PNG存储这个图像时，只需要保存很少的色彩信息就可以真实还原这个图 像。而对于JPG格式来说大小主要决定于图像的颜色层次，所以在这种颜色较少但对比强烈的情况下，反而不能很好的压缩文件大小。

案例2：

下图用PNG8和JPG进行了保存，发现当用PNG8保存时不仅保证了图像的质量且图像文件的大小仅有8.3K，而当用JPG 100%保存时文件大小则增加到44.2K，如果不经放大可能还看不出具体的差异，但实际和前面一样也会出现不必要的噪点。如果我们要达到PNG8的压缩 率采用JPG 45%进行保存，则图像会出现较严重的失真。

 

结论 具备以下条件的图像更适合用PNG8格式进行存储：

1、图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充。

2、具备较大亮度差异以及强烈对比的简单图像（如“立刻购买”按钮中的背景和文字）。

• 什么时候应该使用JPG

案例1：

下图用JPG 60%（左上）、PNG8 256色 无仿色（右上）、PNG8 256色 扩散仿色（左下）、PNG32（右下）分别进行了存储。可以看出当用JPG存储图像时不仅能够达到最大的压缩率，也能尽量保证原图的还原效果。而采用PNG8进行保存时图像文件大小更大，失真也较严重。只有在PNG24的格式下才能保证品质，然而文件大小却比JPG要大很多。

造成结果的原因分析：

产生这种结果的原因也与JPG和PNG各自的压缩算法有关。

1、对于摄影或者写实作品，由于受环境光线的影响，图像上的色彩层次十分丰富。比如巴士车上的红色区域由于反光、阴影以及透视效果会形成明暗、深浅各异的区域，如果用PNG去保存，则需要不同明暗度的红色去存储这个区域。对于整张图片来说，PNG8的256色无法完全索引图像上出现的所有颜色，于是在存储时就会丢失许多颜色而产生失真。如果要保证图像的效果，则需要色彩范围更广的PNG24进行存储，相应的文件大小也会增加。

2、JPG的压缩算法则更利于对真实世界中这些复杂的色彩变化进行压缩处理，从而在尽量压缩文件大小的情况下比较好的还原图像的视觉效果。

 

案例2

下图中用不同图片格式对背景进行保存时可以发现：当用JPG进行保存时（直接背景另存为）文件大小仅36.3K；用PNG8 256色无仿色去保存时大小增加到57.7K，不仅如此由于颜色的缺失在图像上还出现了一些带锯齿的色块；为了降低这些色块对图像质量的影响我们对PNG8增加了扩散仿色的效果，此时文件大小达到了156.3K；而当采用PNG24完全不失真的保存时文件大小是231.9K。

造成结果的原因分析：

我们可以发现由于在图像上采用了很多的真实素材（比如白云、蚂蚁、绿叶等），而这些真实素材和摄影图像一样也会存在非常丰富的色彩层次，所以也不适合用PNG格式进行保存。这个时候我们就应该采用JPG格式。

 

 

 

结论 具备以下条件的图像更适合用JPG格式进行存储：

对于写实的摄影图像或是颜色层次非常丰富的图像采用JPG的图片格式保存一般能达到最佳的压缩效果。

 

总结

在存储图像时采用JPG还是PNG主要依据图像上的色彩层次和颜色数量进行选择。一般层次丰富颜色较多的图像采用JPG存储，而颜色简单对比强烈的则需要采用PNG。但也会有一些特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含的颜色数量有限时，也可以尝试用PNG进 行存储。而有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用JPG进行存储了。

另外还有一个原则就是用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储，这样才能更好的保证设计品质。而其他一些内容元素，如广告Banner、商品图片等对质量要求不是特别苛刻的，则可以用JPG去进行存储从而降低文件大小。

3、Photoshop中各种参数的含义及设置技巧

• PNG8的参数设置

减低颜色深度算法与颜色

指定用于生成颜色查找表的方法，以及想要在颜色查找表中使用的颜色数量。可以选择以下减低颜色深度算法之一：

1. 可感知：通过为人眼比较灵敏的颜色赋以优先权来创建自定颜色表。
2. 可选择：创建一个颜色表，此表与”可感知”颜色表类似，但对大范围的颜色区域和保留 Web 颜色有利。此颜色表通常会生成具有最大颜色完整性的图像。“可选择”是默认选项。
3. 随样性：通过从图像的主要色谱中提取色样来创建自定颜色表。例如，只包含绿色和蓝色的图像产生主要由绿色和蓝色构成的颜色表。大多数图像的颜色集中在色谱的特定区域。
4. 受限 (Web)：使用 Windows 和 Mac OS 8 位（256 色）调板通用的标准 216 色颜色表。该选项确保当使用 8 位颜色显示图像时，不会对颜色应用浏览器仿色。（该调板也称为 Web 安全调板。） 使用 Web 调板可能会创建较大的文件，因此，只有当避免浏览器仿色是优先考虑的因素时，才建议使用该选项。
5. 自定：使用用户创建或修改的调色板。如果打开现有的 GIF 或 PNG-8 文件，它将具有自定调色板。使用”存储为 Web 和设备所用格式”对话框中的”颜色表”调板可自定颜色查找表。
6. 黑白、灰度、Mac OS、Windows使用一组调色板。

PS：一般情况下默认选择“可选择”项即可。

仿色方法和仿色

确定应用程序仿色的方法和数量。”仿色”是指模拟计算机的颜色显示系统中未提供的颜色的方法。

较高的仿色百分比使图像中出现更多的颜色和更多的细节，但同时也会增大文件大小。为了获得最佳压缩比，请使用可提供所需颜色细节的最低百分比的仿色。

若图像所包含的颜色主要是纯色，则在不应用仿色时通常也能正常显示。包含连续色调（尤其是颜色渐变）的图像，可能需要仿色以防止出现颜色条带现象。

可以选择以下几种仿色方法之一：

1. 扩散：应用与”图案”仿色相比通常不太明显的随机图案。仿色效果在相邻像素间扩散。
2. 图案：使用类似半调的方形图案模拟颜色表中没有的任何颜色。
3. 杂色：应用与”扩散”仿色方法相似的随机图案，但不在相邻像素间扩散图案。使用”杂色”仿色方法时不会出现接缝。

ps：一般只在图片颜色过多产生失真的情况下才需要选择仿色。建议选择扩散仿色，可以适当调节仿色的百分比以达到最佳的效果。仿色度越高文件大小也越大。

透明度和杂边

确定如何优化图像中的透明像素。

1. 要使完全透明的像素透明并将部分透明的像素与一种颜色相混合，请选择”透明度”，然后选择一种杂边颜色。
2. 要使用一种颜色填充完全透明的像素并将部分透明的像素与同一种颜色相混合，请选择一种杂边颜色，然后取消选择”透明度”。
3. 要选择杂边颜色，请单击”杂边”色板，然后在拾色器中选择一种颜色。或者，也可以从”杂边”菜单中选择一个选项：”吸管”（使用吸管样本框中的颜色）、”前景色”、”背景色”、”白色”、”黑色”或”其它”（使用拾色器）

 

交错

PNG、GIF这两种图像格式都提供了一种功能，让图像能够更快地显示。图像可以以一种特殊方式存储，显示时先大概显示图像的草图，当文件全部下载后再填充细节。这起到一种很有意义的心理效果，因为这样使人们有东西可看，而不必坐着干等大型图像慢慢显示在屏幕上。

ps：对于尺寸和文件大小相对较大的图片建议勾选此项。

• JPG的参数设置

品质

从”品质级别”菜单中选取一个选项，或者在”品质”文本框中指定一个值。”品质”设置越高，压缩算法保留的细节越多。但是，使用高”品质”设置比使用低”品质”设置生成的文件大。查看几种品质设置下的优化图像，确定品质和文件大小之间的最佳平衡点。

品质设置技巧

1. 不要存100%品质的JPG格式图片。因为100%并不一定是最高的品质，只是一个数值上的优化底线，最终你会得到一个不合理的大文件。事实上把质量设置在95以上就已经足以防止丢失信息了。
   在质量上有个分水岭，这就是我们通常建议JPG质量最好是在60-80的原因。
2. 谨慎使用50%品质以下的压缩率。当在Photoshop中把质量设置低于51的时候，它就会执行另一个叫做 “降色采样（原文：color down-sampling）”的优化算法，它会在8个像素周围平均采样，这样会在边缘产生杂色。
   使用50%以下品质存储时会采用额外的压缩算法而导致图片失真更严重，尤其是对于有高对比度的图片。

 

图例（左为质量50右为质量51）

优化

选择”优化”创建文件大小稍小的增强型 JPEG。建议使用”优化 JPEG”格式以获得最大文件压缩量；但是，一些较旧的浏览器不支持此特性。

ps：建议勾选此项，目前基本已经不存在不支持改功能的浏览器。

连续

选择”连续”创建在 Web 浏览器中连续显示的图像。图像将显示为一系列的叠加，使查看者在整个图像下载完毕之前，能够看到图像的低分辨率版本。连续 JPEG 需要更多的内存用于查看，一些浏览器不支持该选项。

ps：勾选此项在某些情况下可压缩文件大小（图片大小大于10k时），某些情况下会增大文件大小，建议在保存是根据实际情况决定。不过IE6及更早版本的IE浏览器不支持JPG连续显示，而是在图片完全加载后一次成像，用户体验上可能还不如不使用连续的逐步成像要 好，所以建议慎选此项。

模糊

指定应用于图像的模糊量。”模糊”选项应用与”高斯模糊”滤镜相同的效果，并允许进一步压缩文件以获得更小的文件大小。建议使用 0.1 到 0.5 之间的设置。

ICC 配置文件

选择”ICC 配置文件”将图片的 ICC 配置文件与文件保留在一起。ICC 配置文件由某些浏览器用于色彩校正。（请参阅Photoshop中设置色彩管理。）

杂边

指定原稿图像中透明像素的填充色：点按”杂边”色板，然后在拾色器中选择一种颜色。从”杂边”菜单中选取选项。原稿图像中完全透明的像素由选中的颜色填充，原稿图像中部分透明的像素与选中的颜色相混合。

全教程完,学完记得交作业。如果本教程对您有所帮助，请推荐给你的朋友。