iOSでは、RAM容量の関係で、取り扱える画像リソースのサイズに制限があって、それは Apple さんの公式文書で確認できます。以下 Safari Web Content Guide から引用。
- The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.
That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM. Note that the decoded size is far larger than the encoded size of an image. - The maximum decoded image size for JPEG is 32 megapixels using subsampling.
JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.
iPhone 4 / iPad 2 以降の機種は 512 MB 以上の RAM を積んでいるので、それらの機種であれば、
- 取り扱える GIF、PNG、TIFF の最大サイズ（ピクセル数）は 5 メガピクセル。画像のファイルサイズではなく、ピクセル数で制限が掛かることに注意です。
５メガ = 5 * 1024 * 1024 ですね。
縦横比が 3:4 の画像であれば、だいたい 1980 x 2640 px 。5 メガピクセルを超えた PNG などは、ブラウザに表示させようとしても枠線だけが表示されました。 - JPEG は、サブサンプリングを用いたデコード後のサイズが 32 メガピクセル、というのが上限。JPEGに関する説明文が判りにくいのだけれど、「サブサンプリングによって、画像の画素数を元の1/16にしてデコードすることができる」ので「サブサンプリング後に 32 メガピクセル以下のサイズになるJPEG画像は扱える」…と読めばよろしいか？
これに加えて、「2 メガピクセル以上の JPEG はサブサンプリングされてサイズが落とされる」ということですね。
ただし、いろいろ試してみると、プログレッシブJPEGフォーマットだと、iOS上のウェブブラウザで適切に表示される上限が 5 メガピクセル（古い機種だと3メガピクセル）に制限されてしまうようです。
→ 試してみたいのならば こちら：画像サイズの表示テスト
JPEGのデータを間引かれても、通常の場合、さしあたって大きな不都合は無いのだけれど、2メガピクセル超（データを間引かれる対象）のJPEG画像を CANVAS 要素に流しこむ…といった操作を行うと、画像のアスペクト比が崩れてしまうのだな。
この現象の回避方法は、またいずれ。
えるまー
すごくわかりやすかったです！
基本的に、大小問わず小さくされているんだと思っていたので、安心しました。
意外と大きいまま表示されていたんですね…