とあるWebサイトを改修したので動作確認していたところ、特定のセクションの画像が表示されない、という状況に出くわした！という話。
毎回必ず表示されないなら、画像が無い、URLが間違えている、などの原因が考えられますが、表示されたりされなかったりとなると、原因は他にありそうですが…。
コーディングした人から、こういう状況になっているので助けて！というヘルプが来たので、調べてみました。
状況を再現してみる
まず、その症状がでるページを確認してみたところ、特に問題なく全ての画像が表示されていました。
以前表示したことがあるページなので、キャッシュが効いているかもしれません。
そこでスーパーリロードしてみたところ、ページの最後の方にある特定のセクションの画像だけが表示されなくなりました。
スーパーリロードというのは、ShiftキーとCtrlキーを押しながらRキーを押すか、Ctrlキーを押しながらF5キーを押すか、Ctrlキーを押しながらブラウザのリロードボタンをクリックします。キャッシュを読み込まずに、全ての情報を読み込み直すときに使用します。
ただ、画像が表示されない状況でブラウザのサイズをちょっとでも変更すると、正常に表示されるようになるんですよね。そして、一度でも表示されてしまうと、リロードしても大丈夫。でも、スーパーリロードするとダメ。
いくつかのブラウザで確認してみたところ、Chrome、Opera、Vivaldi、Braveでは画像が表示されない、という状況が再現。FirefoxとEdgeだけは再現しませんでした。
ソースを確認
次にソースを確認すると、画像が表示されない部分は全て、以下のように記述されていました。ファイル名やサイズ等は書き換えています。
<img src="aaaa.jpg" srcset="aaaa_200.jpg 2x" alt="message" loading="lazy">やりたいことはRetina対応で、通常はaaaa.jpg、Retinaではaaaa_200.jpgを表示したかったようです。そして、それを遅延読み込みさせようと。
しかし、この指定には問題がありました。
問題点
ひとつめの問題点は、srcset属性で1xに相当する画像の指定が抜けていること。
通常、srcset属性に対応しているブラウザでは、srcset属性が指定されている時はsrc属性を見ません。なので、上記の場合はaaaa.jpgは読み込まれず、aaaa_200.jpgが読み込まれてしまいます。
でも、これは画像が表示されない原因ではなさそうです。
ふたつめの問題点は、遅延読み込みさせるためにloading属性でlazyを指定していること。
srcset属性とlazyの併用は問題があり（併用の問題については割愛）、遅延読み込みどころか、画像が表示されなくなってしまうことがあるようです。今回はこれが原因でした。
解決編
srcsetには1x時に表示する画像も設定し、遅延読み込みを外したことで、解決しました。変更後のソースはこんな感じ。
<img src="aaaa.jpg" srcset="aaaa.jpg, aaaa_200.jpg 2x" alt="message">標準ではaaaa.jpgを表示し、Ratinaなど倍率が2倍以上の環境ではaaaa_200.jpgを表示します。
ちなみに、上記のように2xなどの書き方をする場合は、sizes属性でメディアクエリを使わないよう注意です。混ぜるなキケン。
さいごに
ということで、特定のセクションの画像だけが表示されなくなってしまうことがある、という問題を解決してみました。
今回は、問題が発生したセクションだけがsrcset属性を使用していたために、「特定の画像だけが表示されないことがある」という状況でした。
多少語弊があるかもしれませんが、「srcset属性とlazyは相性が悪いので併用しない」ということを覚えておけば、このような問題は発生しないのではないかと思います。
今日の作業は以上です。お疲れ様でした！
コメント