Beware of Your Sprite Image’s Dimension & File Size

by | May 29, 2013 | Uncategorized

https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html

I just faced an awkward issue with the one of the work I involved in. The site looked fine on every browser except on mobile safari: the background image which used sprite image didn’t show up. After tolerable amount of time of making sure that the issue appeared on mobile safari only + googling here and there, it turned out that mobile safari has limitation on displaying image. These are the simplified rules:

  1. Maximum decoded JPEG size (using subsampling): 32 MB
  2. Maximum GIF, PNG, and TIFF size: 3 MB (RAM less than 256 MB) or 5 MB (RAM equal or more than 256 MB)
  3. Maximum dimension of image is width * height <= 3 * 1024 * 1024 (RAM less than 256 MB)

For more information regarding this issue, read these links:

  1. Apple’s Creating Compatible Web Content
  2. Dave Spurr’s Shrinking large background image bug in iPhone Safari
  3. Nels’ Sprites on Mobile Safari

Related to the work I mentioned on the first paragraph above, I splited the sprite image and making sure that each of the sprite image’s width * height is less than 3 * 1024 * 1024 pixels (fortunately there is Compass feature for that). Then, it worked. The images showed up on mobile safari.