調(diào)整ImageMagick使網(wǎng)站打開的更快！

圖片?一直保持我們的腳趾很長一段時間,現(xiàn)在他們在瀏覽器正在牽引,他們有一個可怕的問題:需要嗎?有效地調(diào)整我們的形象全部資產(chǎn)?。 響應(yīng)圖像的工作方式是,一個適當(dāng)大小的圖像發(fā)送給每個用戶——小版本用戶在小屏幕上,大屏幕上大版本的用戶。

神奇的網(wǎng)絡(luò)性能,但是我們不得不面對殘酷的現(xiàn)實(shí),為不同用戶提供不同大小的圖片意味著我們首先需要創(chuàng)建不同的文件,和?可以是一個巨大的痛苦?。

許多工具自動化圖像縮放,但往往他們創(chuàng)建大型文件,取消響應(yīng)圖像應(yīng)該提供的性能優(yōu)勢。 在本文中,我們將看到如何使用?ImageMagick?-一個開源命令行圖形編輯器來快速調(diào)整您的圖片?維護(hù)好視覺質(zhì)量?和非常小的文件大小。

大圖片= =大問題

的?平均網(wǎng)頁大約是2 MB?大小,約三分之二的重量從圖像。 與此同時,數(shù)以百萬計(jì)的人們上網(wǎng)3 g-or-worse連接,使一個恐怖秀使用2 MB的網(wǎng)站。 即使在一個快速連接,2 MB的網(wǎng)站會嚴(yán)重破壞你的計(jì)劃和用戶的數(shù)據(jù)?讓他們真正的錢?。 提高網(wǎng)絡(luò)性能,給用戶更好的體驗(yàn)是我們的開發(fā)人員和設(shè)計(jì)人員的工作。

一般的web頁面是2099 KB、2099 KB的來自圖像。 (圖片:?HTTP存檔?)(?查看大版本?)

響應(yīng)的圖像?救援! 對嗎? 嗯,是的,但是首先我們必須生成響應(yīng)圖像的資產(chǎn),而且我們必須確保這些資產(chǎn)看起來不錯,足夠小的足跡來提高網(wǎng)站的性能。

一個非常小的網(wǎng)站,節(jié)省幾個不同大小的每個圖像直接在我們的圖像編輯器是微不足道的——Photoshop甚至提供了一個方便的網(wǎng)絡(luò)“保存”選項(xiàng),文件大小保持在一個低水平。 但是對于一個大型網(wǎng)站的圖片嗎? 一個在線商店,例如,可能有成百上千的形象資產(chǎn),必須創(chuàng)建不同大小的這些是一個巨大的任務(wù)。

ImageMagick

這就是?自動圖像大小?方便。 一群工具做到這一點(diǎn),包括?GD?和?GraphicsMagick?,但I(xiàn)mageMagick?獲得一個好的平衡能力和可用性之間在托管環(huán)境中。 ImageMagick已有近25年,是一個完整的命令行圖像編輯器。 人們普遍支持的內(nèi)容管理系統(tǒng)(CMS)等WordPress?和?Drupal?跑步者等,結(jié)合任務(wù)?咕噥著說?,用在自己的自動化圖像編輯,包括調(diào)整。

它也可以在桌面系統(tǒng)(Mac,Windows和Linux)。 如果你使用?家釀?在Mac,你可以安裝它是這樣的:

brew install imagemagick

否則,尋找你最喜歡的包管理器,或者?直接從ImageMagick網(wǎng)站下載它?。

ImageMagick提供了一個快速、簡單的方法來自動化圖像調(diào)整。 不幸的是,使用默認(rèn)設(shè)置,它輸出的大小文件通常非常大,有時比輸入的圖像,即使輸出像素較少。 這些大文件完全否定你期望的性能從響應(yīng)圖像和,事實(shí)上,可以為您的用戶使事情變得更糟比如果你僅僅把巨大的新資產(chǎn)補(bǔ)。

下面,我將描述這個問題存在的原因,并向您展示如何改變ImageMagick的默認(rèn)設(shè)置來解決這個問題,小,美觀圖片。

圖像縮放是如何工作的

解決這個問題的最好方法是理解它發(fā)生的原因,這意味著理解基本的圖像縮放是如何工作的。

