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

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

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

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

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

_034153E05-0.jpg

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

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

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

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

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

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

_0341532260-1.png

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

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

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

_0341532523-2.png

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

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

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

_034153N41-3.png

_03415351B-4.png

_0341533X7-5.png

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

_0341535957-6.jpg

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