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!

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?

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.