首页 » 信息技术 »

网页图片优化指南

2019年8月2日 / 21次阅读
图片处理

本文内容主要来自YUI团队Stoyan Stefanov在2008年写的4篇文章,他是YSlow工具开发团队的头儿,现在是不是就不知道了。这几篇文章都是英文的,虽然写于2008年,但是依然很有价值。

原始内容链接:
https://yuiblog.com/blog/2008/10/29/imageopt-1/
https://yuiblog.com/blog/2008/11/04/imageopt-2/
https://yuiblog.com/blog/2008/11/14/imageopt-3/
https://yuiblog.com/blog/2008/12/05/imageopt-4/

本文不是翻译,只是将这几篇英文文档中的个人认为重要的信息收集整理,并与其它一些学习资料整合。

图片优化的目的是加速网页的加载,这是SEO很关键的一项,也是提高访问者体验很重要的一环。空白网页的加载最快,但这毫无意义。我们需要考虑的是,在决定了网页内容之后,对其中的图片进行优化,尽可能提高这些内容的加载速度。

如何选择在网页上使用哪种图片格式呢?直接写结论吧,我也不是专门研究图片格式的。

网站使用的小图片,比如favicon,使用PNG-8;

网站其它图片,建议全部使用JPG格式;

如果一定要有动画,只能用GIF格式

暂时不建议使用WebP格式,有兼容性的问题(商业利益),safari和firefox等浏览器都不支持;

更不要去使用BMP格式,这种图片体积巨大。

图片的无损压缩

PNG图片中有一些数据不用于图片显示,叫做chunks,去掉这些数据不影响图片质量。相关工具:pngcrush,pngrewrite,optipng,pngout。这些工具应该也可以对png图片做有损压缩。

JPG图片的无损压缩,一是去掉各种metadata,还有就是考虑使用渐进式的JPG格式(progressive jpg),这部分最后详细说明。工具推荐:jpegtran。jpegtran工具在libjpeg里,编译安装libjpeg工具

GIF如果不是动画,就转成PNG,或者JPG。如果是动画,可以用gifsicle这个工具来优化。

以上这些都是无损压缩!如果可以考虑降低图片质量,就要进行有损压缩

PNG的有损压缩,前面的几款工具应该有这个功能,我个人没有研究过。

JPG的有损压缩,这个有点tricky。JPG已经是压缩过的了,如何再有损压缩呢?有办法,使用libjpeg里面的cjpeg工具来对JPG图片重新进行压缩

GIF有一款可以调整尺寸的工具,使用gif resizer来调整GIF大小

最后,我要重点介绍JPG的无损压缩:

因为JPG图片的使用最多,对JPG进行有损压缩之后,还是要再做一遍无损。而且这个topic也是开篇提到的4篇英文文章中,我认为最大的亮点。

首先要了解:JPG图片格式有Baseline和Progressive两种

很多人都说应该使用Progressive格式的JPG,因为用户体验更好,图片体积更小。这个结论其实并不严谨!

Stoyan Stefanov做了一个实验,他随机在网上找了上万张JPG图片,下载下来后,

做无损baseline压缩,平均压缩了9.04%

做无损progressive压缩,平均压缩了11.45%

看起来progressive jpg更好,因为压缩率更好。但是,这只是统计意义上的更好。因为他发现,有15%的图片,progressive格式反而比baseline格式要大!

特别是比较小的jpg图片,progressive格式的体积会更大。

图片越大,progressive格式体积更小的概率也越大。

小于30K的jpg图片,有很多progressive格式的体积更大

小于30K的jpg图片,有很多progressive格式的体积更大

这个图片,横轴是原始图片大小,纵轴是baseline-progressive的差。差小于0,就表示progressive格式的jpg更大。

有了这个结论,我们做JPG的无损压缩,就要这样来了:将原始JPG,和baseline,以及progressive这三者进行比较,那个最小用那个!

以上就是对网页图片优化的总结!enjoy...

本文链接:https://www.maixj.net/ict/tupian-youhua-22303

相关文章

留言区


前一篇:
后一篇:

栏目精选

云上小悟,麦新杰的独立博客

Ctrl+D 收藏本页

栏目


©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1。云上小悟网站部分内容来源于网络,转载目的是为了整合信息,收藏学习,服务大家,有些转载内容也难以判断是否有侵权问题,如果侵犯了您的权益,请及时联系站长,我会立即删除。

网站二维码
go to top