質問: レティナディスプレイ対応について ・ 2014年に発表されたiPhone 6 Plusでは、物理解像度1920×1080のディスプレイに対し、一度、論理解像度を1242×2208pxにした後に、スケールダウンさせて論理解像度414×736pxの状態で表示しているため、正確に画像を描写するためには縦横3倍で作らなければならないなど、とてもカオスな状態になっています。様々な解像度のディスプレイを搭載したAndroid端末も増え、物理値と論理値が単純に2:1というわけではなくなってきました。 上記情報より、おそらく今はまだ上記までの対応が、平均だと思いますが、 画像のサイズは、画像が%表記の場合、論理解像度736pxにPCのブラウザを縮小してインスペクタで画像の大きさを確認して、普通の画像ならその二倍、重くても画質重視なら3倍にしています。 基本的にこのやり方でいいのでしょうか? 横幅がremならすぐわかりますが%指定だと、何pxになるか実際に見ないとわかりにくくないですか? 本当はカンプ上でやるのが普通ですかね? ただ今がレスポンス重視なので横幅を1000pxとして画像のサイズを決めるとも聞きます。 それだと736pxの2倍でも大きすぎますかね。
回答: 一言で言えば、「正解はない」です。 「SVGにする」という選択肢を置いておいた場合、「データサイズ」「画質」「実装の手間」の3つを満足できる方法は存在しません。 * データサイズを犠牲にする→どんな端末でもピクセル数の多い画像を送信する * 画質を犠牲にする→どんな端末でもピクセル数の少ない画像を送信する * 実装の手間をかける→複数の画像を用意して、srcset属性などを使って出し分ける 理想論を言えば、容量と画質のバランスを見て個々に判断すべきものです。