よくJavaScriptの実行は10秒以内にしなさいとか聞きますが、アレもこのひとつです。
今回はそんなリソース制限の中でも、画像についてのメモ。
やたら縦に長い画像を使ったら、iOSの一部機種で画像が表示されなかったんですの・・。
参考:Safari Web Content Guide: Creating Compatible Web Content
各Apple端末のRAM容量
まず、リソース制限は何によるのかというと、端末に搭載されているRAM次第だそうで。
以下その一覧。
iPhone
- iPhone(初代):128MB
- iPhone 3G:128MB
- iPhone 3GS:256MB
- iPhone 4:512MB
- iPhone 4S:512MB
- iPhone 5:1GB(1024MB)
リソース制限
こっからが本題で、Canvasや画像のサイズについての制限について。
冒頭の参考リンク内、[Know iOS Resource Limits]の項です。
画像の容量
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.
- RAMが256MB未満の端末では、3MB以下
- RAMが256MB以上の端末では、5MB以下
画像のサイズ
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.
- RAMが256MB未満の端末では、width * height ≤ 3 * 1024 * 1024 となるように。
この計算だとおおよそ3メガまで大丈夫風ですが、おおよそ1000px * 2000pxの画像が、iPhone 3GSと初代iPodで表示されませんでした。
その他
あとは
- Canvas要素にも同等の容量制限あり。
- JPEGだとサブサンプリングされるので32MBまでOK。
- JavaScriptの実行は10秒を超えると処理が止まる。
- 同時に開けるウィンドウは8つまで。(iPadは9つ)
- 100*100の画像を、10*10で表示させたりしない。(=画像のサイズは適正にすべし)
ううむ。
そういやRetina対応などで画像を実表示の2倍のサイズで作って、widthやheightで半分を指定・・なんてよくやる手ですが、あくまであれはハックであり正攻法ではないんですね。