Fixing blurry background images in Chrome

Posted by on Oct 17, 2015 in Code Chat | No Comments
Fixing blurry background images in Chrome

I recently came across an interesting issue whilst using background-image:cover to fill and crop an image to a specific size within a div. This works well and looks great in most browsers, but in Chrome, on certain types of images, if you look really carefully you can see a slight blurring of some of the more detailed sections.

Take a look at the image below, these are screengrabs of the same image from two browsers.

The first is from Firefox, which looks good, but the one below from Chrome looks slightly blurry. It is especially obvious in the seeds on top of the bun.

Adding the webkit specific option


removes this browser smoothing and returns the crispness to the image.

webkit image smoothing


You might think that these differences are too small to matter, but when you’re working with beautiful high definition photography that really defines your brand then it’s important to be able to control exactly how they are displayed. As always, the devil is in the detail.

Leave a Reply