注明：本人原創(chuàng)翻譯，原版為Essential Image Optimization電子書，這里將其拆分為幾篇文章發(fā)布。另外，文中部分鏈接可能會因為“網(wǎng)絡”原因無法打開。不必著急，我會慢慢將其中一些比較好的內(nèi)容翻譯過來發(fā)表，都會在這個“Web圖像技術深究”專題中。

目錄

• ?介紹
• 如何判斷我的圖像是否需要優(yōu)化？
• 如何選擇正確的圖像格式？
• “素人”JPEG
• JPEG的壓縮模式
  • 漸進式JPEG的優(yōu)點
  • 誰在生產(chǎn)環(huán)境中使用了漸進式JPEG？
  • 漸進式JPEG的缺點
  • 如何生成一個漸進式JPEG？
  • 色度（或顏色）抽樣
  • JPEG引發(fā)的格式拓展
  • 使用JPEG優(yōu)化編碼器
  • 什么是MozJPEG？
  • 什么是Guetzli？
  • MozJPEG與Guetzli孰優(yōu)孰劣？
  • Butteraugli
• 什么是WebP？
  • WebP的表現(xiàn)如何？
  • 誰在生產(chǎn)環(huán)境中使用WebP？
  • WebP編碼如何執(zhí)行？
  • WebP的瀏覽器支持
  • 如何將我的圖像轉(zhuǎn)換為WebP？
  • 如何在我的操作系統(tǒng)上查看WebP圖像？
  • 如何提供WebP？
• SVG優(yōu)化
• 避免使用有損編解碼器重復壓縮圖像
• 減少不必要的圖像解碼和尺寸調(diào)整帶來的損耗
  • 使用srcset提供HiDPI圖像
  • 藝術化的響應
• 顏色管理
• 圖像拼合技術
• 延遲加載非關鍵圖像
• 避免<code>display: none;</code>的陷阱
• 圖像CDN服務對你有意義嗎？
• 緩存圖像資源
• 預加載關鍵圖像資源
• 圖像的網(wǎng)絡性能預算
• 最后的建議
• 附注

正文：

圖像CDN服務對你有意義嗎？

你浪費在閱讀博客帖子學習如何來設置自己的圖像處理流水線，并調(diào)整那些配置的時間，對于你的服務來說其實也是一種費用成本。尤其隨著Cloudinary開始提供了免費服務，Imgix和作為OSS替代產(chǎn)品Thumbor的都提供的免費試用，你其實有大量可以使用的自動化服務可以選擇。

為了實現(xiàn)最佳的頁面加載時間，你需要優(yōu)化你的圖像加載。此優(yōu)化可能需要響應式圖像策略，并且需要受益于服務器上的圖像壓縮、自動選擇最佳格式和響應式調(diào)整尺寸。重要的是，您還需要盡可能快地以正確的分辨率將正確尺寸的圖像提供給正確的設備。這樣做可并不像人們想象的那么容易。

使用你自己的服務器還是使用CDN服務

由于圖像處理的復雜性和可變性，我們將提供一些在該領域經(jīng)驗豐富的開放服務的報價，然后繼續(xù)提出一些建議。

“如果你的產(chǎn)品不是一個專業(yè)的圖像處理應用，那么你就不要自己這樣做，因為像Cloudinary（或imgix，Ed。）這樣的服務會比你更有效率，請更好地使用它們。如果你擔心成本問題，請考慮開發(fā)和維護的花費，對比托管、存儲和交付的花費?！?- 克里斯·吉米爾。

目前情況下，我們表示同意并建議您考慮使用CDN來滿足您的圖像處理需求。我們將審查兩個CDN，將它們的功能與之前提出的圖像處理任務進行比較。

Cloudinary和imgix

Cloudinary和imgix是兩個已建立的圖像處理CDN服務。他們是全球成千上萬的開發(fā)商和公司的選擇，包括了Netflix和Red Bull。讓我們更詳細地了解一下它們。?

開始之前，應該先了解那些？

首先，除非你是像它們一樣的大型服務集群的所有者，否則與反復開發(fā)你自己的解決方案相比，它們一個巨大的優(yōu)勢就是使用了分布式的全球網(wǎng)絡系統(tǒng)，可以讓你的圖像副本更接近你的用戶。而隨著技術的進步，CDN還可以更輕松地“未來化”你的圖像加載策略 - 你自己做的話可能需要很大的維護量，同時CDN還可以跟蹤瀏覽器對新興格式的支持并且跟進圖像壓縮社區(qū)的最新技術進展。

第二，每個服務都是有定價分級的，像Cloudinary提供了一個免費的級別；而imgix相對于他們的一些高價服務計劃，也推出了很多成本低廉地定價。而且Imgix提供免費試用服務，這幾乎與免費是相同的。

第三，API訪問是提供兩種服務的。開發(fā)人員可以通過編程直接調(diào)用訪問CDN，并自動進行圖像處理。而客戶端庫、框架插件和API文檔也可以使用，當然其中一些功能是限于較高的費用級別的。

