谈一谈网站图片压缩

公司前段时间更换登录页面的背景图。然后研究了一下相关的问题,包括PS切图、图片格式以及响应式布局三方面。

###PS切图:
除了风光背景图,像logo、登陆框组的背景这样的都应该单独切出来,保存为PNG格式。logo应该放在一张sprite图中。

###图片格式
风光背景图,之前的project里面用的是PNG格式,我没有多想,也采用了PNG格式,不过使用了PNG-8,体积是原体积一半(1MB多一点)。对这么大的背景图,我感觉有点不对劲,但是由于之前也没有经验,一下子也没搞清楚哪里不对劲。

下班后,试了试将图片保存为JPEG格式,体积变成了200K以下,于是明白了:

PNG格式适合对透明度有要求的情形;PNG-8处理不了复杂色域下的渐变,PNG-24可以几乎不失真地保留渐变。但是对于色域很广、对透明度没有要求的图片(准确地说是照片),应该毫不犹豫地采用JPEG格式。

于是,第二天我将背景图的格式保存为JPEG,体积从1.1MB降到了200KB。结果当然是速度提升很大。

####JPEGmini
JPEGmini是一个很轻量级的用于将JPEG格式图片在保证几乎不失真的前提下进行有损压缩的小软件。如果仅仅是要压缩JPEG图片,那么就可以不必打开Photoshop,而是使用这个小程序,更快更好。下载地址见:JPEGmini官方网站

###响应式布局
美工给的图是按照1920像素×1080像素做的。我把logo、登陆框的大小按照1400像素的画布进行切图,然后输出了四种尺寸的背景图:1920px,1600px,1400px,1200px。分为4个区间,每个区间使用大于本区间尺寸的那张图。至于屏幕宽度在1920像素以上的,根据项目的实际用户人群来看,目前没有考虑的必要。

###附录:
关于图片格式,多说几句。由于我觉得200K~300K的背景图尺寸可能还是有点大,于是就看了下小米的官网里面对图片的尺寸是如何控制的。就到目前来说,小米网站的图片应该是没有考虑过优化的问题。

下面是那张原图与我使用不同的压缩技术处理后的图片的比较。




格式:PNG

大小:317KB




格式: PNG-8

尺寸: 500w x 440h

大小:126.3K

设置:可选择, 256颜色, 100% 扩散仿色, 透明区域关闭, 无透明度仿色, 非交错的, 0% Web 靠色



格式: PNG-24

尺寸: 500w x 440h

大小:320.9K

设置:非交错的, 透明区域关闭



格式: JPEG

尺寸: 500w x 440h

大小:55.87K

设置:品质为60, 非连续的, 优化的打开



格式: JPEG

尺寸: 500w x 440h

大小:197.2K

设置:品质为100, 非连续的, 优化的打开

结论:保存为JPEG格式就足以满足对该类型图片的质量要求了。

Share