谈一谈网站图片压缩

2014-09-21

图像处理

Web性能优化, 图像处理

Catalogue

1. PS切图：
2. 图片格式
1. 2.1. JPEGmini
3. 响应式布局
4. 附录：

公司前段时间更换登录页面的背景图。然后研究了一下相关的问题，包括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像素以上的，根据项目的实际用户人群来看，目前没有考虑的必要。