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.

Solution 1

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.

Solution 2

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/

Solution 3

The image-rendering documentation linked from the Firefox blurs an image when scaled through css or inline style answer which Su' referenced includes instructions for using image-rendering:optimizeQuality (which corrected the issue in my testing on FF4) - example:

Solution 4

I think your answer is in the link from above https://developer.mozilla.org/En/CSS/Image-rendering: 'Currently auto and optimizeQuality are equal by default, both result in bilinear resampling.' 'default value IE8+: bicubic (high quality)'

Next see: http://www.codinghorror.com/blog/2007/07/better-image-resizing.html 'When making an image smaller, use bicubic, which has a natural sharpening effect. You want to emphasize the data that remains in the new, smaller image after discarding all that extra detail from the original image.'

I can think of a couple of possible workarounds, but neither are simple:

1. Resize the image on the server. Either serve it up at half size, and allow Firefox to scale it up to full (which presumably it will be ok at), or have different URLs for the different sizes of image.
2. You may be able to make this work in the browser with plugins (but the example I found doesn't actually do what you need, so I've removed it).

Solution 5

Now (2017) the bug is closed 2 years ago. A short Test:

FF, 50%:

FF, 25%:

View more solutions