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.
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
Ghacks is a technology news blog that was founded in 2005 by Martin Brinkmann. It has since then become one of the most popular tech news sites on the Internet with five authors and regular contributions from freelance writers.