モバイル端末用の画像は実際の何倍のサイズで用意するべき？

WEBで画像を表示させるとき、実際に表示されている画像よりも大きい画像を縮小させて表示させることがあります。

これは高解像度ディスプレイに対応するためで、例えば iPhone6 を基準に画像を表示させるなら、実際の大きさの倍の幅で作った画像を半分に縮小させて表示させます。

このとき手がかりになる数値をデバイスピクセル比（Device Pixel Ratio）と呼ぶのですが、iPhone6 ではこの数値が『2』なので 2px x 2px の集まりを iPhone6 上では 1px として表示させています。

これまでは iPhone をはじめとした大抵のモバイル端末は、デバイスピクセル比が『2』だったので画像を倍で作ればよかったのですが、ここ最近ではデバイスピクセル比が『3』の端末、さらにはその上をゆく『4』の端末の登場により、そうはいかなくなってしまいました。

なぜなら、デバイスピクセル比『2』を想定して作った画像をデバイスピクセル比『3』の端末で表示すると画像がボケるからです。

このようなパターンを防ぐには、端末のデバイスピクセル比に合わせて画像を出し分ける方法が有効です。

余談：デバイスピクセル比と混同しがちな dpi という単位

デバイスピクセル比（Device Pixel Ratio）の頭文字を取るとDPRです。

これと似た単位にdpiがありますが、これらは全くの別物です。

デバイスピクセル比	Device Pixel Ratio	1ピクセルの中にいくつのドットが入っているかを示す 例：2とか3
dpi	dots per inch	1インチの中にいくつのドットが入っているかを示す 例：72とか300

両方とも解像度に関する単位なのですが、扱う数値はだいぶ違うので、これらを混同して使うと相手をupsetさせるでしょう。

なぜなら、「dpiが3のスマホにも対応します？」などという質問は意味がわからないからです。

デバイスピクセル比によって画像を出し分ける方法

デバイスピクセル比に合わせて画像を出し分けるという方法で対応します。

具体的には、picture要素を使います。

picture要素の記述例

<picture>
	<img srcset="images/_pc.png,
		images/_pc@2x.png 2x,
		images/_pc@3x.png 3x,
		images/_pc@4x.png 4x" alt="">
</picture>

Photoshop CC のアセット機能による複数サイズの画像の自動書き出し

高解像度ディスプレイに対応するには、複数サイズの画像が必要です。

これらの画像の生成方法はいくつかありますが、今回はPhotoshopのアセット機能を使った書き出し方法を紹介します。

アセット機能ならレイヤー名を編集するだけなので楽です。

保存したい画像のレイヤー名 or グループ名を変更する

拡大率、画像名、拡張子を指定します。

また、これらをまとめて書くことが出来ます。

[ファイル] > [生成]> [画像アセット] を有効にする

画像データが入ったassetsファイルが自動で作成される

assetsファイルはpsdデータと同階層に自動生成されます。

まとめ

デバイスピクセル比に合わせて画像を出し分ける方法と、Photoshopのアセット機能を紹介しました。

picture要素を利用したレスポンシブイメージなら、JavaScriptに頼らずに画像の振り分けが出来ます。