Maximum image size limits in Mobile Safari
Mobile Safari には、画像のサイズ制限が存在します。
Know iOS Resource Limits Your webpage performing well on the desktop is no guarantee that it will perform well on iOS. Keep in mind that iOS uses EDGE (lower bandwidth, higher latency), 3G (higher bandwidth, higher latency), and Wi-Fi (higher bandwidth, lower latency) to connect to the Internet. Therefore, you need to minimize the size of your webpage. Including unused or unnecessary images, CSS, and JavaScript in your webpages adversely affects your site’s performance on iOS. Because of the memory available on iOS, there are limits on the number of resources it can process: 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. The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM. The height and width of a canvas object is 150 x 300 pixels if not specified. JavaScript execution time is limited to 10 seconds for each top-level entry point. If your script executes for more than 10 seconds, Safari on iOS stops executing the script at a random place in your code, so unintended consequences may result. This limit is imposed because JavaScript execution may cause the main thread to block, so when scripts are running, the user is not able to interact with the webpage. See the Safari Web Inspector Guide for how to debug JavaScript on iOS. The maximum number of documents that can be open at once is eight on iPhone and nine on iPad. via https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
- 256MB未満な端末では、縦x横が3メガピクセルまで
- 256MB以上の端末では、5メガピクセルまでサポート
- jpg はデコードした状態で 32メガピクセルまで
<canvas>にも同様のサイズ制限がある
とのことです。
検証
画像サイズについて検証してみました
| iPhone 3GS (iOS 6.1) | iPhone 4s (iOS 7.1) | iPhone 5 (iOS 8 beta 5) | |
|---|---|---|---|
| 2560 x 2560.jpg (6.3mpx) | YES | YES | YES |
| 3200 x 3200.jpg (9.8mpx) | YES | YES | YES |
| 2560 x 2560.png (6.3mpx) | YES | YES | |
| 3200 x 3200.png (9.8mpx) | YES | YES | |
| 4096 x 4096.png (16mpx) | YES | YES |
mpx = mega pixel
結果
- iPhone 4s と iPhone 5 では 16mpx の png も表示された
- iPhone 4s ではスクロールやラバーバンド操作で描画待ち(プチフリ)が発生する。大きな画像を使うとUXに問題がでる
- iPhone 5 では速度低下はみられない