現(xiàn)在，讓我們開始吧

這里，我們將我們的討論限制在靜態(tài)圖像上。Cloud和Imgix都提供了一系列圖像處理方案，并且在標準版和免費版中都支持壓縮、調(diào)整尺寸、裁剪以及縮略圖生成等主要功能。

Modern-Image36.jpg

Cloudinary列出了七個應用較廣的圖像轉(zhuǎn)換類別，其中共有48個子類別。Imgix則聲稱它包含超過100種的圖像處理操作。

那默認情況下發(fā)生什么？

Cloudinary在默認情況下會執(zhí)行以下優(yōu)化：

• 使用MozJPEG編碼JPEG (默認會使用Guetzli工具)
• 從轉(zhuǎn)換后圖像文件中清除所有相關的元數(shù)據(jù)（原始圖像保持不變）。不想執(zhí)行此行為并要生成元數(shù)據(jù)完整的轉(zhuǎn)換后圖像，請?zhí)砑觡eep_iptc標識。
• 生成默認質(zhì)量級別的WebP、GIF、JPEG和JPEG-XR格式。要調(diào)整默認的質(zhì)量級別，請在轉(zhuǎn)換時設置質(zhì)量參數(shù)。
• 運行優(yōu)化算法，最小化文件體積并對PNG、JPEG或GIF格式圖像的視覺質(zhì)量影響最小。

Imgix并沒有如Cloudinary那樣的默認優(yōu)化。但是，它具有可設置的默認圖像質(zhì)量。對于imgix的使用者來說，自動參數(shù)可幫助您在圖像目錄中自動執(zhí)行基礎的優(yōu)化處理。

目前，它有四種不同的方法：

• 壓縮
• 視覺增強
• 文件格式轉(zhuǎn)換
• 紅眼刪除

Imgix支持以下圖像格式：JPEG，JPEG2000，PNG，GIF，動畫GIF，TIFF，BMP，ICNS，ICO，PDF，PCT，PSD，AI。

Cloudinary支持以下圖像格式：JPEG，JPEG 2000，JPEG XR，PNG，GIF，動畫GIF，WebP，動畫WebP，BMP，TIFF，ICO，PDF，EPS，PSD，SVG，AI，DjVu，F(xiàn)LIF，TARGA。

它們的性能如何?

CDN傳輸性能主要與網(wǎng)絡延遲和網(wǎng)絡速度相關。

對于完全未緩存的圖像，延遲總會是有所增加的。但是，一旦一個圖像已經(jīng)被緩存并分布到網(wǎng)絡服務器上，事實上全球的CDN可以很快找到對用戶響應最快的節(jié)點，加上正確處理圖像的所帶來的字節(jié)節(jié)省，對比那些處理圖像不佳或需要跨越地球的單個服務器來說，CDN的延遲問題大大減小。

這兩個都是訪問快速和使用廣泛的CDN服務。配置它們可以減少延遲并提高下載速度。下載速度影響頁面加載時間，而頁面加載時間是提高用戶體驗和用戶轉(zhuǎn)換率的最重要指標之一。

那么它們比較起來如何呢？

Cloudinary擁有160K客戶，其中包括了Netflix、eBay和Dropbox。Imgix沒有報告有多少客戶，但它比Cloudinary要少一些。即使如此，imgix依然包括了一些重量級的圖像用戶，已知的如Kickstarter、Exposure、unsplash和Eventbrite。

實際上，在圖像處理中存在如此多的不受控制的變量，對這兩個服務巨頭之間進行點對點的性能比較是很困難的。這很大程度上取決于處理圖像需要多少時間（這是一個可變的時間量），以及影響速度和下載時間的最終輸出需求的大小和分辨率。花費成本也可能最終是你最重要的因素。

CDN服務需要花費金錢。一些流量大的圖像業(yè)務網(wǎng)站每月可能要花費數(shù)百美元的CDN費用。另外，需要一定程度的知識儲備和編程技能才能充分利用這些服務。如果你不是要做什么太過分的事情，你是不會有任何麻煩的。

但是，如果您不太喜歡使用圖像處理工具或API，那么你需要經(jīng)歷一個學習曲線。為了適應CDN服務器鏈接定位，你需要更改本地鏈接中的一些URL。你需要勤快的檢查每個地址的正確性:)

結論

如果您正在進行或計劃制作自己的圖像處理服務，也許您應該考慮一下是否可以使用CDN。

圖像的網(wǎng)絡性能預算

性能預算是站點團隊嘗試不超過的網(wǎng)頁顯示效果的“預先估算”。例如，“任何頁面上的圖像不會超過200KB”或“3秒以內(nèi)的用戶必須可以使用”。當一個預算沒有得到滿足，探索原因和如何解決以達到目標。

預算為與利益相關者討論性能表現(xiàn)時提供了一個有用的框架。當一個設計或者業(yè)務決策可能會影響網(wǎng)站的效果時，請遵循此預算。它們是一個參考，可以在對網(wǎng)站的用戶體驗造成傷害時，提示你推遲或重新思考這一變化。

