WordPress 支持 WebP格式圖片上傳方法

WebP 簡介

WebP（發音：weppy）是一種同時提供了有損壓縮與無損壓縮（可逆壓縮）的圖片文件格式，派生自影像編碼格式VP8，被認爲是WebM多媒體格式的姊妹項目，是由Google在購買On2 Technologies後發展出來，以BSD授權條款發佈。

WebP最初在2010年發佈，目標是減少文件大小，但達到和JPEG格式相同的圖片質量，希望能夠減少圖片檔在網絡上的發送時間。2011年11月8日，Google開始讓WebP支持無損壓縮和透明色（alpha通道）的功能，而在2012年8月16日的參考實做libwebp 0.2.0中正式支持。根據Google較早的測試，WebP的無損壓縮比網絡上找到的PNG檔少了45%的文件大小，即使這些PNG檔在使用pngcrush和PNGOUT處理過，WebP還是可以減少28%的文件大小。

WebP支持的像素最大數量是16383x16383。有損壓縮的WebP僅支持8-bit的YUV 4:2:0格式。而無損壓縮（可逆壓縮）的WebP支持VP8L編碼與8-bit之ARGB色彩空間。又無論是有損或無損壓縮皆支持Alpha透明通道、ICC色彩配置、XMP詮釋數據。

WebP有靜態與動態兩種模式。動態WebP（Animated WebP）支持有損與無損壓縮、ICC色彩配置、XMP詮釋數據、Alpha透明通道。

WebP的有損壓縮算法是基於VP8視頻格式的幀內編碼，並以RIFF作爲容器格式。因此，它是一個具有八位色彩深度和以1:2的比例進行色度子採樣的亮度-色度模型（YCbCr4:2:0）的基於塊的轉換方案。不含內容的情況下，RIFF容器要求只需20字節的開銷，依然能保存額外的元數據(metadata)。WebP圖像的邊長限制爲16383像素。

從上面的介紹可以看出，WebP是谷歌推出的一種圖片格式，它的優點就是同等畫面質量下，體積比jpg、png這些少了28%甚至45％，這也意味着使用webp可以使圖片體積更小從而達到極大提升圖片加載速度的效果，並且也能降低服務器帶寬和流量成本。

簡單來說就是2個方面的好處：

1）用戶體驗：更少的加載時間，減少等待；

2）節約成本：更少的帶寬、流量，節省建站成本

本文轉自米撲博客：WordPress 支持 WebP格式圖片上傳方法

 

實際效果如何呢？下面以JustNews主題演示站爲例進行測試，效果如圖：

如圖所示，開啓webp前圖片大小4.5M，開啓後只有2.3M，幾乎減少了一半，效果非常明顯。

 

做過一個測試，對比 PNG 原圖、PNG 無損壓縮、PNG 轉 WebP（無損）、PNG 轉 WebP（有損）的壓縮效果：

 

WebP 兼容性

既然webp這麼好，爲什麼沒有大範圍使用呢？

這是因爲webp畢竟只是谷歌自己推出的，主要應用在谷歌自己的chrome瀏覽器和安卓系統，所以是存在兼容性問題的

如果使用不兼容的瀏覽器打開是無法顯示webp圖片的，有興趣的話可以看下webp在caniuse上的兼容情況：https://caniuse.com/#search=webp

上圖右上角圈起來的數字，顯示全球瀏覽器份額情況統計是有 80.53% 是支持的，

並且這麼優秀的圖片格式已經被越來越多的瀏覽器和設備兼容，這是大勢所趨，

所以我們認爲這個兼容問題是有必要找到解決方案的。

 

WordPress 支持 WebP

在瀏覽器支持方面，現在主流的瀏覽器也都支持WebP格式，況且像微信公衆號這樣的大平臺早已開始使用WebP圖片，因此沒有理由不將自己的博客（例如：米撲博客）的插圖換成WebP了。

默認情況下，WordPress不支持上傳WebP格式的圖片，在主題的functions.php裏添加以下代碼即可：

1 2 3 4 5

function mimvp_filter_mime_types( $array ) {     $array['webp'] = 'image/webp';     return $array; } add_filter( 'mime_types', 'mimvp_filter_mime_types', 10, 1 );

 

雖然現在已經可以上傳WebP格式的圖片了，但在媒體列表中看不到縮略圖，這是因爲WordPress在用wp_generate_attachment_metadata()函數生成圖片數據時，使用了file_is_displayable_image()函數判斷文件是否爲圖片，判斷WebP圖片的結果爲否，因此中斷了保存圖片數據的操作。

解決辦法是在主題的functions.php裏添加以下代碼：

1 2 3 4 5 6 7 8

function mimvp_file_is_displayable_image($result, $path) {     $info = @getimagesize( $path );     if($info['mime'] == 'image/webp') {         $result = true;     }     return $result; } add_filter( 'file_is_displayable_image', 'mimvp_file_is_displayable_image', 10, 2 );

 

在這之後上傳WebP格式圖片，顯示WebP格式圖片，都不會再有問題了

1）WebP 靜態圖

2）WebP 動態圖

 

WordPress 雖然現在支持WebP格式圖片了，但之前已經上傳的其他格式的圖片（例如：.png, .jpeg, .gif）要替換爲WebP格式還是比較麻煩，分享一下我的解決過程：

1）其它格式圖片轉換成 WebP格式

使用“Ubuntu下批量轉換WebP格式圖形工具”將wp-content/uploads目錄中的圖片全部轉換爲WebP格式，如果你是Windows系統，可以搜索一下相應的轉換工具；

2）修改數據庫的圖片

編寫了一小段腳本讀取數據庫中所有的圖片，使用wp_update_attachment_metadata()函數更新這些圖片的數據；

3）Gedit編輯器正則表達式替換wp_postmeta表中meta_key爲_wp_attached_file的圖片名稱，可以看到這個表中meta_key爲_wp_attachment_metadata對應的數據已經在第2步中替換了；

4）Gedit編輯器正則表達式替換文章數據表中插入的圖片鏈接；