Image resets in Webflow
When working in Webflow, you need to make sure you have a proper image reset to ensure a smooth development experience as well as a better experience for your site visitors.
We recommend choosing an image on the canvas, going to the selector and choosing all images, and styling with a max-width: 100%, height: auto, and a font-style: italic.
Learn more
Why do we need a reset?
When working with images in Webflow we want to ensure the best experience for you as you develop, but also for your site visitors as they use your site.
It's a best practice to make sure every image has a width and height set. This will ensure the browser always keeps the space for that image reserved and you avoid the dreadful Cumulative Layout Shifts (CLS) in your Google PageSpeed or Lighthouse reports.
The problem is, if you open the settings for your image you may not want it to be it's actual size. Since our site is responsive we need our image to be responsive.
When we set a max-width: 100% we ensure that the image won't overflow it's container and when we set a height: auto we know the browser will reserve the space for the image and maintain it's aspect ratio.
Then we add the italics so that if the image ever breaks for whatever reason, then the alt text is displayed on screen in italics to show a break in how the text is presented and hopefully help the visitor understand that there should be an image loading.
The image above is just using the All Images stylings described in this section. There is also a utility class added to provide some bottom margin. If you inspect the image, you'll see it has a width and height set, but that the CSS overrides those settings.
Are there other ways to deal with CLS?
Yes! If you don't want to go into every image and set a width and height (recommended), then you can use other methods. If your div wrapping the image has a set width and height or if you're using aspect-ratio to keep it properly sized, then your image inside can have width: 100% and height: 100% and it will help you avoid any CLS issues. This also prevents any other problems that not using an image reset may have presented.
In this instance, our image is wrapped in a div with a position: relative and with an aspect-ratio: 16 / 9. Then, the image inside has a position: absolute, and is set to object-fit: cover. Then the top, right, left, and bottom are all set to 0%.
Since the div has a reserved space using aspect-ratio, and the image has a width and height then this will prevent CLS as well. If you're not a fan of aspect-ratio or need broader browser support, you can use the padding hack to keep an aspect ratio and your image set to a width and height of 100% and that will work too.
The image above is just using aspect-ratio approach described in this section. You'll notice this image doesn't have a width and height set, but when running PageSpeed Insights or Lighthouse you wont' see any CLS warnings.