Hardog's blog

trace forever

Group: 572218159
Email: 1273203953@qq.com
Location: hangzhou·zhejiang
GitHub: https://github.com/hardog

提示: 本文基于Centos 7.

安装GraphicsMagick

Centos中使用如下命令安装, 默认支持webp格式:

$ yum install GraphicsMagick

使用如下命令查看是否安装成功以及支持webp格式:

$ gm -version

如下图所示:
gm-version

webp图片生成

假设当前目录下存在3.jpg图片, 可使用如下CLI命令生成webp格式的图片:
$ gm convert 3.jpg 3.webp

使用du命令查看转换前后图片大小对比:
webp

3.jpg格式图片, 浏览器下载耗时与大小:
3-jpg-browser.png

转换后的3.webp格式图片, 浏览器耗时与大小:
3-webp-browser.png

可使用如下Node代码生成webp格式图片:

1
gm('3.jpg')
.write('3.webp', function(err){
	console.log(err);
});

渐进式图片生成

目前GraphicsMagick可将(PNG, GIF, JPEG)三种格式图片转换成渐进式图片格式.
interlace.png

可使用如下CLI命令生成渐进式图片:
$ gm convert 3.jpg -interlace Line 3-line.jpg

原图如下所示:
3.jpg

生成后的渐进式图片如下所示(网络较快的情况下可能看不到渐进的效果, 可以在chrome设置网络条件观察效果):
3-line.jpg

可使用如下代码生成渐进式图片:

1
gm('3.jpg')
.interlace('Line')
.write('3.webp', function(err){
	console.log(err);
});

可使用如下两种方式验证生成的图片是否是渐进式的:

第一种: CLI命令行形式(identify 需要安装ImageMagick, $ yum install ImageMagick):
$ identify -verbose 3-line.jpg | grep Interlace

非渐进式图片:
interlace-none.png
渐进式图片:
interlace-yes.png

第二种: 使用gm包查看, 代码如下:

1
gm('3-line.jpg')
.identify(function(err, data){
	console.log(data);
});

生成的数据如下, 其中Interlace项的值为Line:
interlace-gm.png

参考链接

GraphicsMagick官网
GitHub gm
GraphicsMagick Interlace
其他参考