retina.jsで画像が表示されないときの対処法

以前Retinaディスプレイ対策で使用したretina.js

スマホやタブレットで画像がぼやけるときの対処法

通常の画像と@2xの画像を用意しておけば勝手に切り替わってくれて便利なのですが、一部のディスプレイで表示されない現象がありました。スマホで確認していたときは大丈夫だったのにiPadで確認したら一部の画像でなぜか落ちる。。でも同じく利用している別のサイトでは大丈夫だったりする。。

参考サイト

Retinaディスプレイで確認すると画像が表示しないトラブルの対応

対処法：srcset属性を使って直接記述

imgタグのsrcset属性を利用すれば解決するようです。HTML5からの新属性。

<img src="img/sample.jpg" srcset="img/sample.jpg 1x, img/sample2.jpg 2x" alt="サンプル">

通常のデバイスならsample.jpgが、Retinaディスプレイではsample2.jpgが読み込まれます。
1x、2xで区切ってください。

※@2x画像をそのまま使う場合はretina.jsが読み込まれていないか注意してください。

結果：読み込み速度が上がる！

余計な画像を読み込まなくなったのでスピードが速くなりました！！ロゴの画像だけ、数枚だけRetina対応にするのならこちらの方法が全然便利でした。
ただしIEなど対応していないブラウザもあるのようなのでそちらの対策も必要になってくるかもしれません。別のjsライブラリを利用すればこちらクリアするようです。

さらにウィンドウサイズに合わせて画像を切り替える方法など、詳しいことはこちらのサイトに書いてありました。

参考サイト

HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう