您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設計教程 >> 設計理論 >> 瀏覽設計教程

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

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

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


imageoptim


Jpegtran

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

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

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

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

Gifsicle

Gif動畫可使用gifsicle來優(yōu)化,它會剝離不同幀中重復的像素來優(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給出的。


imageoptim_1



imageoptim_2


推薦命令行參數(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轉換成alpha透明的PNG8,由于PNG8最多支持256色,所以內(nèi)容豐富的圖片壓縮后會看出些許差異,但屬于可接受范圍內(nèi),而純色圖片基本能保持原圖的質量。另外,這種alpha透明的PNG8圖片在IE6以上及其他標準瀏覽器可以顯示正常的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,默認為3,在經(jīng)過多圖測試后發(fā)現(xiàn)1的壓縮比和效果都是最佳的,其他的參數(shù)或多或少存在缺陷,這里推薦選1。

總結

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


[教程作者:曉輝]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di2954.html
驚!網(wǎng)頁字體設置你真的了解嗎?
設備的轉向設計:從縱向到橫向
圖趣網(wǎng)微信
建議反饋
×