根據(jù)定義,當(dāng)計(jì)算機(jī)調(diào)整圖像,圖像的像素的數(shù)量將會改變。 如果圖像被放大,輸出比輸入將會有更多的像素;如果正在縮小圖像,輸出比輸入像素將會減少。 的挑戰(zhàn)是找出最好的方法來存儲原始圖像的?內(nèi)容?在這個不同數(shù)量的像素。 換句話說,我們需要找出最好的方式添加或刪除像素不改變圖像是什么樣子的。

雖然不常見用例,形象?upsampling?(即,使圖像更大)可能有點(diǎn)容易想象,所以讓我們開始。 考慮一個藍(lán)色的4×4像素的正方形,我們想在8×8像素大小的兩倍。 我們做的是采取相同的圖像,將它應(yīng)用于一個新的像素網(wǎng)格;這就是所謂的?重采樣?,通常我們的意思當(dāng)我們談?wù)撜{(diào)整圖像。 重新取樣我們的4×4藍(lán)色方塊8×8像素,我們需要添加額外48像素。 這些像素需要一些顏色值,確定顏色值的過程?插值?。 當(dāng)你重采樣時,調(diào)用算法來確定插值是如何工作的?重采樣濾波器?。

我們?nèi)绾沃匦氯右粋€4×4的像素廣場8×8像素網(wǎng)格? (?查看大版本?)

我們可以使用各種各樣的重新取樣過濾器和插值的方法來找出那些48額外的像素。 絕對簡單的事情我們可以做的就是添加四行四列的像素在一些任意的顏色,比如紅色。 這就是所謂的?背景插值?,因?yàn)榭障袼刂皇潜┞侗尘邦伾?紅色)。 這是你在做什么在Photoshop中調(diào)整時使用“圖像”→“畫布大小”,而不是“圖像”→“圖像大小”。

當(dāng)然,這是一個可怕的結(jié)果,當(dāng)我們要調(diào)整一個形象:我們不認(rèn)為新的輸出圖像真的看起來像原始輸入圖像;原廣場是藍(lán)色的,一個是藍(lán)色和紅色。 背景像素插值只能當(dāng)添加(即當(dāng)使圖像更大或當(dāng)upsampling),甚至然后調(diào)整基本上是沒用的,除了作為一種手段來顯示新的像素。

背景插值。 (?查看大版本?)

另一個非常簡單的插值方法?讓我們的新像素相同的顏色?作為他們的鄰近像素;這就是所謂的最近鄰插值。 這會產(chǎn)生更好的結(jié)果比背景插值,尤其對于這樣一個簡單的廣場。

最近鄰插值:upsampling廣場。 (?查看大版本?)

將采樣?(即,使圖像更小)與最近鄰插值不是upsampling一樣直觀,但它有助于記住數(shù)學(xué)涉及與分?jǐn)?shù)像素就可以了。 首先,新像素網(wǎng)格應(yīng)用到這本形象。 因?yàn)橛懈俚南袼卮鎯D像信息,一些新網(wǎng)格將包含多個像素的顏色,在下面的例子中,一些像素包含兩個藍(lán)白相間的。

以這種方式輸出圖像的物理像素在現(xiàn)實(shí)世界是不可能的,雖然,每一個像素都可以只有一個顏色。 每個像素的最終顏色在新網(wǎng)格是由顏色的中心點(diǎn)。 換句話說,中心?點(diǎn)?是?采樣?確定最后的顏色,這就是為什么最近鄰插值有時被稱為?點(diǎn)取樣?。

最近鄰插值法:將采樣一個圈。 (?查看大版本?)

更復(fù)雜的任何行或廣場,最近鄰插值產(chǎn)生鋸齒狀,塊狀的圖像。 它又快又創(chuàng)造了小文件,但是看起來不很好。

最在最近鄰插值重采樣過濾器使用某種形式的變化——他們多個樣本點(diǎn)來確定一個像素的顏色和使用數(shù)學(xué),試圖想出一個聰明的妥協(xié)對于那些值。 雙線性插值,例如,創(chuàng)建一個加權(quán)平均的顏色。 比最近鄰插值產(chǎn)生更好的結(jié)果。

雙線性插值。 (?查看大版本?)

