Should I resize images for a mobile site

Question

I have a very simple question that I would like to ask those who has a much better knowledge than I do.

The basis of the question is. When developing a mobile website. Should I dynamically resize the images that I get from external sources to be smaller. Or should I leave them as big images and handle it with css?

The Mobile website I am building pulls a lot of images from a webservice as base 64. Now my train of thought is this. I want to keep the size of my website as small as possible, thus resizing the images to be smaller seems to be a good idea.

On the other hand. Resizing the images with javascript, (lead developer wants everything done client side only...), might cause overhead for the user's mobile device.

What are your opinions on this matter. Should I resize the images or not ?

Thanks in advance for your answer.

Answer 1

Always be mindful of the mobile user's connection. Latency is often much higher on a mobile connection (so try to limit the overall number of requests, regardless of size), transfer rates are slower, and overage charges tend to be expensive.

In most cases the best solution is to serve an image that is roughly the size needed by the browser. Size "tweaks" in the browser are fine. Serving a somewhat larger image will allow for higher-quality zoom, but you should use this judiciously (does the image actually need to show more detail when zoomed?)

Also be mindful of the server-side expense of resizing the image every time it is requested. It's better to size once and then persist the result either to a cache or to a database.

Facebook takes this approach. As of 2009, they were generating and storing four different versions of each image.

If you must consume the full-size images in the mobile browser, at least try to lazy load them so that they are only downloaded when needed (e.g. when they are first scrolled into view).

Answer 2

The best approach I know - to use on of the existing Responsive Images solution.

I.e.:

• For backend side - http://adaptive-images.com/
• Frontend - https://github.com/scottjehl/picturefill

Your could choose the one which is better for your. It depends on project.

If you have only mobile website - provide smaller images for it and save time and traffic for your users. If you can't - just scale it by css.