[PR] 大手アパレルECサイトが導入する月額1万円〜ファイル数無制限の画像軽量化ツール「LightFile」

Retinaディスプレイに合わせるには、解像度はいくつがいい?画像最適化するなら解像度も理解しよう!

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

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

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

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

2018-06-19-retina-display-072.jpg72dpiの画像

2018-06-19-retina-display-144.jpg144dpiの画像

2018-06-19-retina-display-288.jpg288dpiの画像

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

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

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

2018-06-19-retina-display-072x2.jpg72dpiで横幅1200pxの画像

2018-06-19-retina-display-288.jpg288dpiで横幅600pxの画像

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

最後に

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

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

2018-06-19-retina-display-kodak.jpgフィルムカメラもいいですよね

前へ前へ

競合サイトを分析できるサービス・ツールまとめ(2018年6月版)

次へ次へ

画像の解像度を、exiftoolで確認しよう!X Resolution、Y Resolutionが解像度を示す