我發(fā)現(xiàn)，當頁面性能監(jiān)控自動化的時候，團隊會在性能預算方面取得了最大的成功。因為這時候，團隊無需手動檢查網(wǎng)絡瀑布的預算回歸，而且標記預算何時交叉也會自動進行。兩個比較有用的性能預算跟蹤服務是Calibre和SpeedCurve。

一旦定義了圖像尺寸的性能預算，SpeedCurve將會自動開始監(jiān)控它，并在超出預算時提醒您：

F2BCD61B-85C5-4E82-88CF-9E39CB75C9C0.jpg

Calibre也提供了類似的功能，支持為你的每個目標設備類型設置預算。這是很有用的，因為你通過WiFi在桌面上的圖像尺寸的預算可能會與你在手機上的預算有很大的不同。

budgets.jpg

最后的建議

最終，選擇一個圖像優(yōu)化策略將取決于你為你的用戶提供什么圖像類型，和你決定設定一套怎樣的合理的評估標準。你可能會使用SSIM或Butteraugli的評分，或者要求圖像它要足夠小，總之放飛你的想象去體會什么才有最有意義的。

以下是我的最終的建議：

如果您無法基于瀏覽器支持情況，響應符合條件的圖像格式，請記得：

• 對于質(zhì)量級別高于90的JPEG圖像，Guetzli + MozJPEG的jpegtran是一個好格式。
  • 對于網(wǎng)絡使用，q=90會有些浪費。你可以降低到q=80，甚至在2x顯示器上可以設置為q=50。由于Guetzli不會將圖像壓縮到那么低，對于Web上圖像你可以使用MozJPEG。
  • KornelLesiński最近改進了MozJPEG的cjpeg命令，用添加小的sRGB配置文件，以幫助Chrome在寬色域顯示器上顯示更加自然的顏色。
• 對于PNG，pngquant + advpng有非常好的速度/壓縮比。

如果你可以有條件的響應圖像格式 （請使用<picture>標簽、支持請求header響應或者使用Picturefill）：

• 為支持WebP的瀏覽器提供它
  • 從原始的100％質(zhì)量的圖像創(chuàng)建WebP圖像。否則，您將會給支持WebP的瀏覽器一張帶有JPEG扭曲和 WebP扭曲的看上去糟透了的圖像！但是，如果你使用WebP壓縮未壓縮的源圖像，它將幾乎沒有WebP扭曲，并且可以更好地壓縮。
  • WebP團隊使用的默認設置-m 4 -q 75，通常適用于大多數(shù)針對速度/比率進行優(yōu)化的情況。
  • WebP還具有無損（-m 6 -q 100）的特殊模式，可以通過探索所有參數(shù)組合將文件減小到最小的尺寸。這是一個較慢的過程，但對于靜態(tài)資源這是值得的。
• 退而求其次，可以將Guetzli或MozJPEG壓縮過的原圖提供給其他瀏覽器。

最后，祝你壓縮快樂！

注意：關于如何優(yōu)化圖像的更實際的指導，我強烈推薦Jeremy Wagner的Web性能實戰(zhàn)。另外，高性能的圖像也有關于這個主題的優(yōu)秀而細微的建議。

附注

• JPEG XT定義了關于1992年JPEG規(guī)范的擴展。作為對于古老的JPEG上進行像素完美渲染的擴展，這個規(guī)范簡化了舊的1992規(guī)范，并且選擇libjpeg-turbo作為其參考實現(xiàn)（基于受歡迎程度）。
• PIK是一個值得關注的新型圖像編解碼器。它與JPEG兼容，并且具有更高效的顏色空間，類似于Guetzli的優(yōu)勢。它可以以JPEG的2/3的速度進行圖像解碼，并且比libjpeg提供的文件體積小54％。與Guetzli-ified JPEG相比，解碼和壓縮都更快。一項關于現(xiàn)代圖像編碼心理視覺相似性的研究表明，PIK僅為其他替代品的一半大小。不幸的是，目前來看，這個編解碼器還有很長的路要走，它的編碼時間現(xiàn)在（2017年8月）還是慢的基本無法使用。
• 通常推薦使用ImageMagick進行圖像優(yōu)化。這篇文章也認為它是一個很好的工具，但是它的輸出通常需要更多的優(yōu)化，而其他工具可以提供更好的輸出。我們推薦可以嘗試使用libvps，但它是比較低級別的工具，需要更多的技術能力才能使用。ImageMagick曾經(jīng)注意到您可能想知道的安全漏洞。
• Blink（Chrome使用的渲染引擎）會在主線程中解碼圖像。將解碼工作轉(zhuǎn)移到合成器線程，釋放主線程以處理其他任務，我們稱之為延遲解碼。在延遲解碼時，解碼工作會保留關鍵路徑以便在顯示器上呈現(xiàn)出框架，因此仍可能導致動畫抖動。通過APIimg.decode()應該可以幫助你解決抖動的問題。