Firefox Blurs an Image When Scaled Through External CSS or Inline Style

Firefox blurs an image when scaled through external CSS or inline style.

I discovered this new feature of FireFox:

http://developer.mozilla.org/En/CSS/Image-rendering

So putting this in your CSS will fix it:

image-rendering: -moz-crisp-edges;

Thought I'd share this info. Sorry for answering my own question ;)

Scale up images in HTML5 without blurriness

After some research: unfortunately what you want to do is limited by browser specific limitations. Firefox has a limited experimental code (image-rendering) that can force the browser to stop interpolating the pixels and thus causing the blurriness.

Unfortunately there is no other supported way of doing this currently. My suggestion would be for you to simply scale the image as I did in the edit to your original post.

Like this:

Mozilla's documentation page: https://developer.mozilla.org/en-US/docs/CSS/image-rendering

Image is being cut off on resizing in Firefox

Actually found the solution in this thread Firefox blurs an image when scaled through external CSS or inline style.

Firefox implemented non-standart css property image-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

Playing with different values this solution gives more or less appropriate result:

image-rendering:optimizeQuality;

http://jsfiddle.net/jGKkB/

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

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.

Oversized image is blurry when reduced

If your using Fire Fox it has been reported to have problems scaling down images.

Why is Firefox so bad at resizing images?

Firefox blurs an image when scaled through external CSS or inline style.

Apparently adding the following to the CSS has fixed the problem for some

image-rendering: -moz-crisp-edges;

Scaling up image with pixels in HTML/CSS?

A more complete list of CSS image interpolation properties can be found here: http://www.danolsavsky.com/article-images-interpolation-browser-rendering-and-css-resizing.html

Firefox:

image-rendering: optimizeSpeed;

image-rendering: optimizeQuality;

image-rendering: -moz-crisp-edges;

Opera:

image-rendering: -o-crisp-edges;

Chrome:

image-rendering: -webkit-optimize-contrast;

IE 8+:

-ms-interpolation-mode: nearest-neighbor;

W3C standard:

image-rendering: optimize-contrast;

svg not sharp, but blurry

If you want your SVG to be at its sharpest, then design it so that its shapes - especially the horizontal and vertical parts of the shapes - are on pixel boundaries.

For example, compare the following two examples:

<svg width="50" height="50">  <rect x="9.5" y="9.5" width="31" height="31"/></svg>
<svg width="50" height="50">  <rect x="10" y="10" width="30" height="30"/></svg>