重采樣的方法之一——和特定的重采樣濾波器使用會影響文件大小是影響圖像的顏色。 雙線性插值給出了圓平滑的邊緣,但這意味著給圖像更多的顏色。 原來的藍(lán)色圓有兩個顏色,藍(lán)色和白色。 大小圈——一些像素蒼白bluey-white還多。 在其他條件不變的情況下,會有更多的顏色在圖像文件大小更大。 這就是為什么有時調(diào)整圖像減少像素賦予了它更多的字節(jié)。

所有這一切意味著什么

為了使輸出圖像較小,我們還想看一看方法來減少顏色的數(shù)量在不犧牲質(zhì)量。 選擇一個適當(dāng)?shù)闹夭蓸訛V波器有一個最大的影響,但其他設(shè)置可以影響輸出的顏色的數(shù)量。 我還將討論設(shè)置,控制文件壓縮和質(zhì)量,消除無關(guān)的數(shù)據(jù)。

ImageMagick的最優(yōu)設(shè)置

IMAGEMAGICK基礎(chǔ)知識

ImageMagick有?大量的選項(xiàng)和功能?,找到一個好的組合這些可能會非常棘手。

我們感興趣的兩個主要ImageMagick設(shè)置,?轉(zhuǎn)換和?mogrify。 這兩個執(zhí)行類似的操作,但是?mogrify旨在用于多個文件,在嗎?轉(zhuǎn)換一次只處理一個圖像。

一個簡單的ImageMagick操作看起來像這樣:

convert input.jpg-resize300output.jpg

這表示,我們希望ImageMagick的?轉(zhuǎn)換函數(shù)將?input.jpg調(diào)整到300像素寬,然后保存到?output.jpg。 的?調(diào)整300年部分的一個例子是ImageMagick的許多內(nèi)置函數(shù)。 每個函數(shù)使用相同的格式:?-functionName選項(xiàng)。

使用?mogrify是相似的,但語法重新排序:

mogrify-path output/-resize300*.jpg

這表示,我們希望ImageMagick的?mogrify函數(shù)把所有JPEG文件在當(dāng)前目錄(?* . jpg),調(diào)整他們300像素寬,然后拯救他們?輸出目錄中。

函數(shù)可以結(jié)合對于更復(fù)雜的結(jié)果:

convert input.jpg-resize300-quality75output.jpg

和之前一樣,這個調(diào)整大小?input.jpg300像素寬,但這次也將JPEG質(zhì)量設(shè)置為75之前拯救它?output.jpg。

我執(zhí)行?數(shù)以百計(jì)的測試?看到它的組合功能和選項(xiàng)產(chǎn)生最小的結(jié)果在一個可接受的質(zhì)量。

測試和結(jié)果

我想保持文件大小盡可能低但質(zhì)量高與Photoshop的“保存網(wǎng)絡(luò)。 ”為此,我使用了一個主觀質(zhì)量衡量——我自己的意見是否輸出看起來不錯——和客觀質(zhì)量測量?結(jié)構(gòu)不同(DSSIM)。 DSSIM比較兩個圖像——在這種情況下,我測試圖像和控制生成的Photoshop的“保存Web”,生成一個分?jǐn)?shù)。 得分越低,圖像越相似;得分為零意味著他們是相同的。 確保測試圖片看起來一樣的Photoshop的輸出,我想要一個意味著DSSIM得分為0.0075或更低。 在?去年公布的研究?,?RadWare?發(fā)現(xiàn)圖像對DSSIM得分為0.015的測試用戶是沒有區(qū)別的。

以確保沒有偏見的結(jié)果離群值,我測試了40圖像jpeg和png,照片、圖紙和藝術(shù)線條,顏色和單色,透明和不透明。 我還測試了三個輸出大小(300、600和1200像素寬)從各種輸入大小。 最后,我測試了這兩個有或沒有形象的優(yōu)化。

從我的測試中,使用以下設(shè)置運(yùn)行ImageMagick?結(jié)果最小的?,而一般視覺與Photoshop的輸出:

mogrify-path OUTPUT_PATH-filter Triangle-define filter:support=2-thumbnail OUTPUT_WIDTH-unsharp0.25x0.25+8+0.065-dither None-posterize136-quality82-define jpeg:fancy-upsampling=off-define png:compression-filter=5-define png:compression-level=9-define png:compression-strategy=1-define png:exclude-chunk=all-interlace none-colorspace sRGB-strip INPUT_PATH

