Webサイトを作っていて、<picture>による画像の切り替えが機能しなくなりました。
原因を探ったところ、プラグイン「EWWW Image Optimizer」が画像処理を行う中で<picture>の処理より優先していることが分かりました。
この記事では
- pictureタブの切り替えが出来なくなったときの対処法
- EWWW Image Optimizerプラグインの設定方法
についてまとめています。
目次
画像の切り替えを有効化する3つの方法
<picture>の機能を有効化させるためには3つの方法があります
- プラグインを無効化
- 該当箇所を除外する
- Webp配信方法の見直し
まずはプラグインを無効化してpictureタブが有効に機能するかをチェックしましょう。
その後、EWWW Image Optimizerがpictureタブの機能を邪魔しているとわかったらプラグインの設定を行います。
設定方法1:Lazy Load(遅延読み込み)の除外
WordPressのダッシュボードより
設定→EWWW Image Optimizer→必須→遅延読み込み→除外
を開きます。
除外の欄に
picture
(対象のクラス名)を記入すると、Lazy Load処理が<picture>にかからなくなり切り替えが改善する場合があります。
設定方法2:Webp配信方法の見直し
上記の方法で直らなければ、Webp配信方法を見直しましょう。
- .htaccess(mod_rewrite)方式は<picture>と競合しやすい
- Javascript方式→<picture>と併用しやすい
WordPress管理画面から
EWWW Image Optimizer設定→Webpの配信方法→JS Webpリライト
を選択しましょう。
表示するページでスーパーリロード(⌘＋シフト＋R)(Ctrl＋シフト＋R)を行います。
ことの発端
サイト制作中、サイトの表示速度を上げるためにEWWW Image Optimizerプラグインを導入したいと申し込みがあり、画像データをwebpに変換するだけだと思い軽い気持ちでOKを出しました。
プラグインを導入した直後、ファーストビューの画像切替が行われないトラブルが発生…。なぜ…。
- オリジナルテーマを使っている
- 一部コードを使って表示をしている
そんな場合はプラグインを無効化して様子を見てみましょう！
pictureタブが切り替わらない原因
私がよく使う<picture>は以下はこんな感じです。
<picture>
<source srcset="images/sp.webp" media="(max-width: 768px)" />
<img src="images/pc.webp" alt="" />
</picture><picture> タグは「画面サイズによってどの画像を出すか」をブラウザが判断します。
一方で、EWWW Image Optimizerの .htaccess ルールは
- ブラウザがWebPに対応している
- 画像のWebP版が存在する
この条件が揃うと、JPEGやPNGを自動的にWebPに差し替えます。
結果として、ブラウザの条件分岐（max-width）とEWWWの強制変換が衝突し、<source> の切り替えが効かないという状況が起こるのですね。
まとめ
EWWW Image Optimizerはサイトを軽くする便利なプラグインですが、導入時は少し注意が必要です。
- プラグイン導入後は、
<picture>タグの画像切替が正しく動作するか必ず確認する - 不具合が出たらまずプラグインを無効化して検証
- 直らなければ Lazy Load除外 や WebP配信方式の変更 を試す
特にオリジナルテーマや独自コードを使っている場合は、EWWWの自動変換と相性が悪いケースがあるので気をつけましょう！
また、今回の原因は「EWWW Image Optimizerが画像処理を行う中で、<picture> タグの切り替え処理より優先してWebPへの差し替えを行っていた」ことでした。
そのため、もしテーマ側ですでに <picture> を自分で組んで管理したいなら、思い切って WebP配信自体をオフにして、変換だけEWWWに任せる のもひとつの選択肢です。
最後までご覧いただきありがとうございました。
