4KディスプレイやRetinaディスプレイなど、高解像度のディスプレイが普及しています。画像には解像度というものがあり、72dpiや350dpiなど、さまざまな解像度が知られています。今回は、Apple製品に多いRetinaディスプレイには、どの解像度が良いのか？というところを説明していきます。

解像度は72dpiでよい。画像の表示サイズで調整しよう。

288dpiや144dpiなど、さまざまな解像度の画像を用意して、実際に確認してみましょう。結論としては、解像度は72dpiで問題ないです。Retinaディスプレイでキレイに見せたい場合は、表示サイズの倍角の画像を用意して、srcset属性で読み込ませれば問題ありません。

srcset属性を使わずに、src属性で倍角の画像を読み込ませ、HTMLやCSS側でサイズを指定する（CSSで指定が推奨）というのも可能です。

72dpiの画像

144dpiの画像

288dpiの画像

このように高解像度なJPEGで作成しても、見た目はかわらないです。

倍角の画像を表示するのがキレイにみえる

解像度ではなく、倍角の表示サイズの画像を用意するのがよいです。どのぐらいキレイになるのか、実際に比べてみましょう。スマホでこのページを閲覧していただくと、下の二枚がほぼ同じサイズで表示されますが、精細さの違いが見えると思います。ぜひピンチアウト（拡大）してみてください。72dpiで1200pxの画像のほうがきれいに見えることがわかります。

72dpiで横幅1200pxの画像

288dpiで横幅600pxの画像

倍角の画像を小さく表示するほうが、見た目がきれいに見えます。

最後に

印刷物などは300dpiなどの高解像度で作成することも多いですが、Webでは72dpiでの作成で問題ありません。画角サイズをしっかりと把握してWeb構築するようにしましょう。

そういえば、Retinaと書いてあるカメラが以前ありました。コダックだったような。

フィルムカメラもいいですよね