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

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

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

大圖片= =大問題

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

一般的web頁面是2099 KB、2099 KB的來自圖像。

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

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

ImageMagick

這就是自動圖像大小方便。 一群工具做到這一點,包括GD和GraphicsMagick,但ImageMagick獲得一個好的平衡能力和可用性之間在托管環(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)整。 不幸的是,使用默認設(shè)置,它輸出的大小文件通常非常大,有時比輸入的圖像,即使輸出像素較少。 這些大文件完全否定你期望的性能從響應(yīng)圖像和,事實上,可以為您的用戶使事情變得更糟比如果你僅僅把巨大的新資產(chǎn)補。

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

圖像縮放是如何工作的

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

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

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

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

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

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

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

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

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

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

最近鄰插值法:將采樣一個圈。

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

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

雙線性插值。

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

所有這一切意味著什么

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

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

IMAGEMAGICK基礎(chǔ)知識

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

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

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

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

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

mogrify-path output/-resize300*.jpg

這表示,我們希望ImageMagick的mogrify函數(shù)把所有JPEG文件在當前目錄(* . 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ù)以百計的測試看到它的組合功能和選項產(chǎn)生最小的結(jié)果在一個可接受的質(zhì)量。

測試和結(jié)果

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

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

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

那是很多的,所以讓我們經(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ì)量措施。 (圖片:費希爾)(查看大版本)

最明顯的調(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更平滑,但是文件大小保持相當?shù)汀?最后,ImageMagick將元數(shù)據(jù)來得到一個更小的文件。

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

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

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

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

銳化

圖像在縮放的時候會有點模糊,所以項目如Photoshop通常會應(yīng)用一些磨練之后的圖片有點爽。 我建議使用一個不清晰的過濾——盡管它的名字,實際上是銳化圖像的設(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ù)值量意味著磨會更強烈的應(yīng)用無論它。

顏色還原

我提到的一個大原因縮放圖像得到臃腫是因為所有的額外的顏色。 所以,盡量減少顏色的數(shù)量,但沒有那么犧牲質(zhì)量。

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

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

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

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

猶豫不決。

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

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

顏色空間

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

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

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

質(zhì)量和壓縮

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

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

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

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

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

元數(shù)據(jù)

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

進步的呈現(xiàn)

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

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

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

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

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

不過,去年Radware發(fā)布研究進步的jpeg文件顯示用戶實際上傾向于用序列圖像呈現(xiàn)。 這只是一項研究(和一個沒有通過正式的同行評審過程),但是結(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)化),不需要使用帶。

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

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

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

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

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

條件	文件大小:的意思是	文件大小:%的差異
我的設(shè)置,優(yōu)化	218274個字節(jié)
我的設(shè)置,沒有優(yōu)化	259852個字節(jié)	19.05%
Photoshop CC,優(yōu)化	260305個字節(jié)	19.28%
Photoshop CC,沒有優(yōu)化	299710個字節(jié)	35.26%

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

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

儲蓄相比,ImageMagick違約

條件	文件大小:的意思是	文件大小:%的差異
我的設(shè)置,優(yōu)化	218274個字節(jié)
我的設(shè)置,沒有優(yōu)化	259852個字節(jié)	19.05%
調(diào)整	397588個字節(jié)	82.15%

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

儲蓄相比,WordPress

條件	文件大小:的意思是	文件大小:%的差異
我的設(shè)置,優(yōu)化	218274個字節(jié)
我的設(shè)置,沒有優(yōu)化	259852個字節(jié)	19.05%
WordPress*	385795個字節(jié)	76.75%
*模擬使用ImageMagick和默認的設(shè)置,這些CMS的使用。 可以發(fā)現(xiàn)使用的特定設(shè)置GitHub庫對這些測試。

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

儲蓄相對于其他工具

條件	文件大小:的意思是	文件大小:%的差異
我的設(shè)置,優(yōu)化	218274個字節(jié)
我的設(shè)置,沒有優(yōu)化	259852個字節(jié)	19.05%
CodeIgniter/ExpressionEngine*	340461個字節(jié)	55.98%
TYPO3.CMS*	359112個字節(jié)	64.52%
Drupal*	397588個字節(jié)	82.15%
鱸魚*	416790個字節(jié)	90.95%
工藝CMS*	425259個字節(jié)	94.83%
grunt-responsive-images	533030個字節(jié)	144.20%
*模擬使用ImageMagick和默認的設(shè)置,這些CMS的使用。 可以發(fā)現(xiàn)使用的特定設(shè)置GitHub庫對這些測試。

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

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

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

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

BASH SHELL

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

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

NODE . JS

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

咕噥著說

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

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

PHP

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

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

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

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

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

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

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

性能

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

本篇文章來自成都網(wǎng)站建設(shè)公司-創(chuàng)新互聯(lián)！轉(zhuǎn)載請注明！同時翻譯不好請與理解！

新聞標題：調(diào)整ImageMagick使網(wǎng)站打開的更快！
網(wǎng)頁路徑：http://www.rwnh.cn/news/80450.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計公司、做網(wǎng)站、網(wǎng)站設(shè)計、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)