那是很多的,所以讓我們經(jīng)歷每一位,看看這意味著什么。

MOGRIFY與轉(zhuǎn)換

如前所述,ImageMagick操縱提供了兩個類似的工具圖片:?轉(zhuǎn)換是基本的圖像編輯器和一個形象工作;?mogrify主要是用于批量圖像處理。 在理想的世界中,這兩個工具會產(chǎn)生相同的結(jié)果;不幸的是,情況并非如此?轉(zhuǎn)換有一個錯誤?使其忽略我建議使用(的一個設(shè)置?——jpeg:fancy-upsampling =設(shè)置,下面討論),所以使用?mogrify是更好的。

重采樣

選擇一個重采樣濾波器在ImageMagick非常復(fù)雜。 有三種方法可以這樣做:

• 與調(diào)整?函數(shù)?你選擇哪一個,

• 與?過濾器設(shè)置,

• 或?插入設(shè)置。

之一,這些東西就不屬于這里,但是其余看起來差不多,這就是為什么我使用一個客觀的質(zhì)量措施。 (圖片:?費(fèi)希爾?)(?查看大版本?)

最明顯的調(diào)整函數(shù)使用?調(diào)整,但它創(chuàng)建文件太大。 我看了看,發(fā)現(xiàn)11種不同的功能?縮略圖做最好的工作優(yōu)化質(zhì)量和文件大小。 在大多數(shù)情況下,?縮略圖函數(shù)使用一個三步過程來調(diào)整圖片:

1. 調(diào)整圖像的大小,五倍的輸出大小使用?樣品函數(shù),它有它自己的內(nèi)置重采樣濾波器的類似于最近鄰方法上面所討論的。

2. 調(diào)整圖像,它的最終輸出大小使用基本?調(diào)整過濾器。

3. 這條從圖像元數(shù)據(jù)。

這意味著如果我們調(diào)整一幅500像素寬,?縮略圖首先調(diào)整2500像素寬使用嗎?樣品,結(jié)果可能是塊狀和粗糙,正如我們在上面的示例中看到的,但是操作快速、小文件大小將產(chǎn)生一個結(jié)果。 然后,ImageMagick會調(diào)整這個形象從2500像素寬500像素寬?調(diào)整。 這其blockiness更平滑,但是文件大小保持相當(dāng)?shù)汀?最后,ImageMagick將元數(shù)據(jù)來得到一個更小的文件。

第二種方法選擇ImageMagick的重采樣濾波器?過濾器設(shè)置。 一些(比如調(diào)整功能?樣品)有一個內(nèi)置的重采樣函數(shù),總是使用,但是其他人(例如?調(diào)整可以覆蓋的)違約?過濾器。 的?過濾器設(shè)置被用于?縮略圖第二步,因?yàn)檫@一步使用?調(diào)整。

我測試了31個不同的設(shè)置?過濾器并得到了最好的結(jié)果?三角形。 的?三角形重采樣濾波器也稱為?雙線性插值?,我上面所討論的。 它決定了像素顏色看?支持區(qū)域?鄰近的像素并產(chǎn)生一個加權(quán)平均的顏色。 我發(fā)現(xiàn)最好指定區(qū)域在兩個像素使用這種支持——把過濾器:支持= 2設(shè)置。

第三條道路選擇重采樣濾波器,?插入設(shè)置,將被忽略?縮略圖,所以這里不需要。

除了上面的設(shè)置,在默認(rèn)情況下ImageMagick還使用所謂的?JPEG花式upsampling?一個算法,試圖生產(chǎn)外觀更好jpeg。 我發(fā)現(xiàn)它產(chǎn)生更大的文件和質(zhì)量差異可以忽略不計(jì),所以我建議關(guān)閉它?——jpeg:fancy-upsampling =。

銳化

圖像在縮放的時候會有點(diǎn)模糊,所以項(xiàng)目如Photoshop通常會應(yīng)用一些磨練之后的圖片有點(diǎn)爽。 我建議使用一個?不清晰的?過濾——盡管它的名字,實(shí)際上是銳化圖像的設(shè)置?不清晰的0.25 x0.25 + 8 + 0.065。

