世纪公园 芦苇

Imagemagick图片优化选项的理解

Posted onLeave a commentCategories技术文章

最近给公司做网站优化的时候用到了谷歌的 PageSpeed Insights 其中有一项建议是优化图片。
当时赶项目进度, 自己本身又不是搞图像处理的就没有细细去思考谷歌文档上各种参数的意义,趁这时间整理一下。

文档上面建议用 Imagemagick 并给出了一个参考例子如下 ( JPG ):

convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/RGB] OUTPUT.jpg

-sampling-factor 这个参数意思是降低色彩采样,反正人眼看不出来。

-strip 这个从英文单词意思理解就是把图片上面的附带的信息扔掉。比如拍摄照片的器材,拍摄参数等等扔掉。单单这一个参数就能显著缩小图片的大小。

-resize 这个是可选的参数,但是也很重要。如果你的网页里有个1280×800的图片,你却用css设置成300×200当缩略图用,对不起谷歌是不认的。基本该是缩略图的地方就该展示一个小号的图片。

-quality 这个也比较好理解,给图片质量打个折来减少图片大小。网上一般建议是85%,谷歌的说法是高于85%的情况下图片迅速变大,而质量变化不明显。

-interlace 这个参数比较费解。中文翻译叫“交织”。扯淡呢这不。何为交织,各种查资料最后在 wikipedia 找到一个比较好理解的解释。原来这是位图的一种编码方式,就是在低网速情况下先给你展示一个模糊的轮廓,然后慢慢的变清晰。没这个参数的话,同样情况下图片就一部分一部分加载出来。

-colorspace 这个就有点小麻烦了,黑白照片用灰度色彩空间的。总不能在批量脚本里还人工去判断一下图片是黑白还是彩色吧。基本就不考虑这个参数了。

无损格式 PNG 和 GIF 的可用参数很少,基本就是-strip参数,很难像 JPG 那样显著压缩大小。能压一点是一点了。

我用来批处理的shell命令:

#清理残余
sudo -u www-data find . -size 0 -exec rm '{}' \;

# 批量优化 jpe?g
find . -type f -iregex '.*\.jpe?g' -not -iregex '.*\-[0-9]+x[0-9]+\.jpe?g$' -exec sudo -u www-data mogrify -strip -sampling-factor 4:2:0 -colorspace RGB -interlace JPEG -quality 85 '{}' \;

# 批量优化 png
find . -type f -iregex '.*\.png' -not -iregex '.*\-[0-9]+x[0-9]+\.png$' -exec sudo -u www-data mogrify -strip '{}' \;

发表评论

电子邮件地址不会被公开。 必填项已用*标注