iOS上のブラウザでの画像サイズ制限。

iPhone上の Safari や Chrome で大きい画像が表示されない…という現象でハマったのでメモメモ。iOS 6.1.3 で試しています。

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 は、情報は間引かれるけれども、かなりデカい画像サイズまで大丈夫、と理解しておけばよいのかな。実用上は殆ど問題なし。

ただし、いろいろ試してみると、プログレッシブJPEGフォーマットだと、iOS上のウェブブラウザで適切に表示される上限が 5 メガピクセル（古い機種だと3メガピクセル）に制限されてしまうようです。

　→ 試してみたいのならば こちら：画像サイズの表示テスト

JPEGのデータを間引かれても、通常の場合、さしあたって大きな不都合は無いのだけれど、2メガピクセル超（データを間引かれる対象）のJPEG画像を CANVAS 要素に流しこむ…といった操作を行うと、画像のアスペクト比が崩れてしまうのだな。

この現象の回避方法は、またいずれ。

カテゴリ:

タグ: