Web 質量影像始終是在使用盡可能小的檔案大小同時提供良好影像質量之間的平衡行為。直接從您的數碼單反相機上嵌入照片可能看起來不錯，但它會減慢您的網站的負載，而過度壓縮的影像可能會提高您網站的速度，但會損害設計和整體審美。

　　對於我們主要處理的兩種類型的影像資產：照片和圖示/插圖。我們執行影像質量檢查和壓縮技術的混合，在大多數情況下都能很好地工作。
 
　　檔案類型以及何時使用它們
 
　　我們在構 WordPress 建網站時使用三種影像檔案類型：jpg 、 png 和 svg 。
 
　　JPG 最適合用於風景，風景或人物等照片。對於內容中的影像，例如部落格文章影像，我們的目標是 20-70kb 。較大的背景照片可以達到 500kb，但 200kb 是一個很好的平均值。
 
　　JPG 是有損的（每次匯出時它們會重新壓縮並降低影像質量），並且它們不能很好地管理漸變。如果影像中有漸變，有時可以將影像分成兩個切割，以便您可以使用 CSS 漸變在單獨的背景中渲染漸變。
 
　　PNG 最適用於徽標和圖示等資產，因為它們支持透明度，因為徽標和圖示通常使用更有限的調色盤，因為 PNG 通過減少顏色數量來實現壓縮。 PNG 可能是有損耗的，但我們通常使用是無損，這意味著每個畫素都可以精確儲存而不會降低調色盤的質量，從而獲得更高質量的影像。
 
　　SVG 具有最好的質量，並且由於其可擴充套件性而被用於向量藝術。我們經常將它們與徽標一起使用，但是，SVG 確實為瀏覽器建立了更多的工作，並且可以在頁面載入時產生遲緩，因此影像的質量應始終與其複雜性相平衡。
 

 
　　作為我們使用 PNG 和 SVG 的示例，請比較 Silver Screen Insider 和 Bozeman 網站的徽標。對於前者，我們使用了 SVG 。對於博茲曼網站，由於多用户向下滾動時 CSS 動畫引入了複雜性，我們選擇使用 PNG，以免影響瀏覽器效能。
 

 
　　有時最好的解決方案是兩者的結合：對於 JTech 網站上的標識，“JT” 元件是 PNG，但 “慶祝 20 年” 影像是 SVG，以便在所有視口大小中保持其質量。
 
　　優化技術
 
　　為了獲得最佳結果，優化影像非常重要。為此這些軟件設計功能打破了我們的大腦和業務，我們使用三個程序：ImageOptim（用於 JPG 和 PNG），ImageAlpha（用於 PNG）和 Scour（用於 SVG）。

       優化 JPG

 

　　ImageOptim 減少了 JPG 和 PNG 的檔案大小。對於大影像，例如我們用於背景面板的影像，我們將尺寸設置為 16001200px 。對於內容照片，例如插入部落格文章中的影像，我們將尺寸限制在 200-800 畫素寬之間。
 
　　調整到最終解析度後，將使用最佳質量在 Photoshop 中輸出影像。每次我們壓縮影像都會失去一些保真度，所以我們更喜歡單獨使用 ImageOptim 進行壓縮，而不是讓 Photoshop 進行傳遞。 Photoshop 的效率顯著降低：質量為 65 的 “網絡儲存” 會產生相同檔案大小的影像，但保真度比 ImageOptim 的質量差 85 。
 

       Retina JPGs

　　當針對視網膜或其他高密度顯示器時，我們發現最好以兩倍的解析度儲存單個 JPG，但使用更高的壓縮，在 ImageOptim 中約 50-60，這可以產生看起來很好的高質量影像在視網膜和標準，低密度顯示器上。這在之前的分享現代國外響應式設計的卓越典範也可以看出，這種技術允許我們將單個資產用於視網膜和標準顯示，而不是切割和載入多個版本，而不會使影像的大小翻兩番。
 
　　優化 PNG

　　對於 PNG，我們使用 PNG24 在 “save for web” 選項中輸出 Photoshop，然後通過 ImageOptim 執行。如果它檢測到影像使用少於 256 種顏色，ImageOptim 將無損地將影像轉換為 PNG8，這是一種更簡單的檔案格式，可以生成非常輕量級的檔案。
 
　　使用 ImageOptim，我們的影像最終輸出沒有太多的複雜性（最小的顏色，簡單的形狀和低於 200200px 的解析度），其大小範圍可以從 15kb 到 1kb 以下。
 
　　優化更大的 PNG
 
　　對於更復雜的影像，如果我們無法使用 ImageOptim 生成介於 15kb 和 50kb 之間的檔案，我們使用 ImageAlpha 。 ImageAlpha 用於處理從 PNG 24（數百萬種顏色）到 PNG8（最多 256 種顏色）的 PNG，將影像從無損變為有損，最終瞄準具有最少顏色數量的 PNG 。
 
　　這種格式的損耗主要意味著對調色盤進行戰略性改進，消除最不顯著的顏色，從而產生仍然看起來很棒的影像，同時降低其複雜性。從 ImageAlpha 匯出後，我們通過 ImageOptim 執行它，以便進一步優化。
 
　　優化 SVG

　　在 SVG 中，我們在從 Illustrator 匯出影像之前儘可能減少複雜性。由於它們的大小，這是一個經常繁瑣的過程，我們首先嚐試將層數減少到最小，同時仍然準確地顯示藝術品。然後將其儲存為 Illustrator 中的 SVG，並使用名為 Scour 的程序進行優化。
 
　　我們使用此 automator 指令碼使其在 macOS 中更容易使用，允許您在 Finder 中右鍵單擊 SVG 檔案並通過 “服務” 選單優化 SVG 。我們經常將字型檔案用於單色向量圖形，並使用名為 Glyphs 的程序。
 
　　結論
 
　　正確優化影像只是我們改善網站效能，防止瀏覽器膨脹，減少 WooCommerce 服務器和頻寬資源使用，加快頁面載入時間，保持開發基礎架構清潔併為最終多用户提供更理想體驗的另一種方式。
 
　　我們希望通過 JPG，PNG 和 SVG 檔案類型，影像壓縮和質量工具來探索我們的經驗，因為我們不斷完善自己的流程以生產高質量的網站。