記事にwebpを埋め込む…noteからwordpressへ画像ファイル移行の落とし穴3（pictureタグ・EWWW Image Optimizer）

前回EWWW Image Optimizerを導入しましたが、そのままだとWordpressで作ったWebページの中にwebpが埋め込まれていないと思います。

じょし

直接webpをアップしたら解決したよっ！

それだと実は不十分なのです。今回はその辺りをご紹介します。
今回の内容は後から設定しても問題ありませんので、余裕のある時に設定すると良いでしょう。

webp直アップの問題点と解決策

管理画面の「メディア」から直接webpをアップすると、Webページにはimgタグを使って画像が埋め込まれます。この状態だとwebp対応としては不十分です。

世の中にはwebp形式非対応の古いOSやブラウザを使っている方がいて、彼らがwebページにアクセスすると画像が表示されないという事象が発生します。

めがね

少数派でしょ？無視でいいよ

その判断もありでしょう。プラグインを設定すれば運用コストもかからないのでオススメです。

解決策はpictureタグ

今回やりたいのは、「webp形式非対応ブラウザの場合はjpegかpngを表示させる」という方法です。
これを実現するためにはimgタグではなくpictureタグを使います。
EWWW Image Optimizerの中にはimgタグを適切なpictureタグをつかってwebpを記事に埋め込む設定があるので、以下でご紹介します。

EWWW Image Optimizerのpictureタグ設定

pictureタグをつかってwebpを記事に埋め込む設定ためには以下の設定を行います。

Webpの配信方法＞PictureWebpリライトをON
.htaccessへの追記

Webpの配信方法＞PictureWebpリライト

必須タブの「Webpの配信方法＞PictureWebpリライト」の設定をONにします。
この項目をONにするとimgタグがpictureタグに書き換えられます。

また、ONにした後、同じ画面に以下のような文字列が表示されると思います。

# BEGIN EWWWIO
# "BEGIN EWWWIO" から "END EWWWIO" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(jpe?g|png|gif)$">
Header append Vary Accept
</FilesMatch>
</IfModule>
AddType image/webp .webp
# END EWWWIO

これを.htaccessに追記します。

.htaccessとは

ミドルウェアの設定を上書きするための設定ファイルです。
.htaccessの適用範囲は設置ディレクトリの配下です。
サーバー構築後にディレクトリ毎に細かく設定変更したくなった場合に.htaccessを置くのが通例です。
WordPressでもいろんなディレクトリに.htaccessが置いてあります。

画面に表示されたのは、”サーバー側で動的に生成されるhtml内の画像ファイル名”を書き換えるための.htaccess設定用の記述です。
前回ご紹介したwebp変換設定をONにすると、”[元のファイル名].[元の拡張子].webp“というファイル名で画像を複製しています。
これに合わせた.htaccessの設定を、EWWW Image Optimizerでは画面に表示してくれるのです。