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:

broken.png

And here is the version with the style tag above:

fixed.png

Comments

Subscribe to new articles

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