Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free.

After reading Is CSS resizing of images still a bad idea?, I thought of a similar question. (too similar? should this be closed?)

Lets say you need to use 10 different product image sizes throughout your website and you have 20k-30k different product images, should you use 10 different files for each image size? or maybe 5 different files and use css to resize the other 5? Would there ever be combination that would be good? Or should you always make separate image files?

If you use css to resize them, you will save on storage (in GBs) but you will have slight increase in bandwidth and slower loading images(but if images are cached, and you show both sizes of the image would you use less bandwidth and have faster loads?)

(But of course you wouldn't want to use css to resize images for mobile sites.)

share|improve this question
The trade off always exits. In a perfect world you'd have as many version of the same image (in different sizes) as needed. If you're already going through the trouble of rendering your pages for different screen sizes - then you should do the same with images. That said, it's all a matter of how much work you have to put in it vs. how much it "saves" - meaning, no need to be fanatic about it... –  alfasin Feb 23 '12 at 18:00
Duplicate of Is CSS resizing of images still a bad idea?. Covers exact same material –  Noname Feb 23 '12 at 18:47
Actually in my 'perfect' world there is only 1 version of the image, which is has the image at it's maximum resolution, then the display of the image just depends on the clients setting. Of course in my perfect world all communication, even of large images, is instantaneous ;) –  Michael Durrant Apr 19 '12 at 3:18

3 Answers 3

I think it depends on context.

If some of your image sizes are relatively the same, why make the user redownload the image? That is, if an image is 400x400 px and 40kb, is it worth it to have the user download a second image that is. Only 390x390 and 39kb? I don't think that it is and would rather use CSS.

Now, asking a user to load up a full detail image when it's not necessary (product info page vs search thumbnails) would be wasteful too.

You may want to go to Cloud Four to learn more about the various ways of dealing with multiple image sizes. I don't think the overhead of storing multiple sizes should be a limiting factor (Wordpress does this and they gotta be doing something right!), but if it is there are possibilities of resizing on the fly.

share|improve this answer

You could always create a sprite for the different sizes. This could even be taken to the extreme of a sprite with the products grouped into separate ones.

share|improve this answer

Let's say that you have a product detail page with 10 images. Initially the user sees a medium sized image of product, and 9 more small thumbnails. Additionally you can click on the medium box to load a large version.

In this scenario I would not make the user load 10 huge images and then resize them on the client for the simple fact that the user may never click on any of the images, it would be a waste. So I would have different sizes, when the user needs to see the large detailed image it can be fetched on demand.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.