Optimizing images for hardware-acceleration on the iPhone and iPad
August 12th, 2010I found that big progressive JPEG images can cause performance problems when used with hardware accelerated CSS transforms, so here’s what I do to makes things work better (with ImageMagick):
convert somefile -interlace none somefile_for_ipad.jpg
The -interlace none option saves the image as a non-progressive JPEG, and Safari doesn’t attempt to render progressive intermediate steps when downloading the file (and thus saving it from creating textures for each intermediate step).
A useful command to find out if a JPEG file is progressive or not is:
identify -verbose filename.jpg
This will spit out tons of information about the file (more than you ever wanted to know), but somewhere in there it should say Interlace: None.
Note that if you’re NOT using hardware-acceleration, it’s probably best to have progressive JPEGs (show up faster and compress slightly better in most cases). Use -interlace JPEG to create those.
Want to know more? Learn tons of tricks at my HTML5 Mobile Pro Workshop (next one is on October 5, 2010).
Tweet