首先應(yīng)用鈍的過濾工作?高斯模糊?的形象。 前兩個值是鈍的過濾器?半徑?和?西格瑪?分別——在這種情況下,都有一個值?0.25像素。 這些值通常是相同的,結(jié)合告訴ImageMagick模糊圖像。 應(yīng)用模糊后,過濾比較模糊的原始版本,在任何地方,他們的亮度超過給定的不同?閾值?(最后一個值,?0.065),一定?量?磨的應(yīng)用(第三個值,?8)。 閾值和數(shù)值數(shù)量的確切含義不是很重要,只要記住一個更高的閾值意味著磨將應(yīng)用較少,和更高的數(shù)值量意味著磨會更強(qiáng)烈的應(yīng)用無論它。

顏色還原

我提到的一個最大原因縮放圖像得到臃腫是因?yàn)樗械念~外的顏色。 所以,盡量減少顏色的數(shù)量,但沒有那么犧牲質(zhì)量。

減少顏色的一個方法是?多色調(diào)分色法?,這一過程中,梯度減少純色的樂隊(duì)。 多色調(diào)分色法降低一定數(shù)量的顏色?顏色的水平?——也就是說,可用顏色的數(shù)量在每個的紅色,綠色和藍(lán)色圖片使用的渠道。 在最終的圖像顏色的總數(shù)將在這三個顏色通道的組合。

多色調(diào)分色法可以大大減少文件的大小,但也可以徹底改變形象的樣子。 只有幾個顏色的水平,它創(chuàng)造了你可能看到的效果?1970年代搖滾海報?,幾個離散?樂隊(duì)?的顏色。 有許多顏色的水平——例如,?136年,我建議,你得到一個更小的文件在不損失圖像質(zhì)量。

原始圖像。 (圖片:?費(fèi)希爾?)(?查看大版本?)
多色調(diào)分色法可以減少圖像的顏色。 (圖片:?費(fèi)希爾?)(?查看大版本?)

猶豫不決?是一個過程,旨在減輕色帶將噪聲加入樂隊(duì)創(chuàng)造的幻覺,圖像顏色有更多的顏色。 理論上,猶豫不決時似乎是一個好主意多色調(diào)分色印;它幫助觀眾感知的結(jié)果看起來更像原來的。

猶豫不決。 (圖片:?費(fèi)希爾?)(?查看大版本?)

不幸的是,ImageMagick bug,廢墟圖像這樣的透明使用猶豫不決時。 所以,最好關(guān)掉猶豫不決?猶豫不。 幸運(yùn)的是,即使沒有抖動,特里圖像仍然看起來不錯。

ImageMagick猶豫不決。 (圖片:?尼莫?)(?查看大版本?)

顏色空間

雖然不是嚴(yán)格的色彩還原,設(shè)置一個圖像?顏色空間?是一個相關(guān)的概念。 顏色空間定義了顏色可供一個圖像。 下圖顯示了ProPhoto RGB顏色空間包含的顏色比Adobe RGB顏色空間,進(jìn)而比sRGB色彩空間包含更多的顏色。 所有這些包含更少的顏色比肉眼可見。

顏色空間。 (圖片:?Cpesacreta?)(?查看大版本?)

創(chuàng)建sRGB色彩空間的一個真正的國王在互聯(lián)網(wǎng)。 是由W3C支持和其他標(biāo)準(zhǔn)機(jī)構(gòu);它是所需的顏色空間?CSS顏色模塊3級?和?SVG規(guī)范?的假定顏色空間?WebP?規(guī)范,明確中引用PNG規(guī)范?。 這也是在Photoshop中默認(rèn)的顏色空間。 簡而言之,sRGB色彩空間的選擇為web平臺,,假設(shè)你想讓你的照片渲染可以預(yù)見的是,使用它可能是一個好主意。

質(zhì)量和壓縮

與JPEG等有損圖像格式,?質(zhì)量?和?壓縮?齊頭并進(jìn):壓縮越高,更低的質(zhì)量和更低的文件大小。 我們可以大大減少文件大小通過設(shè)置高JPEG壓縮因子,但這也將大大降低質(zhì)量。 平衡是必要的。

當(dāng)我正在做測試,控制我用Photoshop創(chuàng)建JPEG圖像質(zhì)量的?高,或?60。 我發(fā)現(xiàn)這個設(shè)置適用于我和罷工之間的平衡質(zhì)量和文件大小。 然而,在我的ImageMagick設(shè)置,我推薦?質(zhì)量82。 為什么?

