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.
- Click on Firefox > Help > Troubleshooting Information
- 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.
- Open the Chrome directory. If it does not exist, create it.
- Open the userContent.css file in the Chrome directory. If it does not exist, create it.
- Add the following line to it img { image-rendering: -moz-crisp-edges; }
- This applies the property to all img elements that the browser renders.
- 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.
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?
This CSS code restricts the crispiness to the image viewer:
html > body > img:only-child {
image-rendering: -moz-crisp-edges
}
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?
Hi there, no I do not think that is possible.
Silly question… but why do I see the lower picture crisps when Firefox supposedly smooths things out?
Because these images are screenshots of zoomed-in images. The screenshots themselves are not zoomed in so there is no blurring applied.
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?
Google bilinear filtering.
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?
To which versions of Firefox does the image smoothing apply?
Firefox 19:
https://bugzilla.mozilla.org/show_bug.cgi?id=486918
According to this page, for all Firefox versions since 3.6
https://developer.mozilla.org/en-US/docs/CSS/image-rendering
You can do same thing by flipping this preference to false: image.high_quality_downscaling.enabled
Interesting, thanks for mentioning that.
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.
Have you ever heard of pixel artwork? (Or even read the article?)