ホームページ制作 WordPressで画像をWebP（ウェッピー）に対応する方法

デザイングループ　山本
2022.04.21

こんにちは。

WebP（ウェッピー）は、PNGやJPEG、GIFの従来のファイル形式のメリットを持ちつつ、
見た目をほぼ変えずにファイルサイズを軽量化できる最新の画像フォーマットです。

サイトの表示スピードが上がるのでSEOにも期待できると言われています。

今回はWordPressでWebP化する設定方法や注意点を説明していくので、サイトスピード改善を検討している方はぜひ参考にしてみてください。
（※2022年3月30日時点）

フォーマット対応状況

	JPEG2000	JPG XR	WebP
Chrome	×	×	○
Safari	○	×	△
IE（Internet Explorer）	×	○	×
Edge	×	○	○
Firefox	×	×	○

上記のように、IEではWebP非対応となっています。
そのため、現時点では非対応ブラウザでの画像表示を考慮したHTMLの記述が必要となります。

IEは2022年の6月にサポートの終了が決まっており、将来的にはWebPに対応していないブラウザのサポートは不要になります。

WebPに対応するメリット・デメリット

メリット

画質を保ったまま画像サイズを軽量化できる
Webサイトの表示速度の改善につながる
SEOに好影響

デメリット

利用できる画像編集ソフトが限られている
画像を変換する手間がかかる

WordPressをWebP化する方法

主に2つの方法があります。

FTPでアップロード
プラグインを使ってアップロード

1.FTPでアップロード

1.直接WordPressの画像をWebP化してFTPにアップロードする

■XnConvert のダウンロードと使い方 – ｋ本的に無料ソフト・フリーソフト
https://www.gigafree.net/tool/encode/xnconvert.html

■Squoosh
https://squoosh.app/

■PNG・JPEGをWebP画像に一括変換｜サルワカ道具箱
https://saruwakakun.com/tools/png-jpeg-to-webp/

2.htaccessでWebPを対応させる

# WebP対応ブラウザかつWebPファイルがあればWebPファイルを返す設定
<IfModule mod_rewrite.c>
# Rewriteモジュールを有効にする
RewriteEngine On
# WebP対応ブラウザはAcceptリクエストヘッダにimage/webpを含む慣例
# その場合のみ後続のRewriteRuleを適用する
RewriteCond %{HTTP_ACCEPT} image/webp
# 対応するWebP版のファイルがある場合のみ後続のRewriteRuleを適用する
RewriteCond %{SCRIPT_FILENAME}.webp -f
# *.jpg、*.png、*.gifファイルを*.webpファイルに内部的にルーティングする(ルーティング先は$0.webpでも可)
# Content-Typeはimage/webpにする
RewriteRule .(jpe?g|png|gif)$ %{SCRIPT_FILENAME}.webp [T=image/webp]
</IfModule>
# 拡張子.webpファイルへの直接アクセスにはContent-Typeとしてimage/webpを返す設定
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
# WebPファイルがあるかもしれない画像へのリクエストは全てVary: Acceptレスポンスヘッダを返す設定(CDN対策)
# Headerディレクティブ単独ではできないのでSetEnvIfディレクティブとの組み合わせで実現する
<IfModule mod_setenvif.c>
SetEnvIf Request_URI "\.(jpe?g|png|gif)$" _image_request
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=_image_request
</IfModule>

2.プラグインを使ってアップロード

WebP対応になるプラグイン

PJW Mime Config
Disable Real MIME Check
WP Add Mime Types
EWWW Image Optimizer（オススメ）
→ https://open-cage.com/ewww-image-optimizer/
WebP Converter for Media（ ImageMagickの導入等条件が必要）
→ https://tcd-theme.com/2021/04/webp-converter-for-media.html

プラグインが対応して入れば投稿した記事が自動的にWebP画像になります。

※WordPressのバージョンが5.8以上必要です。

WebPをサポートしてないケースもあるので注意が必要
https://www.hi-demi.net/13-plesk/103-plesk_webp