Optimizing images for hardware-acceleration on the iPhone and iPad

I 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).