ゆきしょう 
はじめに：コードは完璧なのに動かない？
「文法は合っている。パスも合っている。なのに、スマホで見てもPC用の画像のまま切り替わらない……」
Web制作の現場で、こんな現象に遭遇したことはありませんか？
今回は、私が実際に直面した <picture> タグのトラブルと、それを解決するまでのデバッグ記録をシェアします。
結論から言うと、犯人はコードのミスでもCSSの干渉でもなく、WordPressのプラグインでした。
1. 問題の状況：スマホで画像が変わらない
やりたかったことはシンプルです。
レスポンシブ対応のために、<picture> タグを使ってPCとスマホで画像を出し分けること。
書いたコードはこちら。
HTML
<picture>
<source srcset="<?php echo get_theme_file_uri(); ?>/images/top-company-sp.webp" media="(max-width: 768px)">
<img src="<?php echo get_theme_file_uri(); ?>/images/top-company.webp" alt="現場風景">
</picture>
しかし、ブラウザ（Chrome）で確認すると、どれだけ画面を狭くしてもPC用の画像が表示され続けるのです。
「検証ツール」でウィンドウ幅をスマホサイズにしても、画像は変わりません。
2. 調査開始：疑った3つ
一つずつ可能性を潰していきました。
疑い①：初歩的なミス
- ファイルパスは合っているか？ → OK
- 拡張子（.webp）は正しいか？ → OK
- ブラウザのキャッシュか？ → スーパーリロードしても ダメ
疑い②：JavaScriptのエラー
コンソールを見ると、パララックス（視差効果）用のJSファイルでエラーが出ていました。
Uncaught TypeError: Cannot read properties of null...
「これが原因か！？」と思いましたが、よく調べるとこれは「該当の要素がないページでもJSが動こうとしていた」という別のエラー。
これを直しても、肝心の画像は切り替わりません。
疑い③：アニメーション（GSAP）との干渉
次に疑ったのは、リッチな動きをつけるアニメーションライブラリ（GSAP）です。
「JSが勝手にスタイルを書き換えて、画像の切り替えを邪魔しているのでは？」と考えましたが、JSを無効化しても現象は変わらず。
ここで行き詰まりました。
3. 解決の糸口：「検証ツール」の小さな違和感
「トップページでは動くのに、下層ページでのみ動かない」という事実に気づき、ブラウザのデベロッパーツール（検証ツール）を徹底的に見比べた時でした。
動かないページのソースコードに、決定的な証拠が見つかりました。
▼ 検証ツールの表示
HTML
<source data-srcset=".../top-company-sp.webp" media="(max-width: 768px)">
お気づきでしょうか？
本来 srcset とあるべき場所が、data-srcset という名前に書き換わっています。
4. 真犯人は「Lazy Load（遅延読み込み）」
犯人はWordPressのプラグインによる「画像の遅延読み込み（Lazy Load）」機能でした。
何が起きていたのか？
- 高速化プラグインが「画像は後で読み込もう」とお節介を焼く。
<source>タグのsrcset属性を、一時的にdata-srcsetに書き換えて隠す。- ブラウザは
srcsetが見当たらないため、「スマホ用の指定はないんだな」と判断。 - 結果、フォールバック用の
<img>タグ（PC画像）が表示されてしまう。
通常はスクロールするとJSが働いて元に戻るはずですが、<picture> タグの構造や他のスクリプトとのタイミングによって、うまく復元されていなかったのです。
5. 要注意！この現象を引き起こすプラグイン一覧
この現象は、「Lazy Load（遅延読み込み）」機能を持つ以下のプラグインを入れている場合に発生する可能性があります。
もし同じ症状で悩んでいる方は、以下のプラグインの設定画面を確認してみてください。
- Autoptimize（今回の真犯人！）
- EWWW Image Optimizer
- Smush
- Jetpack
- A3 Lazy Load
これらのプラグインは非常に便利ですが、設定次第で <picture> タグのような標準的なコードと干渉してしまうことがあります。
6. 解決策：Autoptimizeの設定変更
私の環境では、「Autoptimize」の設定を見直すことで一発で解決しました。
具体的な手順
- WordPress管理画面から [設定] > [Autoptimize] を開く。
- [画像] タブをクリック。
- 「画像の遅延読み込み（Lazy-load images）」 のチェックを外す。
- ※または、除外設定（Lazy-load exclusion）クラスに、画像のクラス名を追加する。
これで、勝手に data-srcset に書き換わることがなくなり、スマホできれいに画像が切り替わるようになりました！
まとめ
今回のトラブルシューティングで得た教訓はこれです。
- 「書いたコード」と「動いているコード」は違うエディタ上のコードが正しくても、ブラウザ上でプラグインによって書き換えられていることがあります。
必ず「検証ツール」で最終結果を確認しましょう。 - 属性名の変化に注目する
srcがdata-srcに、srcsetがdata-srcsetになっていたら、それは遅延読み込みの仕業です。 - Autoptimizeは疑え最強の高速化プラグインですが、画像周りのトラブルでは真っ先に設定を確認しましょう。
もし、WordPressで <picture> タグが動かずに悩んでいる方がいたら、まずは「検証ツールで data-srcset になっていないか」をチェックしてみてください！
