Images on websites

Question

I need some advice on the pro and cons of certain image strategies. When creating websites which are very picture heavy I it important that all the images are the best possible quality with as little impact on performance. Lets take for example a page that mimics a review of a product. You may have a normal sized product shot and multiple different sized thumbnails.

Two techniques to tackle this could be, using the product shot and creating all necessary thumbnails by copying the original image and then resizing or cropping it to all desired sizes, or one could create those different sized thumbnails "on demand" by resizing them whenever necessary and sending a "temporary" image to the client.

Has anyone got any other experiences of how this could be implemented, or any pros and cons of the ways discussed above?

Thanks,

Answer 1

Resizing and cropping on demand is very resource intensive. You should do it once then cache it.

For image heavy web sites, all images should be jpeg encoded and compress up until you can start to see compression artifacts in the image.

If you have lots of small images, or images that are loaded every request, consider puting them in your CSS using data URIs: http://en.wikipedia.org/wiki/Data_URI_scheme

Answer 2

Storage is usually cheaper than bandwidth and processing, so in most circumstances - especially when you're only talking about a fairly restricted set of thumbnails - it's better to do the processing up-front. That also has the advantage of making caching strategies easier.

Answer 3

I agree with Andy and Petah (except for the Data URI as it would not be cacheable or widely supported).

To take it a step further though. I prefer on demand resizing. It can be resources intensive, but with approriate caching, this is the best balance of maintaining an original high quality image and delivering to all the image sizes required by your design dynamically.

You noted PHP, I have used the SLIR Library.