Disable Firefox's Image smoothing algorithm - gHacks Tech News

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

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

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:


Previous Post: «
Next Post: »

Comments

  1. David Hunn said on March 11, 2013 at 10:08 am
    Reply

    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
      Reply

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

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

    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
      Reply

      Interesting, thanks for mentioning that.

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

    To which versions of Firefox does the image smoothing apply?

    1. Martin Brinkmann said on March 11, 2013 at 3:03 pm
      Reply

      According to this page, for all Firefox versions since 3.6

      https://developer.mozilla.org/en-US/docs/CSS/image-rendering

    2. hum said on March 11, 2013 at 4:01 pm
      Reply
  4. Crodol said on March 11, 2013 at 4:09 pm
    Reply

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

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

      Google bilinear filtering.

      1. Nihcolas Steel said on August 26, 2015 at 5:53 pm
        Reply

        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?

    2. Xod said on October 30, 2015 at 4:21 pm
      Reply

      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
        Reply

        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 said on March 12, 2014 at 7:47 pm
    Reply

    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
      Reply

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

  6. Xod said on October 30, 2015 at 5:08 pm
    Reply

    This CSS code restricts the crispiness to the image viewer:

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

  7. Anonymous said on November 7, 2017 at 1:45 am
    Reply

    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

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

Please note that your comment may not appear immediately after you post it.