Thomas Fuchs
Hi, I'm Thomas Fuchs. I'm the author of Zepto.js, of, and I'm a Ruby on Rails core alumnus. With Amy Hoy I'm building cheerful software, like Freckle Time Tracking and Every Time Zone and write books like
   Want me to speak at your conference? Contact me!

Optimizing images for hardware-acceleration on the iPhone and iPad

August 12th, 2010

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