I need several square pictures for my website and display them in 100 x 100 px using CSS. When I use bigger pictures (for example 300 x 300, 455 x 455 or any square size), the result in Internet Explorer 7.0, 8.0 and Google Chrome looks really good. The image quality is much higher than the quality of a manually resized picture.

In other browsers however, like Firefox 3.5+ and the older IE browsers, the downscaled image is really ugly.

Is their a way to make downscaled images just as good in Firefox as in IE and Chrome? Or should I always manually resize all images to 100 x 100? (I've read somewhere that most designers never use scaled images on their websites?)

Thank you in advance!

7 Years
Discussion Span
Last Post by FBG

Excuse me, I might have made a mistake. The images look very different in Firefox, but I can't really determine if it's better or worse. So this is no specific Firefox problem :) (I should change the thread title, but I don't know how)

One question remains: should I downscale images with CSS or manually downscale them all before I put them on my website?

Edited by FBG: n/a


No, I am pretty sure Firefox does a very bad job scaling down images. The images are a lot smoother in other browsers. I've decided to scale them down my self before I put them on. To bad nobody could give an opinion on this.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.