Home screen splash images in iOS5

It seems that Apple slipped-in a resolution to the bemoaned lack of high resolution splash screens for webapps added to the home screen for phones with retina displays. However, there are a couple of gotcha's that you might want to be aware of.

First some background. Here are some examples of how you make you web page capable of providing a home screen icon and splash image with iOS devices:

With iOS5 there are now a few scenarios you need to handle:
iOS < 5 - Retina splash not supported - image must be exactly 320 x 460
iOS >= 5 - Retina splash supported - will not use lo-rez splash - image must be 640x920
iOS >= 5 - on non-retina phone - retina splash not supported Retina splash not supported - image must be 320 x 460

There are basically two techniques that should work here to determine the right image to use: CSS media queries and Javascript injection.
CSS media queries
It seems that CSS media queries are not fully supported on older phones. I found that when adding several directives with different media queries that things stopped working as expected on some devices. Older iPhones on older versions of iOS were either ignoring the media query or somehow parsing them wrong.
Javascript injection
I found the best path to sanity was to use javascript to inject the right directive into a script tag in the header:



Make sure your image file is still small
The image you will be transferring is four times larger than before, and I've observed that if it's too large it may not show up on the first load. Our client's splash screen art was quite detailed, which doesn't compress well. My initial hi-rez image as a PNG was 400K. In one test, I thought that something in my markup was wrong until after about the tenth time starting the app from the home page, the loading image finally appeared. Obviously my file was too large to transfer quickly...

Consider JPEG
It's not common knowledge that the splash screen image format can be PNG, GIF or JPEG. Most of us have got used to using PNG, but if your PNG is too large try a JPEG, tweaking the settings until you get a good compromise between image size and quality. I found that just by saving it out to JPEG with 90% compression setting cut my image file size by 75% without losing too much noticeable detail.

References:
http://miniapps.co.uk/blog/post/ios-startup-images-using-css-media-queries/
http://paulofierro.com/archives/568/