当サイトで、4K（Retina）ディスプレイ用の画像トラブルが発生しました。
一般的に言う画像抜け、画像落ちですね 😥
まずはこちらの証拠の写真をどうぞ。
これはiPhoneのスクリーンショットで撮った証拠画像です。
上から2つ目の画像が抜けて、代替テキストが表示されています。
このように画像が表示されず、代替テキストが表示されればまだ幸い。
他にも何も表示されず真っ白になる画像落ちもあります。
ただ、この症状、Retinaディスプレイ以外のモニターでは発生しません。
なぜ、Retinaディスプレイのみの発生なのでしょうか？
今回はこのトラブルについてご紹介します。
Retinaディスプレイ画像のトラブル条件を絞ってみる
まずは、 どのようなタイミングと条件で起きているのかを探ってみます。
色々と見直してみたところ、下記の様な事が分かりました。
☆発生タイミング
朝、昼、夜、夜中でもいつでも発生する。
逆に、朝、昼、夜、夜中に発生しないこともある。
発生の確率は50％以下ほど。
☆通信条件は？
当サイトは4Kディスプレイ動作確認は、iPad mini2かiPhone5sでやっています。
LANの環境は、ブロードバンドとWi-Fi（無線LAN）で組んでいます。
通信速度は10Mbps（実測値）なので、回線に問題ないですね。
iPhone5sでは、テザリングでの動作検証も行っています。
このときも画像抜け、画像落ちは発生したりしなかったり…
通信速度の問題ではないようです。
☆Retinaディスプレイ対応機器
当サイトは検証は先ほど紹介したようにiPad mini2かiPhone5sでやっています。
これもiPad mini2のみでもなく、iPhone5sだけでもない。
どちらで発生するかはまったくランダム。
こちらも絞り込みになりません。
☆WordPressのVersion
この時点ではWordPress4.1（2015年1月）が最新版。
問題ありません。
☆retina.jsのVersion
こちらもretina-1.3.0（2015年1月）が最新版。
これも問題ありません。
…どこに原因があるのかわからなくなってきました。
retina.jsを検証する別サイトを立ち上げてみる
このサイトを最初に立ち上げた時に使ったサーバーがあります。
ここに残っていた別サイトを利用して、同じページを３つコピーして検証をはじめました。
一週間ほど様子見れば何かわかるかな？程度で、今回はのんびりムードでした。
そのおかげか、ひとつの特徴に気がつきました。
- 画像抜け、画像落ちがはじまるとページ更新で90％以上の確率で再発する。
- 発生するのは小さな画像ばかり。
- rerina.js特有の２重読み込みの１回目の読み込みは問題無し（Retina非対応画像）だが、２回目の読み込みで発生する。
- 画像落ちする小さな画像はいつも同じではない。１枚画像抜け、画像落ちが発生するかと思えば次は２枚、その次は１枚、その次は4枚など。
- 復旧するタイミングは不明。
この状況からわかったのは
・サイズの小さな画像で
・retina.jsの２回目の読み込み時に発生すると判明。
ここまで絞り込んだので、次は何か違う方法でRetina画像を配置して検証してみることにします。
img要素srcset属性で切り分けしてみる
現在はRetina.jsを使用する為に、2種類の画像を作成して同じフォルダーに保存しています。
他の方法がないかと色々調べたところ、タグの打ちこみでRetina対応が可能な情報を発見しました。
参考にさせてもらったKIA KINGさんのサイト
こちらのサイトさんの情報が使えそうだったので、早速試してみました。
画像ファイルをgazousmall.jpg と gazoubig.jpgで説明します。
（ココでは@2xの表現を使いません。タグだと@2xは必要ないからです）
WordPressですと、<メディアを追加>より画像を挿入するとこのコードになります。
src=”http://あなたのドメイン/wp-content/uploads/2015/01/gazousmall.jpg
写真が表示できない場合のテキスト表示
ココにsrcsetのコードを追加します。
<imgsrc="https://あなたのドメイン/wp-content/uploads/2015/01/gazousmall.jpg" srcset="あなたのドメイン/wp-content/uploads/2015/01/gazousmall.jpg 1x,あなたのドメイン/wp-content/uploads/2015/01/gazoubig.jpg 2x" alt="写真が表示できない場合のテキスト表示>
検証再開です。
さて、何日で結果がでるかな。
……………・
結果は予想を裏切って早かった！
結果まで一日かかりませんでした。
意外にもあっさりと結果がでました。
今回の検証の結果、retina.jsで小さい画像を何枚も同時に読み込みにいくと、画像抜け・画像落ちが発生することがわかりました。
参考値：150×150pixelくらいまでの小さめの画像を10枚以上同時に読みこみ、なおかつRetina画像を読み込む２回目に発生する。
Retina非対応のディスプレイでは発生しない。（2015年1月 Retina専用素材プラス調べ）
上記の事が判明しました。
取りあえず、一山は越えました。
では次に、解決策を考えましょう！ 😕
Retinaディスプレイハイブリッドで解決
解決したのは、レティナディスプレイハイブリッド(RetinaDisplayHibrid)でした。
ちなみにこんな言葉はありません。私が勝手にそう呼んでいます（^^）
解決後の証拠写真をどうぞ。
先ほど落ちていた上から2枚目の画像、きちんと表示されていますね。
さて、どうやって解決させたか？
当サイトではこのようなルールを作りました。
- 150pixel以下の画像はimag要素srcset属性でコード（タグ）を書く。
- 151pixel以上の画像はretina.jsで切り分ける。
- 画像ファイル150pixel以下はgazou1.jpgとgazou2.jpgにする。
- 画像ファイル151pixel以上はgazou.jpgとgazou@2x.jpgにする。
画像を同じファイルにアップロードするためにこのようなルールにしました。
当サイトの場合、無料素材のメニューページでは、150pixel以下の小さな画像をサムネイルとして使っています。
画像抜けするのは、決まってこのサムネイルなんですね。
これではメニューの意味を成さないので、少々手間ではありますが、「Retina.js」を使いながらsrcset属性のコード（タグ）を書いています。
これで2重に対策しているので、滅多な事では落ちません。
4K（Retina）対応方法を紹介しているサイトで画像落ちするなんて、かっこ悪くて恥ずかしいですからね。
それに、このトラブルは小さな画像をたくさん並べている時に発生するので、一般的なサイトやブログで発生するのは稀だと思います。
一つの記事に300pixel以上の画像を5~6枚使っても問題はないと思います。
実際、画像簡単講座では、400×300pixelの画像を1記事に10枚くらい使っていますが、今のところ画像抜けしているのを見た事はありません。
今回の記事のまとめ
Retina.jsの設定
Retina.jsのスクリプトはこちらから → 公式サイト
Retina.jsでは画像を２種類用意します。
gazou.jpg（小）とgazou@2x.jpg（大）
</body>の直前に<script type=”text/javascript” src=”/scripts/retina.js”></script>を挿入します。
retina.jsファイルをftpソフトでアップロードします。
詳しくはWordPressをRetinaディスプレイ対応に変更する【9つの決まり事】の記事でどうぞ。
img要素srcset属性の設定
画像を２種類用意します。
gazou1.jpg（小）とgazou2.jpg（大）
srcsetを追加してコードを作成します。
<imgsrc="https://あなたのドメイン/wp-content/uploads/2015/01/gazousmall.jpg" srcset="あなたのドメイン/wp-content/uploads/2015/01/gazousmall.jpg 1x,あなたのドメイン/wp-content/uploads/2015/01/gazoubig.jpg 2x" alt="写真が表示できない場合のテキスト表示>
詳しくはこの記事の中頃の「imag要素srcset属性で切り分けしてみる」をご覧ください。
わからない点や不明な点は問い合わせください。
別サイトでワードプレス講座開催中。
