我們大多數人都知道，在網站設計過程，優化HTML、CSS、JavaScript 或其他任何東西都是好的，但如果你不優化圖像，所有其他的努力都將是徒勞的。網站圖片是使用PNG、JPG還是SVG格式？這取決您的選擇，iWare介紹這幾種圖像格式的優缺點，供您參考。 

您需要多少種顏色？

PNG-8將限制為256種顏色，這在大多數情況下已經足夠了，但可能會出現顏色「帶狀」。如果您需要更多顏色或想要避免條帶，請考慮使用PNG 24 或32，但要注意文件大小會大幅增加。JPG可以包含數百萬種顏色并具有更小的文件大小，它最適合沒有清晰線條或文本的圖片。對于帶有清晰線條或文本（例如圖形）的圖片，請堅持使用PNG并在使用的顏色數量上做出妥協。用SVG替換PNG以獲得簡單的線條圖、徽標和圖標。

您需要透明度嗎？

JPG不提供此功能（盡管有些人想出了巧妙的技巧將SVG與JPG合并以制作透明的JPG）。PNG和SVG支持透明度。PNG-24可能會提供比PNG-8更好的圖像質量，誘使您創建一個大文件。默認情況下，SVG是透明的，并且文件大小可以小很多。

您需要整個圖像清晰嗎？

JPG是有損的，這意味著它們在壓縮或保存時會降低質量，而且它們是基于光柵的，這意味著它們不能很好地縮放。它們最適合用于具有多種顏色的更復雜的照片，而不是用于每一行的清晰度都很重要的。比如，插圖、徽標、網絡漫畫等。另一個好處是您可以有選擇地模糊 JPG的某些部分，使更重要的部分變得清晰，但可以減少文件大小。PNG是無損的，因此在壓縮或保存時不會降低質量。當您需要清晰的線條或文本時，這使它們成為JPG的一個很好的替代品。但是，它們的尺寸可能很大并且也是基于柵格的，因此無法很好地縮放。SVG是基于矢量的，縮放效果非常好，在任何尺寸下都保持清晰，但不適合照片或更復雜的圖形。

您要針對哪些設備進行優化？

在視網膜熒幕上，JPG很少看起來不錯，而 PNG 則難以縮放。SVG看起來不錯并且可以縮放。在所有瀏覽器中對JPG，PNG和SVG的支持都很好，并且有一些變通方法可用于較舊的瀏覽器（例如IE6至IE10）。有多種方法可以提供備份圖像，以幫助瀏覽器根據熒幕尺寸和解析度選擇要呈現的圖像格式和尺寸。

TIPS:視網膜熒幕是分辨率超過人眼識別極限的高分辨率熒幕，是由蘋果公司在2010年iPhone 4發布會上首次推出的營銷術語。視網膜（Retina）熒幕是蘋果公司"發明"的一個營銷術語。并在部分行動產品使用。蘋果這個術語用在iphone 4手機上，自此一直沿用，它將960×640的像素壓縮到一個3.5英寸的顯示器內。也就是說，該熒幕的像素密度達到326像素/英寸（ppi），稱之為「視網膜熒幕」。

使用 PNG、JPG還是SVG格式？

JPG — 有損和基于光柵，用于具有大量顏色的照片和圖像，它最適合沒有清晰線條或文本的圖片。他們不會支持透明度，盡管有辦法解決這個問題。 

PNG — 無損且基于光柵，用于需要清晰線條或文本（但不需要縮放）、需要透明度、顏色很少的圖像。有 PNG8、24和32。研究最適合您的特定情況 

SVG — 基于矢量的，用于平面線條圖、圖標、徽標，可以縮放到任何大小，而文件大小仍然很小。

選擇圖像格式只是優化網絡圖像的一步。還有很多很多其他的步驟需要考慮，所以有很多東西要學習。