事實(shí)證明,JPEG質(zhì)量尺度不規(guī)范或標(biāo)準(zhǔn)中定義,并在編碼器不統(tǒng)一。 一個質(zhì)量?60在Photoshop中可能是相同的質(zhì)量?40在一個程序中,質(zhì)量?B +在另一個和質(zhì)量?可笑的怪人在第三個。 在我的測試中,我發(fā)現(xiàn)Photoshop?60是最接近?質(zhì)量82ImageMagick。

為?無損耗圖像格式?PNG等質(zhì)量和壓縮并不相關(guān)。 高壓縮并沒有改變圖片的樣子,只有犧牲處理負(fù)載(CPU使用、內(nèi)存使用和處理時間)。 假設(shè)我們的電腦可以處理這種負(fù)載,沒有理由不累慘了PNG壓縮。

PNG壓縮在ImageMagick可以配置有三個設(shè)置,?——png:壓縮過濾器,?——png壓縮等級:和?——png:壓縮策略。?壓縮過濾?是一個振動的步驟,進(jìn)行圖像的數(shù)據(jù),以便將實(shí)際的壓縮效率更高;我得到了最好的結(jié)果使用自適應(yīng)濾波(?——png:壓縮過濾器= 5)。?壓縮級別?是可以應(yīng)用的壓縮量,我建議這盡最大努力去嗎?9(?——png:壓縮等級= 9)。 最后,?壓縮策略?設(shè)置決定實(shí)際的算法,用于對文件進(jìn)行壓縮;我得到最好的結(jié)果使用默認(rèn)壓縮策略(?——png:壓縮策略= 1)。

元數(shù)據(jù)

除了實(shí)際的圖像數(shù)據(jù),圖像文件可以包含元數(shù)據(jù):關(guān)于圖像的信息,如時創(chuàng)建并創(chuàng)建它的設(shè)備。 這額外的信息可能會占用空間沒有提供任何好處我們的用戶,通常應(yīng)該刪除。 以上,當(dāng)描述?縮略圖函數(shù),處理圖像的實(shí)際大小,我提到第三步驟包括剝離元數(shù)據(jù)。 即使這是真的,?縮略圖不刪除?所有?元數(shù)據(jù),獲得有利用?帶和?——png:exclude-chunk =。 這些會影響質(zhì)量。

進(jìn)步的呈現(xiàn)

可以保存到使用jpeg和png?進(jìn)步?或?順序呈現(xiàn)?。 順序呈現(xiàn)通常是默認(rèn):圖像將負(fù)載從上到下逐行像素。 進(jìn)步呈現(xiàn)意味著圖像和呈現(xiàn)階段交付。

對于jpeg,進(jìn)步呈現(xiàn)可以發(fā)生在任意數(shù)量的階段,確定當(dāng)文件保存。 第一階段將是一個非常低分辨率版本的完整形象;在每個后續(xù)階段,交付更高分辨率的版本,直到最后階段,呈現(xiàn)高質(zhì)量的版本。

進(jìn)步的JPEG仿真。 (圖片:?費(fèi)希爾?)

png使用一種進(jìn)步呈現(xiàn)?Adam7交錯?中,圖像的像素在七個階段交付基于8×8像素網(wǎng)格。

Adam7交錯。 (圖片:?CountingPine?)

這兩種類型的進(jìn)步呈現(xiàn)在ImageMagick可以控制使用?交錯設(shè)置。 但進(jìn)步呈現(xiàn)應(yīng)該打開或不呢?

jpeg和png,進(jìn)步呈現(xiàn)增加文件的大小,但在很長一段時間?傳統(tǒng)智慧認(rèn)為值得打開?因?yàn)樗峁┙o用戶帶來更好的體驗(yàn)。 的想法是,即使完整,完美的形象不負(fù)載那樣迅速,用戶將能夠看到?的東西?早些時候,一些可能是總比沒有的好。

不過,去年?Radware?發(fā)布?研究進(jìn)步的jpeg文件?顯示用戶實(shí)際上傾向于用序列圖像呈現(xiàn)。 這只是一項(xiàng)研究(和一個沒有通過正式的同行評審過程),但是結(jié)果很有趣。 Radware的結(jié)果,結(jié)合序列圖像較小的文件大小,引導(dǎo)我推薦的?交錯沒有ImageMagick的設(shè)置。

