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

　　文件類(lèi)型以及何時(shí)使用它們
 

　　我們?cè)跇?gòu)建網(wǎng)站時(shí)使用三種圖像文件類(lèi)型：jpg 、png和svg。
 

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

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

　　PNG最適用于徽標(biāo)和圖標(biāo)等資產(chǎn)，因?yà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)一起使用，但是，SVG確實(shí)為瀏覽器創(chuàng)建了更多的工作，并且可以在頁(yè)面加載時(shí)產(chǎn)生遲緩，因此圖像的質(zhì)量應(yīng)始終與其復(fù)雜性相平衡。
 

 

　　作為我們使用PNG和SVG的示例，請(qǐng)比較Silver Screen Insider和Bozeman網(wǎng)站的徽標(biāo)。對(duì)于前者，我們使用了SVG。對(duì)于博茲曼網(wǎng)站，由于用戶向下滾動(dòng)時(shí)CSS動(dòng)畫(huà)引入了復(fù)雜性，我們選擇使用PNG，以免影響瀏覽器性能。
 

 

　　有時(shí)最好的解決方案是兩者的結(jié)合：對(duì)于JTech網(wǎng)站上的標(biāo)識(shí)，“JT”組件是PNG，但“慶祝20年”圖像是SVG，以便在所有視口大小中保持其質(zhì)量。
 

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

　　為了獲得最佳結(jié)果，優(yōu)化圖像非常重要。為此這些軟件設(shè)計(jì)功能打破了我們的大腦和業(yè)務(wù)，我們使用三個(gè)程序：ImageOptim（用于JPG和PNG），ImageAlpha（用于PNG）和Scour（用于SVG）。

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

　　調(diào)整到最終分辨率后，將使用最佳質(zhì)量在Photoshop中輸出圖像。每次我們壓縮圖像都會(huì)失去一些保真度，所以我們更喜歡單獨(dú)使用ImageOptim進(jìn)行壓縮，而不是讓Photoshop進(jìn)行傳遞。 Photoshop的效率顯著降低：質(zhì)量為65的“網(wǎng)絡(luò)保存”會(huì)產(chǎn)生相同文件大小的圖像，但保真度比ImageOptim的質(zhì)量差85。
 

　　當(dāng)針對(duì)視網(wǎng)膜或其他高密度顯示器時(shí)，我們發(fā)現(xiàn)最好以兩倍的分辨率保存單個(gè)JPG，但使用更高的壓縮，在ImageOptim中約50-60，這可以產(chǎn)生看起來(lái)很好的高質(zhì)量圖像在視網(wǎng)膜和標(biāo)準(zhǔn)，低密度顯示器上。這在之前的分享現(xiàn)代國(guó)外響應(yīng)式設(shè)計(jì)的卓越典范也可以看出，這種技術(shù)允許我們將單個(gè)資產(chǎn)用于視網(wǎng)膜和標(biāo)準(zhǔn)顯示，而不是切割和加載多個(gè)版本，而不會(huì)使圖像的大小翻兩番。
 

　　優(yōu)化PNG

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

　　使用ImageOptim，我們的圖像最終輸出沒(méi)有太多的復(fù)雜性（最小的顏色，簡(jiǎn)單的形狀和低于200200px的分辨率），其大小范圍可以從15kb到1kb以下。
 

　　優(yōu)化更大的PNG
 

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

　　這種格式的損耗主要意味著對(duì)調(diào)色板進(jìn)行戰(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中，我們?cè)趶腎llustrator導(dǎo)出圖像之前盡可能減少?gòu)?fù)雜性。由于它們的大小，這是一個(gè)經(jīng)常繁瑣的過(guò)程，我們首先嘗試將層數(shù)減少到最小，同時(shí)仍然準(zhǔn)確地顯示藝術(shù)品。然后將其保存為Illustrator中的SVG，并使用名為Scour的程序進(jìn)行優(yōu)化。
 

　　我們使用此automator腳本使其在macOS中更容易使用，允許您在Finder中右鍵單擊SVG文件并通過(guò)“服務(wù)”菜單優(yōu)化SVG。我們經(jīng)常將字體文件用于單色矢量圖形，并使用名為Glyphs的程序。
 

　　結(jié)論
 

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

　　我們希望通過(guò)JPG，PNG和SVG文件類(lèi)型，圖像壓縮和質(zhì)量工具來(lái)探索我們的經(jīng)驗(yàn)，因?yàn)槲覀儾粩嗤晟谱约旱牧鞒桃陨a(chǎn)高質(zhì)量的網(wǎng)站。