【教學】如何查看網站圖片尺寸?檔案大小怎樣為佳?

網站上圖片的尺寸以及圖片檔案大小都相當重要,是網站設計不可忽略的一環

為什麼說它重要?


因為如果網站的檔案大小過大,圖片佔據了流量,會導致網站跑速變慢

網站載入時間長不僅使用者體驗不佳,也會影響搜尋引擎優化(SEO),網站排名可能因此無法提升

→可以試試由Google提供的Pagespeed來查看一下目前網站的速度

一般網站圖片我們建議檔案大小最多不要超過1M,並最好是在300K左右

dpi則在96即可(許多客戶常常出現300dpi,這是供印刷使用啦~)

→建議可以使用TinyJPG這個線上縮圖軟體,去幫你的圖片瘦身一下



而圖片尺寸比例如果不稍加注意,網站整體的設計感,可能會沒有原先好看

像是明明800*600的圖片版位,站方後來自行改圖片時卻放上了300*150尺寸的圖片

這會是什麼結果?

模糊!糊!糊到不能再糊!

更慘的是有些還會整個跑版、走經

然後客戶很疑惑的問:「為什麼會這樣?」

「黑人問號」的圖片搜尋結果

所以這邊就教各位一個祕訣,輕輕鬆鬆自己看圖片尺寸

STEP 1 先把欲查看的圖片反藍


STEP 2 按滑鼠右鍵,點檢查(N),會看到以下畫面

滑鼠游標放在圖片連結路徑上,可以看到圖片尺寸

這邊可以看到你原始上傳的圖片尺寸,以及目前網站圖片呈現的尺寸

STEP 3 這裡顯示的是圖片版面的尺寸

但是要注意的是,因為現在都是RWD自適應的網站設計,網站版幅會隨著使用者螢幕大小而不盡相同,如果是全版的橫幅圖片,我們會建議不要小於1920的寬度會比較好喔!


以上是網站圖片相關知識分享


其他文章