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.

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

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.

Responses so far:

1. David Hunn says:

   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.

   Reply
2. Ahmad says:

   March 11, 2013 at 10:53 am

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

   Reply
   • Martin Brinkmann says:

     March 11, 2013 at 12:06 pm

     Interesting, thanks for mentioning that.

     Reply
3. Q says:

   March 11, 2013 at 2:55 pm

   To which versions of Firefox does the image smoothing apply?

   Reply
   • Martin Brinkmann says:

     March 11, 2013 at 3:03 pm

     According to this page, for all Firefox versions since 3.6

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

     Reply
   • hum says:

     March 11, 2013 at 4:01 pm

     Firefox 19:
     https://bugzilla.mozilla.org/show_bug.cgi?id=486918

     Reply
4. Crodol says:

   March 11, 2013 at 4:09 pm

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

   Reply
   • sades says:

     March 11, 2013 at 9:30 pm

     Google bilinear filtering.

     Reply