網站圖片為什麼需要了解WebP圖像格式？
WebP是一種現代圖像格式，可為網路上的圖像提供卓越的無損和有損壓縮。使用WebP，網站管理員和Web開發人員可以創建更小、更豐富的圖像，從而提高Web速度。與PNG相比，WebP無損圖像的尺寸小 26%。WebP有損圖像比同等SSIM品質指數下的可比JPEG圖像 小 25-34%。
無損WebP以僅22%的額外字節為代價支持透明度（也稱為alpha通道）。對於可以接受有損RGB壓縮的情況，有損WebP還支持透明度，通常提供比PNG小3倍的文件大小。
什麼是WebP
這是一種類似於PNG/JPG/GIF的圖像格式，但它具有更多有趣的功能，使其更加通用。實際上，它是由Google開發和發布的。
為什麼需要了解 WebP？
1. 減少圖片檔案大小，提升網站速度
WebP 是 Google 推出的圖片格式，支援有損與無損壓縮。
在相近的視覺品質下，WebP 通常比JPEG、PNG檔案更小。
- JPEG：常用於照片，但檔案可能較大。
- PNG：支援透明背景，但圖片檔案通常較大。
- WebP：兼具良好的壓縮效率，也支援透明背景。
圖片越小，傳輸所需的資料量通常越少，網站載入也就越快。
2. 改善SEO搜尋排名
網站速度是 Google 評估網頁體驗的重要因素之一。
使用WebP可以：
- 減少圖片下載時間。
- 改善行動裝置的載入體驗。
- 有助於改善 Core Web Vitals 指標。
- 降低大型圖片對網站效能的影響。
不過，WebP並不會直接保證排名提升，還需要搭配網站架構、內容品質及其他SEO優化措施。
3. 支援透明背景
WebP不只有照片壓縮功能，也支援透明背景。
例如：
- 企業 Logo
- 商品去背圖片
- 網站圖示
- 透明背景的產品展示圖
因此，部分原本使用PNG的圖片，可以考慮轉換成WebP。
4. 支援動畫圖片
WebP也支援動畫，可以作為GIF的替代方案。
在不少情況下，動畫WebP能以較小的檔案大小呈現動畫效果，減少網站傳輸負擔。
5. 改善手機使用者的瀏覽體驗
手機使用者可能透過行動網路瀏覽網站，網路速度與流量條件不一定理想。
如果網站圖片過大，可能造成：
- 網頁載入緩慢。
- 使用者等待時間增加。
- 圖片尚未載入就離開網站。
使用 WebP 可以減少圖片傳輸量，讓手機瀏覽體驗更流暢。
它的一些主要特點：
1.它支持有損和無損壓縮。
2.WebP無損圖像比PNG小 26%，比JPEG 小25-34%
3.由於它的尺寸更小，具有許多圖像的網站變得更輕、更快且對SEO友好
提示：WebP不能替代JPEG 和PNG圖像，不是所有瀏覽器都支持WebP格式。這就是為什麼您還應該提供JPEG/PNG版本的圖像，以防用戶的瀏覽器不支持WebP。
如何將圖像轉換為WebP
1.線上圖像轉換器：您可以使用一些必須上傳圖像並進行轉換的網站。轉換後，您必須下載此文件並在您的項目中使用它。
2.軟體：有些軟體可以讓您以WebP格式導出png/JPEG文件。可以試試Adobe Photoshop、Sketch等軟體。
3.Node JS：您可以使用nodeJs腳本將任何圖像轉換為WebP。我主要使用「 imagemin-webp」插件將圖像轉換為WebP。
網站如何使用WebP格式圖像
因為有的瀏覽器不支持WebP格式（火狐、谷歌瀏覽器支持WebP格式圖像，IE、蘋果瀏覽器不支持），這就是為什麼您需要在HTML中提供後備圖像。這樣做是為了確保如果任何瀏覽器不支持WebP，它將以另一種格式顯示圖像，例如jpg/png。
通常，我們是這樣寫的
<img src="image/fish.webp" alt="棕魚" />
但是如果用戶的瀏覽器不支持WebP，那麼他將看不到任何圖像。所以解決方案是使用後備圖像。
<picture><source srcset="img/awesomeWebPImage.webp" type="image/webp"> <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> <img src="img/creakyOldJPEG. jpg" alt="替代文字！"> </picture>
在HTML中，您可以輕鬆使用後備圖像。但是在CSS中兼容WebP，它有點複雜，就沒有必要研究實施。
WebP的缺點
您必須使用兩組圖像。一個是WebP格式，另一個是png/jpg格式，以確保支持所有瀏覽器。但是，我認為它的優點多於缺點，因為它使您的網頁加載時間更快。
了解WebP不只是為了認識一種圖片格式，更重要的是掌握網站圖片最佳化的方法。
對企業網站、電商網站及內容型網站而言，圖片往往占據網頁相當大的資料量。透過WebP 壓縮圖片，可以在維持良好視覺品質的同時，減少檔案大小、改善網站載入速度，並為SEO 與使用者體驗帶來正面幫助。
因此，WebP已經是現代網站圖片最佳化時值得優先考慮的格式之一
