Disable Firefox’s Image smoothing algorithm

For several years now browsers have started to apply algorithms to images that are displayed in the web browser. This is usually not much of an issue, as you will usually only take notice of that when you start zooming in or out of images. If you do though, you may notice that specific kind of images look blurry zoomed in.

In Firefox, this is handled by the image-rendering CSS property. The default value of that property is set to auto which uses a scaling algorithm that smooths colors.

The intention here is to improve the quality of photos when you zoom in on the image. The problem with this approach is that other types of images, pixel art in particular, looks blurry as a result.

A recent thread on Reddit highlights the issue with two example images. The first image uses the auto algorithm optimized for photos. Note that both images are zoomed in.

firefox blurry image screenshot

The second screenshot shows the same scene, this time though with the image-rendering property set to crisp edges instead.

firefox crisp pixel art

If you compare the two screenshots you will notice that the second screenshot looks a lot crisper while the first screenshot looks blurry.

You can switch the image rendering property easily in Firefox, and I'm going to show you how that is done in a minute. Before though it needs to be mentioned that switching it may have an affect on photos that you zoom in on in the browser.

  1. Click on Firefox > Help > Troubleshooting Information
  2. Here you find the button that links to your profile folder. Click on it. This should open the root of the profile folder in the default file viewer of the operating system you are using.
  3. Open the Chrome directory. If it does not exist, create it.
  4. Open the userContent.css file in the Chrome directory. If it does not exist, create it.
  5. Add the following line to it img { image-rendering: -moz-crisp-edges; }
  6. This applies the property to all img elements that the browser renders.
  7. Restart Firefox afterwards
Read also:  How to change Firefox's Sandbox security level

To undo that change, simply remove the line from the userContent.css file again and restart the browser. This resets the property to its default value.

Advertisement
Please share this article

Facebooktwittergoogle_plusredditlinkedinmail



Responses to Disable Firefox’s Image smoothing algorithm

  1. David Hunn March 11, 2013 at 10:08 am #

    I do not think that there are any need to disable image smoothing algorithm.
    Now a day computers are smart enough to handle that extra bit of process.

    • Will March 10, 2015 at 2:08 pm #

      Have you ever heard of pixel artwork? (Or even read the article?)

  2. Ahmad March 11, 2013 at 10:53 am #

    You can do same thing by flipping this preference to false: image.high_quality_downscaling.enabled

  3. Q March 11, 2013 at 2:55 pm #

    To which versions of Firefox does the image smoothing apply?

  4. Crodol March 11, 2013 at 4:09 pm #

    Silly question... but why do I see the lower picture crisps when Firefox supposedly smooths things out?

    • sades March 11, 2013 at 9:30 pm #

      Google bilinear filtering.

      • Nihcolas Steel August 26, 2015 at 5:53 pm #

        He means, why does the bottom image appear crisp when Firefox smooths images out? How come it appears crisp when it should be blurred? How is the comparison possible within the very thing that is blurring images?

    • Xod October 30, 2015 at 4:21 pm #

      Because these images are screenshots of zoomed-in images. The screenshots themselves are not zoomed in so there is no blurring applied.

      • Nicholas Steel October 30, 2015 at 9:19 pm #

        Lol I typed my name incorrectly last time. I'm still not sure what you mean, how does a screen-shot of a zoomed in image avoid the problem? The end result is the same...

        You take a screenshot and you use it in your webpage, everything is smoothed.

        You zoom in the screenshot and take a snapshot of the zoomed result and use it in your webpage, why does Firefox treat this image without the smoothing?

  5. Olive March 12, 2014 at 7:47 pm #

    Thanks for this helpful tip! I have a question, though. Is there a way to only disable smoothing for scaling up images and keep it enabled for scaling them down?

  6. Xod October 30, 2015 at 5:08 pm #

    This CSS code restricts the crispiness to the image viewer:

    html > body > img:only-child {
    image-rendering: -moz-crisp-edges
    }

  7. Anonymous November 7, 2017 at 1:45 am #

    I'm using Firefox on a mac, after I create the "Chrome" folder, it doesn't seem to allow me create the "userContent.css" file.
    What do I do?

Leave a Reply