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 and height. See [Link re

Answer 1

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

FF, 50%:

FF, 25%:

Answer 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/

Answer 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:

Answer 4

A workaround for this issue is just to resize the original image with an image editor to the desired size and to use the image as it is, without defining it's width and height in the style sheet.

Answer 5

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.

Answer 6

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).