Make Firefox image scaling down similar to the results in Chrome or IE

Question

On the left is the original PNG and on the right are versions reduced to roughly half the original size using width and height.

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/

Answer 2

There is a longstanding bug ticket filed in Bugzilla related to Firefox image downscaling. You might like to keep an eye on the ticket to track its eventual resolution or contribute a patch yourself if you feel able to.

The best workaround is to use the transform CSS property to apply a tiny rotation to the problem image and force sub-pixel rendering, as detailed in Ryan Wheale's answer.