Image in different screen size

Question

I am looking for an optimized solution to display image in different screen size.

I have a image in server which I would like to display in different handled devices like iPhone, iPad ,Android based tablets or mobiles etc.

Some of the solution I have thought of are

1. Have different images in server for each screen size.
2. Have a single image in server then scale the image in device to fit to screen size.
3. Hybrid of above two technique --- I will store some of the screen sizes images in server then in device end I will download image to its nearest screen size and scale to fit.

I appreciate your thought one this and welcome all valuable suggestion.

I believe this is common issue when there are so many different sized screens in the market. Please let me know if I am missing any proven solution to this problem.

Girish Kolari

Answer 1

I would prefer the first approach...something like this

1. Initially keep a single master image on server
2. Maintain a cache for each image resolution that you require. You can also keep the cache empty initially. When a client makes an image request check if the required image is there in the cache. If not crop the image on the server and store it on the cache and send it to the client as well.

I feel it is always better to have separate images on your server since this would minimize the load on server end. Else you need to process the image for each individual client call which might prove costly if your application is being accessed by many users simultaneously.