首頁 部落格 網頁圖片是使用PNG、JPG 還是SVG?
Jericho
Nov 17, 2023
網路、科技、滿滿的新知在浩瀚的網路上,想要得到他嗎?沒問題,永遠抱持著謙卑的態度,自然會找到方案!

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

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

 

您需要多少種顏色?

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

您需要透明度嗎?

JPG不提供此功能(儘管有些人想出了巧妙的技巧將SVGJPG合併以製作透明的JPG)。PNGSVG支持透明度。PNG-24可能會提供比PNG-8更好的圖像品質,誘使您創建一個大文件。默認情況下,SVG是透明的,並且文件大小可以小很多。

您需要整個圖像清晰嗎?

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

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

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

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

使用 PNGJPG還是SVG格式?

 

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

 

PNG — 無損且基於光柵,用於需要清晰線條或文本(但不需要縮放)、需要透明度、顏色很少的圖像。有 PNG82432。研究最適合您的特定情況

 

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

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

文章標籤
網頁圖片
如何利用黑白網頁設計
如何利用黑白網頁設計
Jericho
Jericho
Jun 21, 2024
行動網頁設計中導航選單的注意事項
行動網頁設計中導航選單的注意事項
Jericho
Jericho
Jun 19, 2024
如何讓客戶成為網站內容成就品牌故事主角
如何讓客戶成為網站內容成就品牌故事主角
Jericho
Jericho
Jun 14, 2024