WordPress で突然画像が表示されなくなってしばし困った (でも解決した)

広大な空白発生

先ほど (2022年7月24日の23時過ぎ) 公開のアナウンスを SNS に流した昔々のベリカード発掘 (16) HCJB アンデスの声ですが、実は日中に一旦書き上がっていたものの表示に不具合があって公開できずにいました。

「特に人気の高い放送局でした。」の下の広大な空白。ここに本当はベリカードの写真が入るのですが、表示されなくなってしまったのです。しかも今回公開したこのページだけでなく、あらゆるページの画像が空白になってしまいました。

最初は表示している側の問題かと思ってページをリロードしたり PC でアクセスしてみたりしましたが状況は同じ。これはサイト側に問題がある…すなわち誰が見ても画像が表示されないということではありませんか。困った！

空白部分には何が表示されている？

現象を確認するため空白部分を右クリックして「画像のアドレスをコピー」して別タブに貼り付けてみると、こんなアドレスでした。

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

見慣れないアドレスですが、どうやら 1×1 の透過 GIF のデータ URI (データそのものを URI の形にしたもの) のようです。

画像の lazy load (遅延読み込み) が悪さをしているらしい

“WordPress 画像表示されない 1×1 GIF” で検索すると、下記のページに原因につながりそうな情報が書かれていました。

SE Life Log - VBAを中心にその他IT備忘録 -

画像が表示されない！WordPressで記事の画像部分が空白になって表示されない場合の...

https://selifelog.com/blog-entry-1517.html

WordPressで記事に画像を貼り付けているにもかかわらず、記事を表示した際に画像が全く表示されずに画像部分が空白で表示されてしまう場合の原因と対処方法について覚書。画像が表...

記事に貼り付けた画像が白抜きになって表示される場合の原因としては、以下の2つが考えられます。
1. 「Lazy Load」プラグインもしくは、画像の遅延読み込みを実装するためのプラグインを使っている
2. テンプレートで「Lazy Load」と同様の機能を有効化している
画像が表示されない！WordPressで記事の画像部分が空白になって表示されない場合の原因と対処(1×1.trans.gif) – SE Life Log – VBAを中心にその他IT備忘録 –

こちらでは 1×1 の透過 GIF 画像のファイルを読み込んでいる例で説明されていますが、データ URI の場合でも同様の問題である可能性が考えられます。

プラグインをいろいろ探して原因発見

私のサイトでは “Lazy Load” プラグインは使っていませんが、他のプラグインで画像の遅延読み込みをしているものがあるかもしれない、ということで順次プラグインの設定を確認。そして見つけました。Jetpack、お前だったのか…

Jetpack の設定画面のプルダウンメニューで「パフォーマンス」を選ぶと…

いた！

オフにしてやるー

改めてページをリロードしたら…

無事画像が表示されるようになりました！

おわりに

私の場合は Jetpack が原因でしたが、サイトによって原因となるプラグインは異なる可能性があります。あくまで画像の遅延読み込みが原因で画像が表示されなくなる一例として見ていただければと思います。そしてその上で、Jetpack もそのようなケースの原因になり得るということを念頭に置いていただければ、どこかで役に立つこともあるかもしれません。