Skip to content

Instantly share code, notes, and snippets.

@shikakun
Created March 14, 2016 09:14
Show Gist options
  • Save shikakun/5056b88bb1b183bb8557 to your computer and use it in GitHub Desktop.
Save shikakun/5056b88bb1b183bb8557 to your computer and use it in GitHub Desktop.

iPhone の解像度はこんな感じ、

デバイス 解像度 ppi 比率 必要な画像ファイル
iPhone 6 Plus 1920x1080 401ppi 16:9 @3x
iPhone 6 1334x750 326ppi 16:9 @2x
iPhone 5/5S/5C 1136×640 326ppi 16:9 @2x
iPhone 4/4S 960×640 326ppi 3:2 @2x

だけど、そもそも解像度ってなんなのか?

解像度ってなに?

解像度とは

写真などのイメージの「密度」を数値化したもの http://blog.karasuneko.com/design-dtp/resolution-dpi-ppi/#link1

で、その解像度の単位を dpi であらわしている。 ディスプレイの 1インチ = 25.4ミリメートル にドットが何個入るか、という意味。

dpi のほかにも ppilpi という単位もある。

単位 略した言葉 意味 基準
dpi dots per inch 入出力機器の解像度 1インチあたりのドットの数
ppi pixels per inch 画像の解像度 1インチあたりのピクセルの数
lpi ines per inch スクリーン線の数 1インチあたりの網点数

Photoshop の「画像解像度」っていうのは ppi のことを指してる。 lpi って聞いたことないけど、印刷物で網点を1インチあたり何個つくるかを示すときに使われるらしい。

dpippi は全然違う意味だけど、いままでだいたいのディスプレイは 1ドット=1ピクセル だったので dpippi は同じような意味で扱われることが多かった。

なんで2倍以上の大きさの画像が必要なのか?

初代 iPhone から iPhone 3GS まではディスプレイの大きさが 3.5 インチ、ピクセルの数が 320x480 だったので、計算すると約 160ppi なのでした。

しかし、iPhone 4 が登場! iPhone 4 はディスプレイの大きさが 4 インチ、ピクセルの数が 640x1136 のきれいな画面だったので、計算すると約 320ppi になってしまった。 初代〜3GS と比べると ppi が2倍なので、画像ファイルの大きさを4倍(縦2倍・横2倍)で作って縮小して表示することで対応しなくてはならなくなった、ということなんですね。

しかし、iPhone 6 Plus が登場! iPhone 6 Plus はディスプレイの大きさが 5.5 インチ、ピクセルの数が 1,080×1,920 のきれいすぎる画面なので、計算すると約 400ppi になってしまう!!! こうなると初代〜3GS と比べると ppi が2.5倍なので、ppi 2倍のときの画像じゃ足んないよとなって、画像ファイルの大きさを9倍(縦3倍・横3倍)で作って縮小して表示することで対応しなくてはならなくなった、ということなんですね!

納得〜。

参考

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment