iPhone / iPad Application image formatting best practices

Question

We are using html5/webkit to style an iPhone application and the data coming into the application is coming from a blog. There are many variants regarding images sizes that are coming into the app, we would like to know what best practice is in regards to resizing images for each respective application (iPhone / iPad)

Sample Post Images:

• Image 1: 500px by 300px
• Image 2: 800px by 200px
• Image 3: 1024px by 768px

(some of these images would work well on an iPad but on iPhone will be too big for the viewable area. Should these images be resized using some type of jS/ html or is it best to resize these images server side.

All insight on be practice is greatly appreciated, thank you in advance!

JN

UPDATE 01/14/2012 An option that works very well for this is Sencha.src.io for rendering images in the size for the appropriate device: http://www.sencha.com/learn/how-to-use-src-sencha-io/ this is an option for getting up and running with a tool with many options.

Answer 1

This is more opinion than best practice.

Server side rendering of the images would make sense to me for resources and load.

Using a webserver to pre-render the images would likely be much faster because server-side languages (php/perl/ruby etc) are faster than javascript and don't require more client resources than simply rendering an image.

In PHP I have used the $_SERVER superglobal to detect browser and platform to do exactly this. $_SERVER['HTTP_USER_AGENT']

or

$browser = get_browser(null, true);

print_r($browser);

HTH