什麼是WebP圖片格式及如何使用在WordPress

什麼是WebP圖片格式及如何使用在WordPress

目前,Google Chrome,Opera,Mozilla Firefox,Microsoft Edge和一些Android瀏覽器都支持圖片的WebP格式。
根據Google Analytics報告,有超過50%的人使用這些支持的瀏覽器。

你可以到caniuse.com網站看看各家瀏覽器支援的程度。

依照我的經驗WebP的檔案大約會比jpg檔案少20%,所以會加快網站讀取的速度
因部分瀏覽器還是沒支援WebP,所以圖片會以兩個格式存在
使用者的瀏覽器會自動抓取可以讀的圖片格式

以下是步驟:

什麼是WebP圖片格式及如何使用在WordPress
什麼是WebP圖片格式及如何使用在WordPress

jpg轉檔成WebP,可以到這個網站https://image.online-convert.com/convert-to-webp,下載WebP檔案,然後上傳到WordPress媒體庫,不過你會遇到檔案格式無法判別而無法上傳的問題...

請編輯functions.php

添加

1
2
3
4
5
6
7
8
function webp_upload_mimes( $existing_mimes ) {
// add webp to the list of mime types
$existing_mimes['webp'] = 'image/webp';

// return the array back to the function with our added mime type
return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

這樣就能順利上傳了。

接下來就是編輯文章裡的圖片語法

大概是長這樣:

1
<img src="https://blog.hahasmile.com/wp-content/uploads/2018/11/logo.jpg" alt="hahasmile" width="100" height="100" />

改成:

1
<picture><source srcset="https://blog.hahasmile.com/wp-content/uploads/2018/11/logo.webp" type="image/webp" /><img src="https://blog.hahasmile.com/wp-content/uploads/2018/11/logo.jpg" alt="hahasmile" width="100" height="100" /></picture>

如果還是無法顯示webp圖片可以試試在所用網域根目錄下添加.htaccess

用來告訴瀏覽器若有webp圖檔就顯示,若沒有才顯示jpg或png

什麼是WebP圖片格式及如何使用在WordPress
什麼是WebP圖片格式及如何使用在WordPress
1
2
3
4
5
6
7
8
9
10
11
12
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

jpg與webp檔案大小差異

什麼是WebP圖片格式及如何使用在WordPress

參考:
https://www.wpexplorer.com/webp-files-wordpress/
https://gulshankumar.net/how-to-serve-webp-format-images-in-wordpress/

關於作者 多力哥
什麼是WebP圖片格式及如何使用在WordPress
影像創作攝影師/網頁動畫設計師/系統網路工程師/水草研究生
景文科大畢業後,我成為一名網站動畫設計師,並副修MIS電腦資訊管理。2004年,我開始接觸單眼相機,並在2008年正式成為一名接案攝影師,目前使用Canon系統進行拍攝。2016年,我愛上了美麗的水草缸,這讓我的生活多了另一層次的放鬆。每天在電腦前修圖時,能欣賞紅吱吱、綠油油的水草,彷彿多了一份平靜與愉悅。攝影與水草讓我的生活充滿了藝術與自然的交融。
連絡信箱:hello@hahasmile.com (歡迎合作提案)
DORIGO IMAGE 攝影工作室:https://dorigo-image.com
如果你喜歡我的內容,可以用行動贊助我一杯咖啡☕,支持我持續創作,也讓這個網站可以繼續營運下去喔!

若您喜歡這篇文章,歡迎按讚分享喔!
0 回復

發表評論

想要留言嗎?
歡迎歡迎!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *