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.

enter image description here

The question you referenced is about scaling an image up. There are some helpful links in there nevertheless. I did not find a solution yet, however. — u17, May 06 '11 at 23:23
@Frank The questions are both about scaling. The *direction* of the scaling is irrelevant, unless you know something I don't. The same algorithm would be applied and the same fix(if one exists) would affect both cases. — Su', May 06 '11 at 23:25
@Su: Well, the accepted answer there does not work, it makes the result even worse. On http://developer.mozilla.org/En/CSS/Image-rendering it says for `-moz-crisp-edges`: "Use this value to avoid *upscaled* images with sharp edges getting blurry." — u17, May 06 '11 at 23:44
@Frank - Moving this CSS/image rendering library question to SO to ensure it gets attention from developers familiar with FF image rendering. — danlefree, May 07 '11 at 01:41
Not the answer, although please note that it's mostly not a good idea to let the browser resize images. — PeeHaa, May 07 '11 at 01:46
@PeeHaa: In general, agreed! But what if someone zoomes in to 140% because he likes larger text. In this case, images get scaled up, which I always thought was worse than scaling down. — u17, May 07 '11 at 09:29
someone should write a firefox plugin compatibility layer for chrome, then firefox could die in peace — Sam Watkins, Aug 17 '12 at 04:49
related: http://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas — Sam Saffron, Nov 06 '12 at 00:33

Ryan Wheale · Answer 1 · 2014-11-24T20:52:30.817

44

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/

edited Nov 24 '14 at 20:52

answered Jan 13 '13 at 21:14

Ryan Wheale

26,022
8
76
96

2

You can just use "rotate( 0deg )" and it still fixes the issue. – shipshape Nov 06 '13 at 18:57
At the time I wrote this I tried `0deg` and the browser seemed smart enough to know not to do anything... which is why I ended up having to "force" the browser to calculate and render a rotated element. I mean, `.0001deg` is unnoticeable to the human eye... why not just stick with that and be safe. – Ryan Wheale Nov 06 '13 at 19:11
For me the fix for Firefox was applying position: relative on and off from the image, had to do that on page load. – Starwave Nov 28 '14 at 12:43

score 28 · Accepted Answer · edited May 23 '17 at 12:17

28

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.

edited May 23 '17 at 12:17

Community

1
1

answered May 07 '11 at 09:52

Nick

8,480
3
37
33

1

I abused bugzilla by nagging them yet again on that ridiculous ticket. – Sam Watkins Aug 17 '12 at 05:24
See my answer below for an easy solution using css3 rotation. – Ryan Wheale Jan 13 '13 at 21:15
11

No, it is not fixed. It is marked as fixed, but it is not fixed. – Brian Webster Feb 12 '14 at 17:31
woa guys that just saved my ass! even in upscaling he's so bad that in some cases he won't display the full image anymore -.- – jebbie Feb 13 '15 at 19:53

score 12 · Answer 3 · edited May 23 '17 at 12:32

12

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:

enter image description here

edited May 23 '17 at 12:32

Community

1
1

answered May 07 '11 at 01:46

danlefree

478
2
12

You say correctly `image-rendering:optimizeQuality` (bilinear resampling) is the default. The Firefox image in the original post also used this resampling technique. Zooming in improves image quality (but also makes the image larger). I get your `optimizeQuality` 50% image when zooming in once or twice from mine. – u17 May 07 '11 at 09:31
2

`image-rendering:optimizeQuality` was the only solution that really worked for my problem - jumping/shaking/trembling images that are downscaled – Jacek Pietal Jul 14 '14 at 15:55

score 3 · Answer 4 · answered May 07 '11 at 09:11

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:

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

Interesting information. Too bad it appears FF only implements *bilinear resampling* and *nearest neighbor* :( — u17, May 07 '11 at 09:39

score 2 · Answer 5 · edited Jun 01 '19 at 19:54

TL;DR: Image scaling is not likely to be fixed soon. About anywhere.

Longer version:

Eris Brasseur has a page that deals nicely with the broader question "Why is just about any image scaling software so bad?"

http://www.ericbrasseur.org/gamma.html

Since W3C's position on this matter is roughly that it's better to have an incorrect but equally incorrect implementation everywhere, they shun any proper dealing with Gamma (which would complicate matters slightly). Thus anyone accustomed to web standards is likely to continue ignoring Gamma, leading to the effects described by Eric and in this thread. This ensures that even downscaling is far from being well-defined, as Jeff Atwood puts it in an Article linked in another answer.

In such an environment, methods like Lanczos thrive whose claim to fame is mostly that they perform quite well even if implemented incorrectly.

In other words, browsers are the software equivalent of McDonald's burgers, and that fact will stay. Its implications need not, but the odds are skewed.

score 1 · Answer 6 · answered Mar 07 '17 at 11:36

1

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

FF, 50%:

FF, 25%:

answered Mar 07 '17 at 11:36

Tino Rüb

799
2
13
27

score 0 · Answer 7 · answered Nov 16 '16 at 19:17

0

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.

answered Nov 16 '16 at 19:17

tsveti_iko

6,834
3
47
39

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

7 Answers7

Linked