圖像優(yōu)化

我上面提到的測試都有或沒有形象的優(yōu)化。 到目前為止,我所描述的設(shè)置都是我建議如果你不優(yōu)化你的圖片。 如果你可以優(yōu)化它們,不過,我建議將改變略:我發(fā)現(xiàn)略有不同?不清晰的設(shè)置工作更好(?不清晰的x0.08 0.25 + 0.25 + 0.045與?不清晰的0.25 x0.25 + 8 + 0.065沒有優(yōu)化),不需要使用?帶。

mogrify-path OUTPUT_PATH-filter Triangle-define filter:support=2-thumbnail OUTPUT_WIDTH-unsharp0.25x0.08+8.3+0.045-dither None-posterize136-quality82-define jpeg:fancy-upsampling=off-define png:compression-filter=5-define png:compression-level=9-define png:compression-strategy=1-define png:exclude-chunk=all-interlace none-colorspace sRGB INPUT_PATH

很多不同的圖像優(yōu)化。 我測試了?image_optim?,?picopt?和?ImageOptim?,所有這些圖像通過一系列不同的優(yōu)化運(yùn)行的步驟。 我測試了這些工具單獨(dú)和組合,而我發(fā)現(xiàn),最好的結(jié)果來自運(yùn)行通過所有三個文件,上面列出的順序。 說,有收益遞減:與image_optim第一輪優(yōu)化后,額外的壓縮,picopt ImageOptim實(shí)現(xiàn)很小。 除非你有大量的時間和處理能力,使用多個圖像優(yōu)化器可能是殺雞用牛刀了。

結(jié)果(或者甚至是值得嗎?)

誠然,我推薦的設(shè)置復(fù)雜,但他們絕對值得你的用戶。 當(dāng)我著手做這些測試,我也希望我能夠大大減少文件大小不犧牲圖像質(zhì)量。 我很高興地報告,使用上面描述的設(shè)置,我是成功的。

平均來說,我推薦的設(shè)置和優(yōu)化文件大小減少35%相比,Photoshop的“保存Web”:

儲蓄相比,Photoshop創(chuàng)造性的云

我的設(shè)置?沒有?優(yōu)化甚至擊敗Photoshop的輸出?與?優(yōu)化!

ImageMagick的默認(rèn)圖像縮放,相比我的建議導(dǎo)致較小的平均82%的文件大小:

儲蓄相比,ImageMagick違約

相比,WordPress的默認(rèn)圖像縮放(使用ImageMagick引擎蓋下面),我建議導(dǎo)致較小的平均77%的文件大小:

儲蓄相比,WordPress

相比其他CMS和使用ImageMagick的工具,我建議導(dǎo)致144%較小的文件大小:

儲蓄相對于其他工具

請記住,這是所有的圖片視覺與ps輸出,平均。

使用上面描述的設(shè)置,我可以幫你?巨大的?文件大小儲蓄在不損害質(zhì)量。 這可以是一個巨大的恩惠來你的網(wǎng)站的性能!

如何實(shí)現(xiàn)這個項(xiàng)目嗎

我希望使用這種技術(shù)的好處是顯而易見的。 對你來說幸運(yùn)的是,最難的部分——弄明白所有的這一切都完成了。 盡管推薦設(shè)置明顯的復(fù)雜性,實(shí)現(xiàn)這種在自己的項(xiàng)目中可以相當(dāng)快速和容易。 雖然運(yùn)行這個彌天大謊的命令終端每次你想調(diào)整圖像可能會不方便,有更簡單的選擇,需要很少的混亂或大驚小怪。

BASH SHELL

大多數(shù)命令行shell允許您設(shè)置別名和函數(shù)復(fù)雜的命令。 如果你使用bash shell,您可以添加一個函數(shù)?.bash_aliases(或?. bashrc)文件,充當(dāng)一個別名為我推薦的命令:

smartresize(){mogrify-path$3-filter Triangle-define filter:support=2-thumbnail$2-unsharp0.25x0.08+8.3+0.045-dither None-posterize136-quality82-define jpeg:fancy-upsampling=off-define png:compression-filter=5-define png:compression-level=9-define png:compression-strategy=1-define png:exclude-chunk=all-interlace none-colorspace sRGB$1}

