什麼是WebP圖片格式及如何使用在WordPress
目前，Google Chrome，Opera，Mozilla Firefox，Microsoft Edge和一些Android瀏覽器都支持圖片的WebP格式。
根據Google Analytics報告，有超過50%的人使用這些支持的瀏覽器。
你可以到caniuse.com網站看看各家瀏覽器支援的程度。
依照我的經驗WebP的檔案大約會比jpg檔案少20%，所以會加快網站讀取的速度
因部分瀏覽器還是沒支援WebP，所以圖片會以兩個格式存在
使用者的瀏覽器會自動抓取可以讀的圖片格式
以下是步驟：
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
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檔案大小差異
參考：
https://www.wpexplorer.com/webp-files-wordpress/
https://gulshankumar.net/how-to-serve-webp-format-images-in-wordpress/
發表評論
想要留言嗎？歡迎歡迎！