ウェブテクノロジの佐藤Sです。
Android アプリの開発では、さまざまな解像度の端末に対応するため、1つの画像リソースあたり4種類以上の解像度の画像を用意する必要があります(アイコンも同様)。iOS アプリの場合も、解像度別にはRetina 用と非Retina 用の2種類で済みますが、多種多様なアイコンを作成する必要があり、少し面倒なファイル名命名ルールもあります。
このエントリでは、これらの情報のまとめと、元画像から複数の画像を効率的に変換するツールについてご紹介します。
※ 2016年4月版の情報を別エントリーにまとめました。こちらもご覧ください。
Android アプリで必要な画像リソース
Android では、ディスプレイのDensity (dpi=Dot per Inch; 表示密度)にあわせて、アプリが使用する画像リソースを自動的に切り替えたり、拡縮したりするようになっています。2014年5月現在、以下の6種類のDensity が定義されています。
Density | dpi | 備考 |
---|---|---|
xxxhdpi(Extra-extra-extra!-high density) | ~640 | Android 4.3 からサポート。主にWQHD(2560×1440) 解像度用。まだ一般的ではない |
xxhdpi(Extra-extra!-high density) | ~480 | 主にフルHD(1920×1080) 解像度用 |
xhdpi(Extra-high density) | ~320 | 主にHD(1280×720) 解像度用 |
hdpi(High density) | ~240 | |
mdpi(Medium density) | ~160 | 基準となる解像度 |
ldpi(Low density) | ~120 | 最近の機種ではほぼ不要 |
例えば、xxhdpi のディスプレイで mdpi 用の画像をそのままのサイズで表示したとすると、縦横1/3、面積では1/9でしか表示されないので、非常に視認が困難になりますし、そもそも小さくてタッチパネルでまともに操作ができなくなってしまいます。
そこで、Android OS では、アプリがDensity ごとに適した画像リソースを持っている場合には、自動的に適切な画像を使用するようになっています。Density ごとの画像リソースを持っていない場合は、Density に応じてAndroid OS が自動的に画像を拡縮して表示します。
であれば、わざわざDensity ごとの画像リソースを用意するような面倒なことをせず、例えばxxhdpi のリソースだけ用意して、あとはOS 側で縮小して使って貰えば面倒なことをする必要がないように思いますが、以下のようなデメリットがあります。
- 画像を表示するたびに縮小処理が発生して、動作速度が低下する
- 縮小処理の画質が良くない
開発しているアプリが、画質と動作速度にこだわっているのであれば、Density ごとの画像を用意して組み込んでおくほうがよいでしょう。
以下は、Android で必要になるアイコンのピクセルサイズと画像リソース比率の一覧です。
Density | アイコンのピクセルサイズ | 画像リソース比率 |
---|---|---|
xxxhdpi | 192 x 192 | 400% |
xxhdpi | 144 x 144 | 300% |
xhdpi | 96 x 96 | 200% |
hdpi | 72 x 72 | 150% |
mdpi | 48 x 48 | 100%(基準) |
ldpi | 36 x 36 | 75% |
Android アプリの画像リソース容量を削減するにはPNG8 かWebP を使う
Android の画像リソース(アイコンも)にはJPEG形式を使うこともできますが、JPEG は写真のような画像の圧縮には向いているものの、アプリで使用するアイコンやUI画像の圧縮には向いていません。アイコンやUI 画像の圧縮にはPNG、特にPNG8(8bitPNG) が向いています。ただし、PNG8を使う場合は、高画質で減色できるツールを使う必要があります。
アプリがAndroid 4.0 以降のみのサポートであれば、ダイレクトカラー(32bpp,24bpp)のリソースは、PNG よりさらに圧縮率の高いWebP(LossLessモードがベスト) を使うこともできます。
iOS アプリで必要な画像リソース
App Store に登録するアプリは、2014年2月1日に改定された審査基準で、「Xcode5 で作成してiOS7 に最適化すること」になりました。このため、iPhone、iPad 両対応アプリの場合、アイコン用に13種類の解像度の画像を用意する必要があります。
アプリ内部で使用するアイコン以外の画像では、Retina 用は必須ではありませんが、画質と速度を考えると、やはり2種類用意しておくべきでしょう。通常画像の他に解像度を高くしたベースファイル名が”@2x”で終わる画像ファイルを用意しておくと、Retina 環境では後者の画像が自動的に選択され読み込まれます。
以下は、iOS7 で必要になる画像リソース一覧です。@2x はRetina を示します。
アイコン種別 | アイコンの ピクセルサイズ | ファイル名 |
---|---|---|
iPhoneアプリアイコン@2x | 120 x 120 | Icon-60@2x.png |
iPhone設定アイコン@2x | 58 x 58 | Icon-Small@2x.png |
iPhoneスポットライトアイコン@2x | 80 x 80 | Icon-Small-40@2x.png |
iPhoneAppStoreアイコン | 512 x 512 | iTunesArtwork |
iPhoneAppStoreアイコン@2x | 1024 x 1024 | iTunesArtwork@2x |
iPadアプリアイコン | 76 x 76 | Icon-76.png |
iPadアプリアイコン@2x | 152 x 152 | Icon-76@2x.png |
iPad設定アイコン | 29 x 29 | Icon-Small.png |
iPad設定アイコン@2x | 58 x 58 | Icon-Small@2x.png |
iPadスポットライトアイコン | 40 x 40 | Icon-Small-40.png |
iPadスポットライトアイコン@2x | 80 x 80 | Icon-Small-40@2x.png |
iPadAppStoreアイコン | 512 x 512 | iTunesArtwork |
iPadAppStoreアイコン@2x | 1024 x 1024 | iTunesArtwork@2x |
Resolution | 画像リソース比率 |
---|---|
High(Retina) | 200% |
Standard(非Retina) | 100% |
iOS アプリの画像リソース容量を削減するにはPNG8 を使う
iOS の場合、アイコンはPNG 形式のみサポートされています。画像リソースにはJPEG も使えますが、Android の項で書いたように、アプリで使用するUI 画像の圧縮にJPEG は向いていません。アイコンやUI 画像の圧縮にはPNG、特にPNG8(8bitPNG) が向いています。ただし、PNG8 を使う場合は、高画質で減色できるツールを使う必要があります。
画像リソースの効率的な作成方法
画像最適化ツール 『OPTPiX imésta 7 for Mobile & Social』は、今回のアップデート(Ver.7.56) の際に「App リソース画像一括生成」機能を追加しました。この機能を使えば、Android・iOS アプリで必要なアイコンと画像リソースを元の画像から一発で変換することができます。 しかも、高画質な減色ができるため、品質を保ったままファイルサイズを抑えた画像を作成可能です。
画像の拡縮では、Lanczos3 という拡大縮小アルゴリズムを使用するので高画質です。
次のアップデートで、WebP での出力もサポートする予定です。