圖片格式WebP
圖片格式WebP是什麼？圖檔降45％、提高網頁速度｜天矽科技客製化網頁設計
圖片對網站的影響
架設網站，都會置入許多圖片來增加網站的豐富性與可讀性，但圖片並不是放愈多愈好，因為這樣會造成網站開啟速度的緩慢。
不僅是圖片不要放「過多」，檔案最好也不要「太大」！
要將圖片放到網站中，一定要先降低檔案大小才能放上去，有些圖片的原檔案大小非常大，若將這種圖片放到網站中，開啟速度就不會太快，大多時候都會讓使用者等得不耐煩。
網站的瀏覽與速度不僅影響使用者的耐心，也會影響SEO的排名與檢索喔！詳細可參考此篇：SEO優化圖片好重要！容易被忘記的圖片最佳化技巧
但如果必須、一定要放入這麼多圖片的電子商務網站怎麼辦？
網站的圖片格式
目前的主流圖片格式大多都以JPG為主，其次是PNG、SVG等。
而現在，網站為了追求更加友善的開啟速度，尤其是圖片較多的電子商務店家，就希望圖片檔案能夠再更小，以利網站的瀏覽與開啟，因此Google於2010年公布了WebP的這項圖片格式。
網站中的WebP格式
WebP是一種同時提供失真與無失真壓縮的圖片檔案格式，目的在於減少圖片的檔案大小、提高圖片檔案在網路上的傳送時間，但同時又能和JPG與PNG等格式相同的圖片品質。
根據維基百科的資料顯示，WebP的檔案大小比PNG檔少了45%，即使PNG檔已經使用壓縮工具進行壓縮處理過，WrbP仍可以減少28%的檔案大小。
雖然WebP可以減少圖片檔案的大小，它有優點也有缺點。
WebP檔案較小
WebP格式在與其他圖片都相同的尺寸下，檔案會比其他檔案格式還要小，檔案較小，對網頁的載入速度也會更加友善。
可動態與透明化
WebP支援動畫與透明度，並分成失真、無失真壓縮模式。
在過去，動態圖片(動畫)大多採用GIF格式檔案來顯示、透明化的圖片為PNG格式，而現在則多了檔案較小的WebP的選擇。
不是所有瀏覽器都支援
根據維基百科資料顯示，截至2021年5月，已有94%的瀏覽器支援WebP的格式，但這也代表並非所有瀏覽器都支援。
不過不用太擔心，WebP是未來的圖片趨勢，現在無法支援的瀏覽器，相信在未來都會陸續的更新支援，如先前無法支援的瀏覽器Safari也在iOS14和macOS 11 Big Sur開始提供支援。資料來源：Apple 在 Safari 14 中添加了 WebP 圖像支持
但如果是Microsoft IE這種已停止支援的瀏覽器，就沒有辦法支援WebP了，若要使用只能透過外掛程式來讓它顯示。
WebP製作問題
因為WebP屬於較新的技術，因此目前沒有太多的編輯軟體支援此格式，大多仍須透過外掛、轉檔才可以達到目的。
WebP網站圖片案例
目前，多數電子商務網站的圖片，為減輕開啟速度與效率，都已陸續的更新成WebP格式。
▲CLA服飾電商
▲萬代線上轉蛋
不過，為避免遇到WebP無法支援的瀏覽器而無法顯示圖片的問題，有些網站後台語法就會多增加一串以利跳轉，像這樣：
＜picture＞
＜source srcset="img.webp" type="image/webp"＞
＜source srcset="img.jpg" type="image/jpeg"＞
＜img src="img.jpg"＞
＜/picture＞
▲萬代線上轉蛋
資料來源：Stack Overflow
後台語法的部分，本篇不多做贅述。有網站架設的需求，歡迎直接向天矽科技諮詢，我們可以提供最符合您的產業網站的建議喔！
