iphoneでホームページを見たら画像が荒い！？

レスポンシブデザインのつもりだった…

Retinaディスプレイの罠

最近ホームページ制作していたら見逃せないのがスマートフォン対応ってことですよね。

レスポンシブデザインって言ってPCで見たときと同じページだけどデザインはスマホ用にレイアウト変更されるデザイン方法があります。

レスポンシブデザインについては今回は割愛しますが、

スマートフォンに対応しで、Androidでも確認！よしOK！

っと思ってたらあれあれ？？

iphoneで見たら画像がめっちゃめちゃ荒いんですけどーー！？

Retinaディスプレイの甘い罠

原因はズバリ！「レティナディスプレイ」です。

ワタクシもレティナでの確認環境が無かったため結構気づかなかった部分で,

最初「画像が荒いんだよね～。」って言われた時は「えっ？そんなハズは…」と思ったもんでした。

Ratinaディスプレイは通常のディスプレイに比べ4倍の高解像度で表示する為、

画像が拡大されて表示されてしまい、結果荒くなってしまうという理屈らしいです…

「なんだよ、綺麗に見えるディスプレイで見たら汚いって本末転倒じゃん、Ratinaの方でそんなの対応しろよ！」

と文句を言っても仕方ないのでとりあえずの対応方法をば…

srcset

「通常の画像」と「2倍のサイズの画像」2枚の画像を用意して、以下のようにhtmlを書き換えます。

<img src="img/通常の画像.jpg" srcset="img/通常の画像.jpg 1x, img/2倍の画像.jpg 2x" alt="Example image" />

src="通常画像パス"

srcはsrcsetに対応していないブラウザ用の指定です。

srcset="通常画像パス 1x,2倍画像パス 2x"

Ratinaディスプレイ対応用のタグです。

通常のデバイスなら通常画像が、Ratinaディスプレイなら2倍の画像が表示されます。

しかしこの為に画像を2つ用意したり…

正直面倒ですね～、ワタクシの性格が出てしまう部分です。

まぁでも。レティナで見ている人にも綺麗な画像を見てもらわねば…ですよね…