Disable Firefox's Image smoothing algorithm

Martin Brinkmann
Mar 11, 2013
Updated • May 6, 2013

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

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.


Tutorials & Tips

Previous Post: «
Next Post: «


  1. Anonymous said on 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?

  2. Xod said on 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

  3. Olive said on 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?

    1. Martin Brinkmann said on March 12, 2014 at 7:55 pm

      Hi there, no I do not think that is possible.

  4. Crodol said on March 11, 2013 at 4:09 pm

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

    1. Xod said on 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.

      1. Nicholas Steel said on 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?

    2. sades said on March 11, 2013 at 9:30 pm

      Google bilinear filtering.

      1. Nihcolas Steel said on 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?

  5. Q said on March 11, 2013 at 2:55 pm

    To which versions of Firefox does the image smoothing apply?

    1. hum said on March 11, 2013 at 4:01 pm
    2. Martin Brinkmann said on March 11, 2013 at 3:03 pm

      According to this page, for all Firefox versions since 3.6


  6. Ahmad said on March 11, 2013 at 10:53 am

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

    1. Martin Brinkmann said on March 11, 2013 at 12:06 pm

      Interesting, thanks for mentioning that.

  7. David Hunn said on 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.

    1. Will said on March 10, 2015 at 2:08 pm

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

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.