天矽科技 line

天矽部落格最新的網路趨勢資訊

網站設計趨勢

圖片格式WebP是什麼?圖檔降45%、提高網頁速度|天矽科技客製化網頁設計

部落格:圖片格式WebP是什麼?圖檔降45%、提高網頁速度|天矽科技客製化網頁設計

 

WebP圖片格式,比相同尺寸的其他格式檔案還要更小,使網站載入速度增加、變得更加快速。

圖片對網站的影響

 

 架設網站,都會置入許多圖片來增加網站的豐富性與可讀性,但圖片並不是放愈多愈好,因為這樣會造成網站開啟速度的緩慢。

 

 不僅是圖片不要放「過多」,檔案最好也不要「太大」!

 要將圖片放到網站中,一定要先降低檔案大小才能放上去,有些圖片的原檔案大小非常大,若將這種圖片放到網站中,開啟速度就不會太快,大多時候都會讓使用者等得不耐煩。

 

 網站的瀏覽與速度不僅影響使用者的耐心,也會影響SEO的排名與檢索喔!詳細可參考此篇:SEO優化圖片好重要!容易被忘記的圖片最佳化技巧

 

 但如果必須、一定要放入這麼多圖片的電子商務網站怎麼辦?

 

 

網站的圖片格式

 目前的主流圖片格式大多都以JPG為主,其次是PNGSVG等。

 而現在,網站為了追求更加友善的開啟速度,尤其是圖片較多的電子商務店家,就希望圖片檔案能夠再更小,以利網站的瀏覽與開啟,因此Google於2010年公布了WebP的這項圖片格式。

 

延伸閱讀
SEO優化圖片好重要!容易被忘記的圖片最佳化技巧

 

網站中的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

▲CLA服飾電商

 

萬代扭蛋WEBP

▲萬代線上轉蛋

 

由申甲WEBP

由申甲文具

 

 不過,為避免遇到WebP無法支援的瀏覽器而無法顯示圖片的問題,有些網站後台語法就會多增加一串以利跳轉,像這樣:

<picture>
<source srcset="img.webp" type="image/webp">
<source srcset="img.jpg" type="image/jpeg">
<img src="img.jpg">
</picture>

 

WEBP跳轉語法

▲萬代線上轉蛋

 

資料來源:Stack Overflow

 

 後台語法的部分,本篇不多做贅述。有網站架設的需求,歡迎直接向天矽科技諮詢,我們可以提供最符合您的產業網站的建議喔!

 

 

回上一頁
信箱
客服
Line@