網頁質量的圖像始終是在使用盡可能小的文件大小，同時提供良好的圖像質量之間的平衡。直接在DSLR中嵌入照片可能看起來不錯，但會降低網站的抓取速度，而過度壓縮的圖像可能會提高網站的速度，但會損害設計和整體美感。
對于我們主要處理的兩種圖像資產（照片和圖標/插圖），我們執行圖像質量檢查和壓縮技術的混合，在大多數情況下都能很好地工作。
在網站建設時，我們使用三種圖片文件類型：.jpg .png和.svg。
JPG最適合用于風景，風景或人物等照片。對于內容中的圖像，如博客文章圖像，我們的目標是20-70kb。較大的背景照片可以達到500kb，但200kb是一個很好的平均值。
JPG是有損的（它們會在每次導出時重新壓縮并降低圖像質量），而且它們不能很好地管理漸變。如果圖像中有漸變，有時您可以將圖像分成兩個切口，以便您可以使用CSS漸變將漸變渲染到單獨的背景中。
PNG最適合用于徽標和圖標等資產，因為它們支持透明度，而且徽標和圖標通常使用更有限的調色板 - 因為PNG通過減少顏色數量來實現壓縮。
PNG可能是有損的，但我們通常使用無損，這意味著每個像素都可以精確保存，而不會降低調色板的質量，從而獲得更高質量的圖像。
SVG具有最好的質量，并且由于其可擴展性而被用于矢量藝術。我們經常使用它們的標識，但是，SVG確實為瀏覽器創建了更多的工作，并且可能會在頁面加載時產生緩慢的效果，因此圖像的質量應該始終與其復雜性相平衡。
為了獲得最佳結果，優化圖像非常重要。要做到這一點，我們利用三個方案：ImageOptim（JPG格式為PNG圖像和），ImageAlpha（為PNG格式）和沖刷（用于SVGs）。
ImageOptim可減少JPG和PNG的文件大小。對于大圖像，例如我們用于背景面板的圖像，我們將尺寸設置為1600x1200px。對于插入到博客文章中的圖片等內容照片，我們會將尺寸限制在200-800像素之間。
在調整到最終分辨率后，圖像將在Photoshop中以可用的最佳質量輸出。每次我們壓縮圖像時，都會失去一些保真度，所以我們更愿意僅僅依靠ImageOptim進行壓縮，而不是讓Photoshop進行壓縮。Photoshop的效率明顯較低：在質量為65的情況下，其“保存為網頁”產生的文件大小相同，但保真度比ImageOptim的質量更差85。
當瞄準視網膜或其他高密度顯示器時，我們發現它最適合以兩倍的分辨率保存單個JPG，但使用更高的壓縮率，在ImageOptim中約為50-60，可以產生看起來不錯的高質量圖像在視網膜和標準的低密度顯示器上。這項技術使我們能夠使用單一資產用于視網膜和標準顯示器，而不是切割和加載多個版本，并且不會使圖像尺寸翻兩番。
對于PNG，我們在Photoshop中使用PNG 24的“save for web”選項輸出，然后通過ImageOptim運行它。如果它檢測到圖像使用的顏色少于256色，ImageOptim將無損地將圖像轉換為PNG 8，這是一種更簡單的文件格式，可以生成非常輕量級的文件。
借助ImageOptim，我們的圖像最終輸出沒有太多復雜性（最小的顏色，簡單的形狀和小于200x200px的分辨率），大小可以從15kb到小于1kb。
對于更復雜的圖像，如果我們無法使用ImageOptim生成15kb到50kb之間的文件，我們使用ImageAlpha。ImageAlpha用于將PNG 24（百萬種顏色）的PNG處理為PNG 8（最多256種顏色），將圖像從無損圖像變為有損圖像，最終針對顏色數量最少的圖像進行處理。
這種格式的損失主要意味著調色板的戰略性改進，消除最不顯眼的顏色，以產生仍然看起來很好，同時降低其復雜性的圖像。
從ImageAlpha導出后，我們通過ImageOptim運行它，以便進一步優化。
談到SVG時，我們在從Illustrator中導出圖像之前盡可能降低復雜性。由于它們的大小，通常是一個繁瑣的過程，我們首先嘗試將層數減少到最小，同時仍然準確地顯示作品。然后在Illustrator中將其保存為SVG，并使用名為Scour的程序進行優化。
我們使用這個automator腳本使它在macOS中使用起來更容易一點，允許您右鍵單擊Finder中的SVG文件并通過Services菜單優化SVG。我們經常使用字體文件來制作矢量圖形，這些矢量圖形是一種名為Glyphs的程序的單色。
正確優化圖像是我們改善網站性能，防止瀏覽器膨脹，減少服務器和帶寬資源使用，加快頁面加載時間，保持開發基礎設施清潔并為最終用戶提供更理想的體驗的另一種方式。
我們希望通過對JPG，PNG和SVG文件類型，圖像壓縮和質量工具的體驗的探索，為您提供一個資源，因為我們不斷完善我們自己的流程以生產高質量的網站。