網站由文字、圖片、影音所組成。其中圖片通常會佔用最多的網站空間、流量,一個頁面圖片大小、多寡將會對網站讀取速度有直接的影響。
內容索引
多少檔案大小的圖片適合用在網站上?
以前 Google 廣告的素材要求在 50KB 以內,後來因為整體網路速度的提升,將限制提升到 150KB,也就是你看到的每個廣告圖片,檔案大小都在 150KB 之內。
以此為一個標準,我認為網站上,廣告大小尺寸的圖片、大小應該在 150KB 以內,最大不要超過 200KB。
而照片或網站的頂部常用的大 Banner,因為本身尺寸就較大,色彩也較豐富,要不超過 200KB 太強人所難,但最好大小也能控制在 400 KB 以內為佳!但有些照片真的太大無法限縮在 400KB 以內,非不得已時也請控制整頁最多只能有一到兩個超過的特例!
PNG 最容易超過大小,且 Photoshop 壓縮選項有限
什麼時候我們會用到 PNG?
- 圖片背景需要保持透明
- 圖片色彩明顯單一、或單純由幾種純色組成時
- 圖片品質要求較高、圖中文字希望最大程度不失真時
以上幾點是網頁設計中,會放棄 JPG 而採用 PNG 的常見狀況,除了第一點是功能性的之外,另外兩點則是經驗的累積、和狀況的判斷來做決定。
當圖片顏色單一時,PNG 大小會比 JPG 來得小
PNG 有個特性就是當圖片顏色單一、或單純幾個純色組成時⋯⋯不論圖片多大張,儲存的檔案大小都會很小!JPG 則會因為圖像大小而增加檔案大小。
但要是圖片顏色複雜,像是照片就不要用 PNG
記得 PNG 只有在需要背景透明、或顏色單一時的狀況使用,其他時候一律使用 JPG 來儲存圖片!如果你用 PNG 來存相片,它的大小將會是讓你驚訝的大!
非不得已必須用 PNG,檔案又很大的時候:壓縮它吧!
網頁做久一定會遇到,需要背景透明處理只能存成 PNG,檔案大小卻超大!PNG 又不像 JPG 一樣有品質的分數可以選,可以隨意壓縮成更小的檔案,這時我們只能依靠線上服務來幫我們壓縮。
使用 TinyPNG 服務壓縮圖片吧!
這時就要拿出我們的壓箱寶,TinyPNG!雖然名稱是 TinyPNG 但還是不管是 PNG、JPG 都支援壓縮,我是只拿來壓縮 PNG,因為 Photoshop 就可以自己調整 JPG 的壓縮品質了,PNG 卻沒什麼壓縮選項,原因是因為 PNG 是採用不失真的壓縮方式,也因此品質較高!缺點是檔案較大。
為什麼不全部壓縮?有一好沒兩好,畫質明顯降低了
如果這是無損的壓縮,我們應該把所有 PNG 都拿來壓縮過一遍,讓網頁整整瘦個一圈!但可惜不是,這是有損的壓縮,且畫質的損失有時候會「很明顯」,因此我不到不得已的地步,通常不會用 TinyPNG 來壓縮我的 PNG 圖檔。
無須下載安裝:線上使用 TinyPNG
點擊文章下方連結到網站,將需要壓縮的圖檔拉進去框框中即可完成壓縮,最後再將壓縮好的檔案下載回電腦上。
最後附上 TinyPNG 的服務網址:圖片壓縮服務網站連結