在使用盡可能小的文件來提供高質(zhì)量圖像的同時，Web質(zhì)量圖像總是保持一種平衡。數(shù)碼單反相機中直接嵌入圖片看起來可能很好，但是這會降低網(wǎng)站的負荷，而圖片壓縮過大可能會提高網(wǎng)站的速度，但是會損害網(wǎng)站的設(shè)計和整體美觀。
主要涉及到兩類圖像資源：照片和圖標/插圖。通過對圖像質(zhì)量的檢測，并結(jié)合壓縮技術(shù)，我們可以很好地完成大部分的工作。
什么時候使用這些文件類型。
構(gòu)建網(wǎng)站時，我們使用了三種圖像文件類型：jpg、png和svg。
JPG最適合拍攝風景、景物、人物等照片。對一張圖片來說，比如一篇博文，目標是20-70kb。更大的背景圖片可以達到500kb，但是200kb是個不錯的平均值。
JPG是有缺陷的(每次輸出時都會重新壓縮，降低圖像質(zhì)量)，它們無法很好地管理漸變。有時候，如果圖片中有漸變，你可以把它分成兩部分，這樣你就可以用CSS漸變在一個單獨的背景中渲染漸變。
最適合于像徽標和圖標這樣的資產(chǎn)，因為它們支持透明性，因為PNG通過減少顏色數(shù)量來實現(xiàn)壓縮，因此通常使用較有限的調(diào)色板。雖然PNG可能是有損耗的，但是我們通常使用的是無損耗，這意味著每一個像素都能精確地保持圖像的質(zhì)量，從而得到更高質(zhì)量的圖像。
由于SVG的可擴展性，SVG被用來進行矢量美術(shù)設(shè)計。雖然SVG經(jīng)常和logo一起使用，但它的確為瀏覽器帶來了更多的工作，而且在加載頁面時也會出現(xiàn)延遲，所以圖像的質(zhì)量應(yīng)該始終和它的復雜性保持平衡。
以PNG和SVG為例，比較一下SilverScreenInsider和Bozeman網(wǎng)站的標志。我們用SVG來處理前者。在Bozman網(wǎng)站上，由于用戶滾動時引入CSS動畫的復雜性，為了不影響瀏覽器性能，我們選擇使用PNG。
有時候，最佳的解決方法是將二者結(jié)合起來：對于JTech網(wǎng)站的標識，“JT”組件是PNG，而“歡慶20年”的圖像是SVG，以保證其在所有視圖入口大小中的質(zhì)量。
對于視網(wǎng)膜或其他高密度顯示器，我們發(fā)現(xiàn)單個JPG最好保留在兩倍分辨率，但是使用更高的壓縮，ImageOptim壓縮大約為50-60，這樣可以在視網(wǎng)膜和標準低密度顯示器上生成看上去不錯的高質(zhì)量圖像。鄭州網(wǎng)站開發(fā)公司從以前分享現(xiàn)代國外響應(yīng)式設(shè)計的優(yōu)秀模式中也

可以看出，這項技術(shù)允許我們在視網(wǎng)膜和標準顯示器上使用單個資產(chǎn)，而不是切割和加載多個版本，而不會使圖像的尺寸增加四倍。
至于PNG，我們使用PNG24來將Photoshop輸出到“saveforweb”選項，然后通過ImageOptim運行。當檢測到圖像使用的顏色少于256種時，ImageOptim會將圖像無損地轉(zhuǎn)換成PNG8格式，這種更簡單的文件格式能夠產(chǎn)生非常輕量的文件。
有了ImageOptim，我們的圖像最終輸出并不復雜(顏色很少，形狀簡單，分辨率在200200px以下)，而且它的大小可以在15kb到1kb之間。
最優(yōu)大PNG。

如果我們不能使用ImageOptim生成15kb到50kb之間的文件，則使用ImageAlpha來處理更復雜的圖像。用ImageAlpha處理從PNG24(百萬種顏色)到PNG8(256種顏色)的PNG，使圖像從無損傷變成有損傷，最后用最少的顏色來定位。
這一格式的損失主要意味著在戰(zhàn)略上改善調(diào)色板，去除最不明顯的顏色，從而在降低圖像復雜性的同時，生成看上去依然不錯的圖像。導出ImageAlpha之后，我們將通過ImageOptim運行它以進行進一步優(yōu)化。
優(yōu)化SVG
對于SVG，我們在從Illustrator導出圖片之前盡量減少了復雜性。鄭州網(wǎng)站開發(fā)因為他們的尺寸，這個過程常常很麻煩，我們首先嘗試把層數(shù)減到最小，同時仍然能精確地顯示作品。之后在Illustrator中將其保存為SVG，并使用稱為Scour的程序?qū)ζ溥M行優(yōu)化。
在macOS中，我們使用這個automator腳本使它更易于使用，允許您在Finder中右擊SVG文件，并通過Service菜單優(yōu)化SVG。字體文件通常用在單一顏色的矢量圖形和稱為Glyphs的程序中。
總結(jié)。
對圖像進行適當?shù)膬?yōu)化只是提高網(wǎng)站性能、防止瀏覽器膨脹、減少服務(wù)器和帶寬資源使用、加快頁面加載時間、保持開發(fā)基礎(chǔ)干凈、為終端用戶提供更理想的體驗的另一個方法。
隨著JPG、PNG和SVG文件類型、圖像壓縮和質(zhì)量工具的不斷完善，我們希望探索我們的經(jīng)驗，從而制作出高質(zhì)量的網(wǎng)站。