網頁 PNG JPG 選擇？檔案太大時該如壓縮？

網站由文字、圖片、影音所組成。其中圖片通常會佔用最多的網站空間、流量，一個頁面圖片大小、多寡將會對網站讀取速度有直接的影響。

多少檔案大小的圖片適合用在網站上？

以前 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 的服務網址：圖片壓縮服務網站連結