用 smush.it 无损压缩网页图像文件

虽然现在网速越来越快,但对一名前端攻城师来讲,每一个字节都是需要计较的,由此也产生了大量压缩JS、压缩CSS的应用。

但对这些纯文本文件的压缩起到的效果对整个网站来说如同杯水车薪,因为网页最占空间的还是图片资源。今天我给大家介绍一个压缩图片文件的工具—— Smush.it™

Smush.it™ 目前支持三种格式的文件——JPG、PNG、GIF。它使用的是无损压缩技术,它使用的压缩方法比较另类。

对于JPEG会清除掉文件中的元数据(如 EXIF 信息、缩略图、音频信息等等),对于静态GIF会将其尝试转换为PNG(多数情况下 PNG 比 GIF 更好),对于动态GIF会去除掉不同帧之间相同的像素,而对于PNG采取的也是清除其中冗余信息的方式。

我们来看看压缩效果吧!

我在网上随便找了一张图片(百度“萨摩”第一张),貌似是百度百科里的图片。

百度“萨摩”

这是一张 JPEG 格式的图片,我们用 Photoshop 将其转换为 GIF、PNG 格式,其中 PNG 启用压缩和不启用压缩分别保存为 PNG - COM和PNG - RAW。

待测文件

我们将其上传至 Smush.it™

上传待测文件

点击“Smush”就可以看到结果啦:

压缩结果

这四张图片一共被减掉了33.55%的体积,足足减掉了508.31KB。可以看到它将GIF文件转成了PNG文件,体积减小了12.46%。

对于两张PNG文件,转换后的结果是一样的,说明其采用的算法非常稳定。对于未经压缩的PNG文件压缩效果非常好,达到了54.86%;经过压缩的PNG虽然没有多少变化但还是减掉了67字节。

至于为什么GIF转为PNG比原PNG还要小,是因为从JPEG转为GIF过程中会有色彩丢失(GIF只支持256色),所以这时再转回PNG体积会变小。

由于这张图片是在网上随便找的,可能已经经过压缩,所以对JPEG效果比较一般,实际使用中对各种图片的压缩率都有10+%。

最重要的是,它是无损的。站长们快拿去优化你们的站点吧!


Source