Why is Firefox so bad at resizing images?

Question

On the left is the original PNG and on the right are versions reduced to roughly half the orignal size using <img width and height. See [Link removed].

Why does the resized image look so fuzzy in Firefox. Is there anything I can do about it without changing the image file. The fuzziness is particular annoying if the image contains large amounts of math or text.

Answer 1

I know this is late, but you can trick firefox into rendering the image better by applying a oh-so-slight rotation. I tried to translate() the image to get the same effect... to no avail.

CSS

.image-scale-hack {
    transform: rotate( .0001deg );
}

Javascript

if( "MozAppearance" in document.documentElement.style ) {
    $('.logo img').addClass('image-scale-hack');
}

I avoid browser sniffs at all cost. I borrowed this sniff from yepnope.js and I don't feel bad about it.

Also noteworthy, this same trick can be used to force sub-pixel image rendering in both webkit and firefox. This is useful for very slow animations - best explained by example:

http://jsfiddle.net/ryanwheale/xkxwN/