網頁圖片是使用PNG、JPG 還是SVG？

我們大多數人都知道，在網站設計過程，優化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），稱之為「視網膜螢幕」。