然后,你可以叫它是這樣的:

smartresize inputfile.png300outputdir/

NODE . JS

一個npm包,不出所料,?imagemagick?允許您使用ImageMagick通過?node . js?。 如果你使用這個模塊,您可以添加使用我建議設(shè)置調(diào)整如下:

varim=require('imagemagick');varinputPath='path/to/input';varoutputPath='path/to/output';varwidth=300;// output width in pixelsvarargs=[inputPath,'-filter','Triangle','-define','filter:support=2','-thumbnail',width,'-unsharp 0.25x0.25+8+0.065','-dither None','-posterize 136','-quality 82','-define jpeg:fancy-upsampling=off','-define png:compression-filter=5','-define png:compression-level=9','-define png:compression-strategy=1','-define png:exclude-chunk=all','-interlace none','-colorspace sRGB','-strip',outputPath];im.convert(args,function(err,stdout,stderr){// do stuff});

咕噥著說

如果你使用?咕噥著說?跑步作為一個任務(wù),一個好消息:我建立了一個名叫繁重任務(wù)?grunt-respimg?(?npm?)處理我上面描述的一切。 你可以把它在你的項(xiàng)目通過運(yùn)行:

npm install grunt-respimg--save-dev

然后,您可以運(yùn)行它在你的呼嚕聲文件如下:

grunt.initConfig({respimg:{default:{options:{widths:[200,400]},files:[{expand:true,cwd:'src/img/',src:['**.{gif,jpg,png,svg}'],dest:'build/img/'}]}},});grunt.loadNpmTasks('grunt-respimg');

PHP

PHP?ImageMagick集成稱為?Imagick?這使得它相對容易從PHP腳本中ImageMagick操作運(yùn)行。 不幸的是,Imagick有點(diǎn)有限,并沒有讓你做一些事情,我建議,如設(shè)置重采樣濾波器使用縮略圖功能。

但是,你很幸運(yùn):我已經(jīng)創(chuàng)建了一個名為作曲家包?php-respimg?(?packagist?)處理上面所描述的一切。 你可以把它在您的項(xiàng)目?作曲家?通過運(yùn)行:

composer require nwtn/php-respimg

然后,你可以調(diào)整你的照片是這樣的:

require_once('vendor/autoload.php');usenwtn\RespimgasRespimg;$image=newRespimg($input_filename);$image->smartResize($output_width,0,false);$image->writeImage($output_filename);

內(nèi)容管理系統(tǒng)

如果使用CMS,您可能希望利用這些儲蓄生成縮略圖和其他縮放圖像,當(dāng)用戶上傳圖像。 幾個選項(xiàng)可用。

如果你的CMS是建立在PHP,可以烤上面的PHP的東西變成一個主題或插件。 然而,如果你的基于php的CMS是WordPress,然后不需要你去做那項(xiàng)工作:這是現(xiàn)在社會集團(tuán)的插件集成到響應(yīng)問題?RICG響應(yīng)圖像?作為一個實(shí)驗(yàn)功能。 安裝插件后,所有你需要做激活這些ImageMagick設(shè)置添加以下行到你?functions.php文件:

functioncustom_theme_setup(){add_theme_support('advanced-image-compression');}add_action('after_setup_theme','custom_theme_setup');

如果你不使用WordPress,不想嘗試破解這CMS,大多數(shù)CMS的包括一些方法來修改圖像違約(特別是質(zhì)量)。 你可以得到很多好處與幾個簡單的CMS的配置變化。 查看文檔,看看選項(xiàng)可用。

性能

我推薦的設(shè)置比僅僅使用顯然要復(fù)雜得多?調(diào)整,這種復(fù)雜性帶來的性能影響。 使用我的建議將需要更長的時間和使用更多的資源在您的計(jì)算機(jī)或服務(wù)器上。 在我的測試中,我發(fā)現(xiàn)內(nèi)存和CPU使用峰值可比,但我設(shè)置了平均2.25倍的時間比僅使用渲染圖像?調(diào)整獨(dú)自一人。

本篇文章來自北京網(wǎng)站建設(shè)公司-傳誠信！轉(zhuǎn)載請注明！同時翻譯不好請與理解！