Logo

WebP是什麼,為什麼我的網站需要它?

網頁設計時,圖片最好用WebP格式比起文字,我們都知道網站上最主要能吸引人們注意及傳達訊息的最佳方式就是採用圖片。

至今為止您在網路上所看到的各式廣告也都是以圖片為主。

通常這些圖片檔案的主要格式為低細節PNG(小圖及icon圖示)和高細節JPEG(照片),相對的問題產生了,一個網頁中光是圖像部份就佔了60%以上的下載量。

JPG、PNG
轉為 → WEBP

只要在頁面上所置放的圖片越多,當瀏覽者在請求讀取畫面的時後,伺服器必須一一回饋這些要求,頁面的檔案大小影響著傳遞速率的快慢,而這個反應速度影響了使用者體驗感受。

4k高解析(影視、印刷居多)
剛好就好 → 電腦72dpi、載具100dpi

高清畫素尺寸
剛好就好 → 手機 400px、平板 680px、筆電 1300px、桌機 1920px。


為什麼剛好就好?
網站呈現速度太慢會讓使用者毫不猶豫的離開網站,前往其他網站,我想這不是你希望見到的事情。

最近幾年,google採用了一種新的檔案格式WebP。透過圖像壓縮技術使得網站可以在非常短的時間內,向瀏覽網站的使用者提供大量圖像,也不會因此損失圖檔的解析度。

線上轉檔 → WEBP Converter

簡單的說,使用WEBP格式,就不用為了提高網速而降低、壓縮圖像的品質。

為什麼提升網速變得重要?

最大的原因來自於Google Search Console 其中一項核心網路生命力項目中,針對PageSpeed 洞察力進行網站的四大診斷效能問題。

第一個部份就是效能最佳化,其次是無障礙功能、最佳化、SEO搜尋引擎最佳化,共四個項目。

WEBP提升效能
圖片不論是對伺服器或使用者介面都是很大的負擔,開啟網站的速度慢之外也嚴重的吃掉資源。更重要的是會影響SEO搜索。為了排除這個狀況,能加快網頁載入速度的現代化圖片格式WebP就變得非常重要。

WebP 圖像文件比同類 PNG 文件小 26%,比同類 JPEG 文件小 25% 到 34% 我們實驗以下的原JPG圖檔經過轉換為WEBP檔案格式後,確實檔案的大小明顯小了一半以上。但是,仔細比對二張圖檔的細節解析,很明顯沒有什麼差別。

WebP 的好處

 

  • 檔案較小:WebP 格式的主要優點是它可以將圖像打包成比其他格式更小的文件,同時保持相當的質量。
  • 讀取更快:這有助於在不犧牲圖像外觀的情況下加快網頁速度。
  • 有利手機用戶:較小的圖像文件還可以節省頻寬和設備資源,這在當今的移動設備上尤為重要,畢竟出門在外,難以確保網路連線高速順暢。

 

WebP 的缺點

 

  • 下載無法開啟:這種檔案是針對網路上使用,大量網頁設計師已經開始使用,但是如果沒有網路又在離線狀態下,WebP 檔案格式就會變得不實用了。
  • 較少編輯軟件支持:WebP 畢竟是較新的一種圖像格式,最近才被部份瀏覽器和圖像查看編輯軟件所採用。(不過遲早會是必要的),而圖像編輯器,如 Gimp 和 Adobe Photoshop 支持,儘管 Photoshop 支持需要插件來編輯 WebP 文件,代表也支持 WebP 格式。
  • 舊版瀏覽器尚未跟進:並非所有瀏覽器和軟件都跟上支持 WebP,但預計所有瀏覽器將在未來幾年實現更新以支援 webp 格式, 哪些瀏覽器還不支援(更新中)?。Google Chrome、Mozilla Firefox、Microsoft Edge 和 Opera 瀏覽器都支持 WebP 格式。

 

要提供更好的圖像,我該如何將JPEG或PNG圖檔轉換成 WebP的格式?

把檔案丟到平台轉檔就好,操作簡單容易!

  • cloudconvert 平台:
    https://cloudconvert.com/
  • convertio 平台:
    https://convertio.co/zh/jpg-webp/
  • pixelied 平台:
    https://pixelied.com/convert/jpg-converter/jpg-to-webp