Over a couple of weeks I have tried to fix an image problem. All the images I uploaded to a site looked really blurry on Chrome. Of course this post can be out of date any day, but February 2018 this is relevant :)

Chromes doesn't handle image scaling very well. These days with responsive design, we design sites with percentages, will sites and images be shown in many different sizes. It's crucial that everything looks good on any platform.

 
 

Firefox 58 and Internet Explorer 11 (haven't tried on Edge or Opera), look like expected, small size thumbnail images is crispy clear.

But Chromes result looks out of focus and horrible. Yes, this can be seen as nitpicking, but as shown in the picture above you can see the difference clearly.

And weirdly enough theres is an easy fix, and why this isn't standard on Chrome beats me.

To gain a better result, add this code to you CSS:

image-rendering: -webkit-optimize-contrast
 
 

Since most sites don't have this image-rendering CSS added to their site, you are guaranteed that the web looks worse on Chrome. Use Firefox! :) Images in Firefox are even sharper than the image-rendering enhancement.

 

Here I flip between Firefox, IE 11, Chrome and Firefox

 

Here I flip between Chrome and Firefox

PS: I have nothing to do with firefox, I only want you to have the best web-experience possible :)

Comment