BLOG // June 30, 2021

Solve blurry scaled images in Chrome

A very annoying new "feature" in Chrome in the last couple of months is that CSS scaled images (e.g. max-width or width limits on larger images) are blurry when loaded. You can fix this by adding this style tag to your images:

style="image-rendering: -webkit-optimize-contrast;"

Below is what an image looks like without the tag:


And here is the version with the style tag above:



Subscribe to new articles

If you enjoy my content, consider subscribing. You will only receive new blog stories, no other email.



© 2022 Dave Blakey. All rights reserved.

Development, startup and tech tips from Gatsby to Laravel, Strapi to PHP.