この記事では、Googleが開発した画像形式であるWebPについて紹介し、使うメリットやWordPressで使う方法を解説していきます。
WebPとは？
WebPとは、Googleが開発した新しい画像形式です。
可逆圧縮と非可逆圧縮に優れている特徴があります。
Googleによると、非可逆圧縮したWebP画像はPNGと比較して26%画像サイズが小さく、可逆圧縮したWebP画像はJPGと比較して最大34%画像サイズが小さくなったと伝えています。
つまりWebPを利用すれば、従来利用していたJPGやPNGよりも画像をより小さなサイズで扱うことができるということです。
WebPを使うメリット
JPGやPNGよりも画像サイズを小さくできることで、画像の読み込みが速くなりウェブサイトのパフォーマンスが向上します。
画像の読み込みが速くなることは、ウェブサイトの読者にとっても嬉しいことで、UXの向上も図ることができます。
ウェブサイトの表示が遅いサイトは、離脱してしまう可能性が高くなるからです。
WordPressでWebPを使う方法
次の2つの方法があります。
- 手動で画像変換し、アップロードを行う方法
- プラグインを利用する方法
WordPressの初期状態では、MIMEタイプでwebpは許可されていません。そのため、デフォルトの設定では利用できません。
これから紹介するいずれかの方法を利用する必要があります。
手動で画像変換し、アップロードを行う方法
この方法には、「FTPを利用して画像をアップロードする方法」と「コードスニペットを追加して、メディアライブラリからアップロードする方法」の2種類があります。
WebP画像への変換は、online-convert.comを利用して行えます。
FTPを利用する方法では、WebP画像をサーバーへアップロードしたら、imgタグでアップロードしたURLを記載します。
メディアライブラリへアップロードしたい場合は、次のコードスニペットをfunctions.phpへ記載してください。
/**
* Add webp to allowed media types
*/
function wpdocs_add_webp( $wp_get_mime_types ) {
$wp_get_mime_types['webp'] = 'image/webp';
return $wp_get_mime_types;
}
add_filter( 'mime_types', 'wpdocs_add_webp' );
このコードスニペットの記載が必要な利用は、デフォルトの設定ではMIMEタイプにwebpに対応するものがないためです。
参考：https://developer.wordpress.org/reference/hooks/mime\_types/
プラグインを利用する方法
ShortPixel Image Optimizerを利用します。
上級者向け設定からWebP画像への変換設定を有効にできます。