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