網(wǎng)頁(yè)質(zhì)量的圖像始終是在使用盡可能小的文件大小，同時(shí)提供良好的圖像質(zhì)量之間的平衡。直接在DSLR中嵌入照片可能看起來(lái)不錯(cuò)，但會(huì)降低網(wǎng)站的抓取速度，而過(guò)度壓縮的圖像可能會(huì)提高網(wǎng)站的速度，但會(huì)損害設(shè)計(jì)和整體美感。

對(duì)于我們主要處理的兩種圖像資產(chǎn)（照片和圖標(biāo)/插圖），我們執(zhí)行圖像質(zhì)量檢查和壓縮技術(shù)的混合，在大多數(shù)情況下都能很好地工作。

文件類型和何時(shí)使用它們

在網(wǎng)站建設(shè)時(shí)，我們使用三種圖片文件類型：.jpg .png和.svg。

JPG最適合用于風(fēng)景，風(fēng)景或人物等照片。對(duì)于內(nèi)容中的圖像，如博客文章圖像，我們的目標(biāo)是20-70kb。較大的背景照片可以達(dá)到500kb，但200kb是一個(gè)很好的平均值。

JPG是有損的（它們會(huì)在每次導(dǎo)出時(shí)重新壓縮并降低圖像質(zhì)量），而且它們不能很好地管理漸變。如果圖像中有漸變，有時(shí)您可以將圖像分成兩個(gè)切口，以便您可以使用CSS漸變將漸變渲染到單獨(dú)的背景中。

PNG最適合用于徽標(biāo)和圖標(biāo)等資產(chǎn)，因?yàn)樗鼈冎С滞该鞫龋一諛?biāo)和圖標(biāo)通常使用更有限的調(diào)色板 - 因?yàn)镻NG通過(guò)減少顏色數(shù)量來(lái)實(shí)現(xiàn)壓縮。

PNG可能是有損的，但我們通常使用無(wú)損，這意味著每個(gè)像素都可以精確保存，而不會(huì)降低調(diào)色板的質(zhì)量，從而獲得更高質(zhì)量的圖像。

SVG具有最好的質(zhì)量，并且由于其可擴(kuò)展性而被用于矢量藝術(shù)。我們經(jīng)常使用它們的標(biāo)識(shí)，但是，SVG確實(shí)為瀏覽器創(chuàng)建了更多的工作，并且可能會(huì)在頁(yè)面加載時(shí)產(chǎn)生緩慢的效果，因此圖像的質(zhì)量應(yīng)該始終與其復(fù)雜性相平衡。

優(yōu)化技術(shù)

為了獲得最佳結(jié)果，優(yōu)化圖像非常重要。要做到這一點(diǎn)，我們利用三個(gè)方案：ImageOptim（JPG格式為PNG圖像和），ImageAlpha（為PNG格式）和沖刷（用于SVGs）。

優(yōu)化JPG

ImageOptim可減少JPG和PNG的文件大小。對(duì)于大圖像，例如我們用于背景面板的圖像，我們將尺寸設(shè)置為1600x1200px。對(duì)于插入到博客文章中的圖片等內(nèi)容照片，我們會(huì)將尺寸限制在200-800像素之間。

在調(diào)整到最終分辨率后，圖像將在Photoshop中以可用的最佳質(zhì)量輸出。每次我們壓縮圖像時(shí)，都會(huì)失去一些保真度，所以我們更愿意僅僅依靠ImageOptim進(jìn)行壓縮，而不是讓Photoshop進(jìn)行壓縮。Photoshop的效率明顯較低：在質(zhì)量為65的情況下，其“保存為網(wǎng)頁(yè)”產(chǎn)生的文件大小相同，但保真度比ImageOptim的質(zhì)量更差85。

Retina JPGs

當(dāng)瞄準(zhǔn)視網(wǎng)膜或其他高密度顯示器時(shí)，我們發(fā)現(xiàn)它最適合以兩倍的分辨率保存單個(gè)JPG，但使用更高的壓縮率，在ImageOptim中約為50-60，可以產(chǎn)生看起來(lái)不錯(cuò)的高質(zhì)量圖像在視網(wǎng)膜和標(biāo)準(zhǔn)的低密度顯示器上。這項(xiàng)技術(shù)使我們能夠使用單一資產(chǎn)用于視網(wǎng)膜和標(biāo)準(zhǔn)顯示器，而不是切割和加載多個(gè)版本，并且不會(huì)使圖像尺寸翻兩番。

優(yōu)化PNG

對(duì)于PNG，我們?cè)赑hotoshop中使用PNG 24的“save for web”選項(xiàng)輸出，然后通過(guò)ImageOptim運(yùn)行它。如果它檢測(cè)到圖像使用的顏色少于256色，ImageOptim將無(wú)損地將圖像轉(zhuǎn)換為PNG 8，這是一種更簡(jiǎn)單的文件格式，可以生成非常輕量級(jí)的文件。

借助ImageOptim，我們的圖像最終輸出沒(méi)有太多復(fù)雜性（最小的顏色，簡(jiǎn)單的形狀和小于200x200px的分辨率），大小可以從15kb到小于1kb。

優(yōu)化更大的PNG

對(duì)于更復(fù)雜的圖像，如果我們無(wú)法使用ImageOptim生成15kb到50kb之間的文件，我們使用ImageAlpha。ImageAlpha用于將PNG 24（百萬(wàn)種顏色）的PNG處理為PNG 8（最多256種顏色），將圖像從無(wú)損圖像變?yōu)橛袚p圖像，最終針對(duì)顏色數(shù)量最少的圖像進(jìn)行處理。

這種格式的損失主要意味著調(diào)色板的戰(zhàn)略性改進(jìn)，消除最不顯眼的顏色，以產(chǎn)生仍然看起來(lái)很好，同時(shí)降低其復(fù)雜性的圖像。

從ImageAlpha導(dǎo)出后，我們通過(guò)ImageOptim運(yùn)行它，以便進(jìn)一步優(yōu)化。

優(yōu)化SVG

談到SVG時(shí)，我們?cè)趶腎llustrator中導(dǎo)出圖像之前盡可能降低復(fù)雜性。由于它們的大小，通常是一個(gè)繁瑣的過(guò)程，我們首先嘗試將層數(shù)減少到最小，同時(shí)仍然準(zhǔn)確地顯示作品。然后在Illustrator中將其保存為SVG，并使用名為Scour的程序進(jìn)行優(yōu)化。

我們使用這個(gè)automator腳本使它在macOS中使用起來(lái)更容易一點(diǎn)，允許您右鍵單擊Finder中的SVG文件并通過(guò)Services菜單優(yōu)化SVG。我們經(jīng)常使用字體文件來(lái)制作矢量圖形，這些矢量圖形是一種名為Glyphs的程序的單色。

結(jié)論

正確優(yōu)化圖像是我們改善網(wǎng)站性能，防止瀏覽器膨脹，減少服務(wù)器和帶寬資源使用，加快頁(yè)面加載時(shí)間，保持開(kāi)發(fā)基礎(chǔ)設(shè)施清潔并為最終用戶提供更理想的體驗(yàn)的另一種方式。

我們希望通過(guò)對(duì)JPG，PNG和SVG文件類型，圖像壓縮和質(zhì)量工具的體驗(yàn)的探索，為您提供一個(gè)資源，因?yàn)槲覀儾粩嗤晟莆覀冏约旱牧鞒桃陨a(chǎn)高質(zhì)量的網(wǎng)站。