• 網站架設專欄
  • 網頁中的圖片為何需要壓縮?要如何壓縮網頁中的圖片呢?

網頁中的圖片為何需要壓縮?要如何壓縮網頁中的圖片呢?

網頁中的圖片為何需要壓縮?要如何壓縮網頁中的圖片呢?

一、為何要壓縮網頁中的圖片?

一般網站中所使用的圖片,我們會建議先「壓縮」後,再放置於網頁中。然而所謂的圖片壓縮並非指將圖片使用壓縮軟體(例如 RAR、ZIP…)加以封裝,而是要幫圖片「瘦身」,也就是說壓縮(瘦身)後的圖片格式仍然不變,依舊是 JPG 或 GIF 的格式。

壓縮圖片

一般而言未經瘦身前的圖片檔案都很大,即使將該圖片比例縮小,檔案雖然有變小,但若是要放罝於網頁上,還是稍嫌過大,若您網頁上有許多未經瘦身的圖片將會造成網友瀏覽該頁面時速度變慢,進而影響網站效能及搜尋引擎排名,因此無論您是要自行製作網頁或是要將圖片透過後端管理系統,上傳至網站並於網站前台顯示時,務必先確認該圖片是否壓縮(瘦身)過再行上傳。

二、圖片壓縮的原理

圖片壓縮的原理是一種將圖片中一些相近的色階用同樣的顏色來取代的技術。這個過程可以大幅減少圖片檔案的大小,值得注意的是,在進行圖片壓縮時需要平衡檔案大小和圖片品質之間的關係,否則可能會導致圖片品質的下降,出現模糊、鋸齒狀等問題。

為了確保壓縮後的圖片仍然保持良好的品質,一般建議將壓縮品質設定在 70~90% 的範圍內。這樣可以在保持相對高的圖片品質的同時,有效地減小圖片檔案的大小。通常來說,壓縮後的圖片大小約只有原來的十分之一左右,這對於提高網頁加載速度和節省頻寬都有很大的幫助。

三、壓縮圖片對網站 SEO 的好處

以下更明確的說明網頁中的圖片需要壓縮的重要原因,對網站 SEO 的好處:

1. 加載速度優化
壓縮圖片是提高網頁加載速度的關鍵。網頁中的圖片檔案大小會直接影響網頁的載入時間。圖片越大會佔用更多的網站頻寬並且需要更多的時間來下載,如此會導致網頁加載速度變慢。透過壓縮圖片,可以減小檔案大小,從而加快網頁的加載速度,讓用戶能夠更快地訪問和瀏覽網站內容,提供更好的用戶體驗,有利 SEO。
2. 節省頻寬和流量
壓縮圖片可以減少網頁所需的頻寬和數據傳輸量。特別是對於移動設備的用戶來說,減少圖片大小可以有效節省他們的數據流量消耗,提供更流暢的瀏覽體驗,同時也降低了網站的流量成本
3. 節省存儲空間
壓縮圖片可以節省網站伺服器或網站的存儲空間。尤其是對於需要存儲大量圖片的網站來說,壓縮圖片可以節省大量的存儲空間,提高網站系統的效率,同時也減少了維護和管理的成本。
4. 提高可用性和可訪問性
網頁中的大型圖片可能會導致訪問速度慢或者無法完全加載的問題,這會影響用戶的訪問體驗。通過壓縮圖片,可以確保圖片能夠正確快速地加載,提供更好的可用性和可訪問性,讓用戶能夠更順暢地訪問網站內容。

info值得注意的是,壓縮網頁圖片時需要平衡圖片品質和圖片檔案大小之間的關係。過度壓縮可能導致圖片品質下降,影響視覺效果。因此,應該根據具體情況選擇適當的壓縮方法和參數,以確保圖片在保持可接受品質的同時,達到合理的文件大小。

四、壓縮圖片的流程及方式

目前市面上的美工軟體,幾乎都有圖片壓縮的功能,網路上也有許多免費的圖片壓縮軟體可以使用,以下列舉使用 PhotoShop 來壓縮圖片的流程及方式:

  1. 開啟要進行瘦身的圖片,然後點選「檔案/儲存為網頁用」(或直接按鍵盤 Alt + Shift + Ctrl + S)。
  2. 出現「儲存為網頁用」的視窗後,您可以直接調整壓縮品質,一般建議設定在 70~90 之間。同時,可以在預覽視窗中預覽壓縮後的圖片效果。
  3. 最後,選擇您要另存圖檔的格式,一般照片可存成 JPEG 格式,然後按下儲存鈕,選擇另存的圖片位置,即可完成壓縮圖片的操作。

五、適合用來壓縮網頁圖片的格式

適合用來壓縮網頁圖片的格式有幾種,每種格式都有其特定的應用場景和優勢:

JPEG(.jpg)
JPEG 是一種廣泛使用的網頁圖片格式,通常適合保存彩色圖片。它支持有損壓縮,可以在保持相對較高的圖片品質的同時減小文件大小。JPEG 格式特別適合儲存照片和網頁圖像,但對於圖片中包含的細節和文本,可能會出現壓縮損失。
PNG(.png)
PNG 格式是另一種廣泛使用的網頁圖片格式,它支持無損壓縮,可以保留圖像中的所有細節和文本,通常用於保存圖形和圖片,特別適合包含透明背景或需要保留細節的圖像。PNG 格式的文件大小通常比 JPEG 大,但可以提供更好的網頁圖片品質。
WebP(.webp)
WebP 是由 Google 開發的一種圖片格式,可以實現有損和無損壓縮。WebP 格式的文件大小通常比 JPEG 小,同時保持相對較高的網頁圖片品質。WebP 格式在支持的瀏覽器中有良好的兼容性,特別適合用於提高網頁加載速度和節省頻寬
JPEG 2000(.jp2)
JPEG 2000 是一種高效的圖片壓縮格式,具有無損和有損壓縮的能力。它可以在減小文件大小的同時保持較高的圖片品質。然而,由於它的廣泛支援程度相對較低,可能在某些瀏覽器或應用中無法正確顯示

info這些格式各有優缺點,以網頁設計的角度來看,要壓縮網頁圖片建議使用 WebP 的格式會較為理想,同時對於 SEO 網站優化而言也將更為有利。

返回列表