高級網(wǎng)站設計中的圖像優(yōu)化撰寫
網(wǎng)站質(zhì)量圖像始終是在使用盡可能小的文件大小同時提供良好圖像質(zhì)量之間的平衡行為。直接從您的數(shù)碼單反相機上嵌入照片可能看起來不錯，但它會減慢您的網(wǎng)站負載的速度，而過度壓縮的圖像可能會提高您網(wǎng)站的速度，但會損害設計和整體審美。
文件類型以及何時使用它們
我們在網(wǎng)站設計時使用三種圖像文件類型：.jpg .png和.svg。
JPG最適合用于風景，風景或人物等照片。對于內(nèi)容中的圖像，例如博客文章圖像，我們的目標是20-70kb。較大的背景照片可以達到500kb，但200kb是一個很好的平均值。
JPG是有損的（它們在每次導出時重新壓縮并降低圖像質(zhì)量），并且它們不能很好地管理漸變。如果圖像中有漸變，有時可以將圖像分成兩個切割，以便您可以使用CSS漸變在單獨的背景中渲染漸變。
PNG最適用于徽標和圖標等資源，因為它們支持透明度，因為徽標和圖標通常使用更有限的調(diào)色板 - 因為PNG通過減少顏色數(shù)量來實現(xiàn)壓縮。
PNG可能是有損耗的，但我們通常使用無損，這意味著每個像素都可以精確保存而不會降低調(diào)色板的質(zhì)量，從而獲得更高質(zhì)量的圖像。
SVG具有最好的質(zhì)量，并且由于其可擴展性而被用于矢量藝術。我們經(jīng)常將它們與徽標一起使用，但是，SVG確實為瀏覽器創(chuàng)建了更多的工作，并且在頁面加載時會產(chǎn)生遲緩，因此圖像的質(zhì)量應始終與其復雜性相平衡。
優(yōu)化技術
優(yōu)化JPG
我們用于背景面板的圖像，我們將尺寸設置為1600x1200px。對于內(nèi)容照片，例如插入博客文章中的圖像，我們將尺寸限制在200-800px寬之間。
調(diào)整到最終分辨率后，將使用最佳質(zhì)量在Photoshop中輸出圖像。每次我們壓縮圖像都會失去一些保真度，所以我們更喜歡單獨使用ImageOptim進行壓縮，而不是讓Photoshop進行傳遞。Photoshop的效率顯著降低：它在質(zhì)量65下的“網(wǎng)絡保存”產(chǎn)生的圖像文件大小相同但保真度比ImageOptim的質(zhì)量差85。
優(yōu)化更大的PNG
對于更復雜的圖像，如果我們使用ImageOptim無法生成15kb到50kb之間的文件，我們使用ImageAlpha。ImageAlpha用于處理從PNG 24（數(shù)百萬種顏色）到PNG 8（最多256種顏色）的PNG，將圖像從無損變?yōu)橛袚p，最終瞄準具有最少數(shù)量顏色的PNG。
這種格式的損耗主要意味著對調(diào)色板進行戰(zhàn)略性改進，消除最不顯著的顏色，以產(chǎn)生仍然看起來很棒的圖像，同時降低其復雜性。
優(yōu)化SVG
我們使用這個automator腳本使其在macOS中更容易使用，允許您在Finder中右鍵單擊SVG文件并通過Services菜單優(yōu)化SVG。我們經(jīng)常將字體文件用于單色矢量圖形，并使用名為Glyphs的程序。
正確優(yōu)化圖像只是我們改善網(wǎng)站性能，防止瀏覽器膨脹，減少服務器和帶寬資源使用，加快頁面加載時間，保持開發(fā)基礎架構清潔并為最終用戶提供更理想體驗的另一種方式。
我們希望通過JPG，PNG和SVG文件類型，圖像壓縮和質(zhì)量工具來探索我們的經(jīng)驗，因為我們不斷完善自己的流程以完善網(wǎng)站設計。
