{"id":925,"date":"2015-10-17T09:17:21","date_gmt":"2015-10-17T08:17:21","guid":{"rendered":"http:\/\/sandjam.co.uk\/sandjam\/?p=925"},"modified":"2018-08-03T13:52:18","modified_gmt":"2018-08-03T12:52:18","slug":"fixing-blurry-background-images-in-chrome","status":"publish","type":"post","link":"https:\/\/sandjam.co.uk\/sandjam\/2015\/10\/fixing-blurry-background-images-in-chrome\/","title":{"rendered":"Fixing blurry background images in Chrome"},"content":{"rendered":"<p>I recently came across an interesting issue whilst using <em>background-image:cover<\/em> 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.<\/p>\n<p>Take a look at the image below, these are screengrabs of the same image from two browsers.<\/p>\n<p>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.<\/p>\n<p>Adding the webkit specific option<\/p>\n<pre class=\"qoate-code\">image-rendering:-webkit-optimize-contrast<\/pre>\n<p>removes this browser smoothing and returns the crispness to the image.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-926 size-full\" src=\"https:\/\/sandjam.co.uk\/sandjam\/wp-content\/uploads\/2015\/11\/webkit.jpg\" alt=\"webkit image smoothing\" width=\"1075\" height=\"1402\" srcset=\"https:\/\/sandjam-web.s3.amazonaws.com\/uploads\/2015\/11\/webkit.jpg 1075w, https:\/\/sandjam-web.s3.amazonaws.com\/uploads\/2015\/11\/webkit-785x1024.jpg 785w\" sizes=\"auto, (max-width: 1075px) 100vw, 1075px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>You might think that these differences are too small to matter, but when you&#8217;re working with beautiful high definition photography that really defines your brand then it&#8217;s important to be able to control exactly how they are displayed. As always, the devil is in the detail.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":928,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[35,36,37],"class_list":["post-925","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","tag-css","tag-tips","tag-tricks"],"acf":[],"_links":{"self":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/comments?post=925"}],"version-history":[{"count":1,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/925\/revisions"}],"predecessor-version":[{"id":927,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/925\/revisions\/927"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/media\/928"}],"wp:attachment":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/media?parent=925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/categories?post=925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/tags?post=925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}