Streaming live at 10am (PST)

How turn on webkit auto-sharping property in webflow


#1

Looking to turn on the auto sizing property to makesure images render at the best quality on crome.

I believe this should be the correct code?

img {
image-rendering: -webkit-optimize-contrast;
}

there is more information about this topic in this article - intresting read people…

https://medium.freecodecamp.org/-898b38a6c0e1

Ta,

Scott


#2

ha…i read that article the other day too and meant to figure out how to add it the webflow project i am working on. i haven’t tried it yet but i’m sure it is just a matter of adding that code to the custom code section and modifying the selector to be whatever tag webflow adds to all images…i suspect it would be w-img but haven’t checked yet.

edit: I just checked and the class is image if you use background images so add the below to custom code should cover both:

<style>
img, .image {
    image-rendering: -webkit-optimize-contrast;
}
</style>