CODEWITHSUNDEEP
imagefirefoxresize
u17
u17

Reputation: 2824

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

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

Upvotes: 59

Views: 29176

Answers (7)

Simon Thum
Simon Thum

Reputation: 594

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.

Upvotes: 2

Tino Rüb
Tino Rüb

Reputation: 809

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

FF, 50%:

FF, 50%

FF, 25%:

FF, 25%

Upvotes: 1

tsveti_iko
tsveti_iko

Reputation: 7972

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.

Upvotes: 0

Ryan Wheale
Ryan Wheale

Reputation: 28400

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/

Upvotes: 44

Nick
Nick

Reputation: 8530

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.

Upvotes: 28

GlennS
GlennS

Reputation: 5601

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

Upvotes: 3

danlefree
danlefree

Reputation: 478

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

Upvotes: 12

Related Questions