使用命令行優(yōu)化圖片的那些工具

圖片作為頁面的一個主要因素，它的大小直接影響了頁面的加載速度，這一點在移動端尤顯突出。

怎么讓圖片的大小更小?除了選擇合適的格式(jpeg、gif、png)，我們還可以利用網(wǎng)上的應(yīng)用(如smushit、tinypng、imagemin、imageOptim)對圖片進(jìn)行壓縮。在這里我想給大家介紹一下上述應(yīng)用主要使用到了哪些命令行工具以及它們的使用方法。

Jpegtran

JPEG的壓縮工具有jpegtran和jpegoptim，這兩款工具的壓縮效果幾乎沒有區(qū)別，在這里我們推薦使用jpegtran，相比后者，jpegtran可以進(jìn)行progressive編碼，使圖片漸進(jìn)式的展現(xiàn)，先顯示模糊的圖片，再逐步清晰。

推薦命令行參數(shù)：

jpegtran –copy none –optimize -progressive -outfile out.jpg in.jpg

想知道這些參數(shù)的具體作用，可使用命令“jpegtran –h”了解，下同。

Gifsicle

Gif動畫可使用gifsicle來優(yōu)化，它會剝離不同幀中重復(fù)的像素來優(yōu)化gif動畫，對于單幀gif我們推薦還是使用png8來替代。

推薦命令行參數(shù)：

gifsicle –interlace -O3 –careful –no-comments –no-names –same-delay –same-loopcount –no-warnings -o out.gif in.gif

pngcrush、optipng、pngout

PNG壓縮可分為無損壓縮和有損壓縮，以上三款可以說是現(xiàn)在比較主流的無損壓縮工具了。從ImageOptim的壓縮效果可以看出，optipng和pngcrush對于色彩比較單一、大小比較小的圖片壓縮效果好于pngout，而對于色彩比較豐富、透明漸變的圖片來說pngout的壓縮比明顯更高。另外，經(jīng)測試，Google的PageSpeed上提供的可壓縮比是按照optipng給出的。

推薦命令行參數(shù)：

pngcrush -brute -rem alla -nofilecheck -bail -blacken -reduce -cc in.png out.png

optipng -strip all -quiet -clobber -o3 -i0 in.png -out out.png

pngout -k1 -r -v in.png out.png

pngquant、pngnq

兩款PNG的有損壓縮工具，基本都能將圖片壓縮掉40%以上，它們會將PNG轉(zhuǎn)換成alpha透明的PNG8，由于PNG8最多支持256色，所以內(nèi)容豐富的圖片壓縮后會看出些許差異，但屬于可接受范圍內(nèi)，而純色圖片基本能保持原圖的質(zhì)量。另外，這種alpha透明的PNG8圖片在IE6以上及其他標(biāo)準(zhǔn)瀏覽器可以顯示正常的alpha透明度，在IE6中則會忽略掉有alpha透明度的顏色，作為全透明處理(邊緣稍有鋸齒但影響不大)，而不像png32那樣alpha透明區(qū)域在IE6下顯示灰色。

推薦命令行參數(shù)：

pngnq –s 1 –d outdir/ in.png

pngquant -s1 –o out.png in.png

PS：pngquant的-s是speed參數(shù)，可選值1-10，默認(rèn)為3，在經(jīng)過多圖測試后發(fā)現(xiàn)1的壓縮比和效果都是最佳的，其他的參數(shù)或多或少存在缺陷，這里推薦選1。

總結(jié)

如果您已經(jīng)學(xué)會如何使用這些命令行軟件對自己的圖片進(jìn)行壓縮優(yōu)化，那么恭喜您，您的圖片瘦身成功。如果您覺得命令行一行一行的壓縮圖片太麻煩，那么除了去使用文章開頭所說到的那幾款應(yīng)用外，感興趣的同學(xué)也可以整合它們?nèi)ラ_發(fā)一套自己的應(yīng)用，利用php的exec、nodejs的child_process.exec(cmd, [options], callback)等等方法執(zhí)行shell命令，再配上一些交互，一款好用的圖片優(yōu)化應(yīng)用就此誕生。最后希望這篇文章對大家有所幫助。