網頁壓縮照片的技巧，降低圖檔大小又不失真。

網頁壓縮照片十分重要，因為替換網頁上的圖片是每個網站管理者的基本操作，在修改之前了解一些關於圖片的特性，可以讓你更了解適合用哪一種格式。

網頁壓縮照片前你要先了解

網頁中最常用到的圖片有兩種，分別是：

• PNG 可攜式網路圖像格式（Portable Network Graphics）
• JPG 靜態影像壓縮格式檔（JPEG, Joint Photographic Experts Group）

 

了解 PNG 與 JPG 格式的差別

JPG 檔儲存 24 位元全彩影像，不支援透明或動畫。透過壓縮運算法將圖案的大小壓縮，壓縮比例越高則檔案的容量就越小，但相對的圖案失真程度就越嚴重。此外 JPG 適合照片壓縮，如果圖片中有文字容易會糊掉。

PNG 檔儲存 48 位元的彩色影像，壓縮影像不失真，可讓透明底的圖片放在任何背景上。因為 PNG 使用的是非破壞性的壓縮方式，相對 JPG 來說檔案大小上就比 JPG 大。

 

選擇格式的考量點

1. 1. 在於圖片是否有透明背景。如果是的話就一定要用 PNG，如果轉成 JPG 透明底會自動變為白色。
      網頁常會有一個基本設計，就是背景上方壓上另一張透明底的圖片，有點類似浮水印，常加上動畫效果來呈現。
   2. 圖片是否為大型圖片。如果是大型的背景圖就強烈建議轉換成 JPG，檔案大小可是差了好幾倍！
      同一張圖片的 PNG 與 JPG 檔，在大小尺寸大小相同的情況下，檔案差了五倍多：
      

 

1. 圖片後續是否還會編輯。PNG 採用無失真演算法，相反的 JPG 每經過一次修改存檔就會愈來愈模糊。

 

JPG 的壓縮方法

圖片編輯軟體有很多種，這邊以 Mac 的預覽程式為例，它就是一個簡單可以快速轉檔、壓縮的內建軟體。

開啟圖片之後，按下「檔案」→ 「輸出…」

在品質的位置可以決定壓縮的程度（壓縮比建議不要低於 50%）；另外在「格式」也可以選擇轉檔成 PNG 與 JGP。

 

PNG 的壓縮方法

PNG 壓縮方法推薦大家使用 tinypng 這個網站，操作方法很簡單，只要將圖片拉進網頁上方的框框中就會自動壓縮，壓出來的品質非常的好，與原檔幾乎看不出差別。每張圖片後面都會顯示壓縮後的圖片省下了多少容量！要注意的是免費版的單一檔案大小不能超過 5MB！

按下檔案後方的「download」就能把壓縮後的圖片下載下來，你也可以一次上傳多張圖片，點選綠色的「Download all」按鈕全部下載。

 

以上是 WPW 給各位參考的照片壓縮方法，你還也看一下這篇：「優化網頁的第一步，決定網頁照片尺寸的大小加快載入速度。」教你如何了解放在網頁中的圖片適合的大小！