iPhoneでWordpressのサムネイル画像が表示されない件を解消するには？
iPhone（Safari）で先日からサムネイル画像が表示されなくなったとクライアントから指摘がありました。
PHP出力コードに自動で付く「loading="lazy"」を書き変える事で映る様になります。
SafariではLazy-Loadは未実装なのですが、先日リリースのWordpressバージョン5.9が影響している可能性があります。
iPhoneでTOP新着の画像が表示されない
本記事はクライアントのWEBサイトで起きた現象を調査・修正した報告です。
1週間ほど前から、投稿した記事のサムネイル画像がiPhoneで表示されなくなったとの事。
この様に中がくりぬかれた状態になります。
逆にiPadやPC（Google Chromeなど）では表示されている様です。
iPhone側の原因ではないはず
表示されていない事に1週間ほど前から気づいた（クライアントが）という事で、まずはiPhone（Safari）が原因の可能性を考えます。
例えばOSのバージョンアップでしょう。
iosのバージョンアップが原因？
もしこれがiPhoneのバージョンアップによるものであれば、何かしらユーザー側で設定する必要性も出てきます。
これだとWEBサイト側では対処のしようがありませんからね。
しかし現時点で私のiPhoneでもサムネイルが見えていませんから、iPhone側のせいばかりにしてはいられません。
ですのでそういった記事が無いかどうか調べてみました。
画像名が日本語の場合
「Wordpress サムネイル表示されない iphone」で検索して一番最初にヒットしたサイトを確認してみます。
そこに書いてあったのは、画像ファイル名が「日本語」の場合である事でした。
日本語ファイルはSafariで表示されない事がある
日本語のままWordpressのメディアに保存されたファイルは、Safariでは表示してくれない時があるそうです。
ただし濁点を用いていなければ問題ないとも記載がありました。
WP Multibyte Path
そこで画像名を確認してみましたが、大文字アルファベットは使われているものの日本語ではありません。
記事では「WP Multibyte Path」プラグインを入れる解決法が記述されていました。
日本語表記に対応する基本プラグインですね。
ですので一応このプラグインが有効になっているかだけ確認して終了です。
半角英数字へ変換する別プラグイン
ちなみにその記事では、アップロード済みファイルを日本語から半角英数字に変換する必要があるとも書いてあります。
専用のプラグインが紹介されています。
Media File Renamer
仮に日本語が影響しているのであれば、上記プラグインでUPしてきたファイルを半角英数字に変換すれば解決しますよね。
さらに同時に生成された数種類の「各サイズ向け画像」も、以下のプラグインで上書き差替えができます。
Enable Media Replace
今回は繰り返しますが、ファイル名が日本語ではないためこのプラグインは導入しないまま調査を進めます。
投稿画像の拡張子「.jpeg」
調査の中で、クライアントが投稿された画像の拡張子が「jpeg」である事に気づきました。
普通「.jpg」（3文字）ですよね。もちろん両者がほぼ同じなのは知っていますが、クライアントの投稿画像はほとんどがjpegです。
もちろん今まではjpegで何も問題は無かったはずですから、となればやはりiPhone側がjpegに反応しなくなったのか？と思ってしまいます。
詳細ページのjpegは表示されている
しかしよくよく見てみると、サムネイルをタップして開いた記事詳細ページでも同様のjpegが使われており、それらはきちんと映っています。
もしiPhone側に何かあったのなら、詳細ページの画像も映りませんよね。
ですので.jpeg問題は却下となりました。
画像遅延表示loading="lazy"が原因
サムネイルと記事内で同じ画像が使われているのにサムネイルだけ見えない事を受け、ソース内をじっくり観察しました。
サムネイルは、the_post_thumbnail('thumbnail')で出力させていますが、出力ソースに以下の記述を見つけました。
loading="lazy"
同時に先ほどの「Wordpress サムネイル表示されない iphone」のサイトを順に調べていきます。
何件目かに「SafariでWordPressの画像が表示されない時の対処法」というサイトがありました。
ここでも「lazy-load」に関する事が書いてあります。
もしかしてこれじゃないの？期待が膨らみます。
loading="lazy"をloading="eager"へ
結論から言いますと、今回はこの「loading="lazy"」部分を書き変える事で解決しました。
iPhoneで確認してもサムネイルがきちんと表示されています。
このlazy-loadによる遅延行為が影響していたようですね。
サムネイルの出力
画像のサムネイルはphpの新着情報の出力で以下の様に記述しています。
<?php the_post_thumbnail('thumbnail'); ?>
上記の出力コードでは、画像のURLの後ろに自動的にloading="lazy"と付くようになっています。
そこでこれを以下の様に書き変えてみます。
<?php the_post_thumbnail('thumbnail', array('loading' => 'eager' ) ); ?>
これで出力コードのimgタグ記述部分はloading="eager"となり、遅延読み込みがされなくなります。
HTMLソース
iPhoneで確認したところ、サムネイルがバッチリ映る様になりました。
WordpressのLazy-Load実装経緯
Lazy-Loadとは
Lazy-Loadとは「遅延読み込み」の意味で、画面上に表示するまで読み込みを遅らせる処理のことです。
WEBページを開いた時ページ下まで全ての画像を一気に読み込むと、ファイルサイズが大きい場合は読み込みに時間が掛かります。
「表示速度が速い事」はCore web vitalの「LCP」要素として、WEBサイトの価値判断の一つになっていますよね。
見える範囲に着目したアイデア
そもそも一気に画像を読む必要は無いのです。最初に開いたページ範囲だけでまずは十分な訳です。
スクロール時に徐々に読込し、速度を遅延させない様にするための仕組みがLazy-Loadです。
素晴らしいアイデアですよね。
Wordpress5.5からLazy-Loadが正式導入
Lazy-Loadプラグインを別途導入している人もいましたが、Wordpressのバージョン5.5からこのLazy-Loadがデフォルトで搭載されています。
5.5リリース後は画像やiframeの出力コードに自動でLazy-Loadが付くので、表示速度UPに貢献していました。
Wordpress5.9で改良
ところがその後の調査により、以下のケースで読み込み速度が逆に低下することが明らかになっていました。
・ページを開いた時の最初の画像が映らない
・iframe部分の読込がされない
これを受けて、2個目の画像からLazy-Loadが適用されるように改良される事が決まりました。
その改良版であるバージョン5.9が、2022年1月25日にリリースされています。
iPhoneはLazy-Loadに対応していない
実はまだiPhoneなどのSafariブラウザで、Lazy-Loadは未対応の状態です。
ios16で実装されるのではないかと予想されていますが、今のところまだ未確定情報ですね。
iPhoneがLazy-Loadに対応してくれれば、先ほどのサムネイル出力コードは元に戻してもよい訳です…ってあれ？
iPhoneはLazy-Loadに対して未反応じゃないの？
まとめ
実のところを言うと今回の原因はよくわかりません。
クライアントのサイトは開設時には既に5.5以降のバージョンでした。
つまり最初からこのLazy-Loadが適用されていたはずです。
Safariが未実装のLazy-Loadに反応
そもそもSafariはLazy-Load未実装ですから、遅延効果が発揮されないので画像は映っていたはず。
しかし先方いわく、iPhoneでサムネイルが表示されなくなったのは1週間前からとの事。
実際にiPhoneで画像は消えており、loading="lazy"を消した事で映る様になったという現実があります。
未実装なのであればloading="lazy"の記述自体が無効なので、消す必要が無いはずですからね。
Safariがバージョン5.9が導入された事に何かしら反応している事になりますね。
新着情報をタブ形式でスライドできることが影響か
もしSafariが5.9のLazy-Loadに反応しているとしたら、もう一つ考えられる事があります。
今回の対象サイトの新着情報はPC番だと3列横並びしているのですが、スマホ版は1件だけ表示です。
それを横にフリックすると2件目・3件目とスライドしてくる仕様にしています。
もしかしたらこれが、5.9の「2枚目画像から遅延させる効果」と何かしら影響しているのかも知れません。
画面上に出現する2枚目画像が、このサイトでは下からでなく横方向から出てくるからですね。
