Server-side image resizing performance

Question

I have been noticing more and more from the big sites (Google, Facebook, Youtube and co) that they are resizing images "close" to their desired measurements client side and I am wondering whether this is a shift in the way people are thinking or them being lazy.

Take a scenario of adding a new image size to a standard set of images at particular sizes for a set of products (e-commerce) which number into the 100's of thousands, maybe millions.

Imagine I have a copy of my original image that is 300x350 or whatever and client side, resize it to 200x250. I do this for each product for 20 products on a page.

Is the work and problems server-side of accomodating this new size really worth the benefit client side?

If not then what is a good way to judge when you should pre-process a certain size?

If yes, is there ever a time where server-side processing and caching might become overkill (i.e. housing 8 images of 110x220, 120x230, 150x190 etc)?

Answer 1

Consider following: Image resizing is heavy process for server. It first of all costly itself. Secondly it is harddrive IO operations which ARE quite slow. SO it all depends on how loaded your server is.

For client it matters in two ways:

1) Thumbnails are smaller in file size and hence are much faster to download. SO they will appear way faster. But that all depends on speed of Internet connection, which day by day is increasing. Have you seen how large images are loaded? They will not be displayed whole at once, but rather by 'lines'

2) If you try to display large image in small size, the quality will be much much much lower. It is because of how browsers process it. They do not have capabilities of Photoshop and cannot do proper quality resizing.

3) Many large images on single page will increase memory usage by that page. On some not so powerful computers that may give terrible lags while scrolling opening it.

As a solution to this question i more tend to do what i have seen in one of Drupal modules (imagecache if i am right).

It does not create thumbnails on image upload. Instead it creates them on request time using .htaccess and mod_rewrite capabilities. It checks if requested file does not exist and if no it redirects request to small and light-weight PHP script which will create the thumbnail, write it to filesystem and then output to client.

So next visitor will already get previously created thumbnail.

Thus you implement postponed/lazy image resizing, which will make the load smoother (stretch it in time).