Should I be setting explicit height and widths for images on each breakpoint?

I’m currently learning the ins and outs of Webflow to use it professionally in the near future.

However, I’m a little confused as to what approach I should be taking when it comes to dimensions for my images.

My understanding was you use something like max-width to set a maximum limit for an image dimension, that way the image will scale according to the size of the screen automatically.

However, google lighthouse yells at me for not setting explicit height and width on my images. But if I do this, I know they will be locked into that size, and won’t automatically scale responsively.

What is generally best practice for image size? Should I be setting these dimensions so the image stays a certain size on each breakpoint?

For Image elements, I wouldn’t, and you understand the issues well. Lighthouse is trying to help you minimize layout shifts while the page is loading and images are a major culprit there.

For larger images like heros and sliders, I generally optimize the image as WEBP and upload it as the background image ( cover, centered ).

That way, I can set the width to 100%, and height to say 400px, or whatever I want. Lighthouse is happy. And images are cropped at the edges rather than distorted.