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.
@memetican Do you then change the height px down the break points for tablet and mobile (e.g. 400px, 300px, 200px)? I’m not super keen on using px values hardcoded into image dimensions, but like Cameron am getting dinged from lighthouse for not setting explicit w&h on images.
sidenote: I’m using 2 column grids containing a single image apiece (1col, 1img - utilizing fr units) and when I set the img attributes native px in the settings it distorts my image in the grid area… no idea why stating the native dimensions in the elements panel (instead of auto) would cause the image to change.
Exactly. For the purposes of images, I often use px in this situation, but rems are a better way to go overall in your layout. The main thing is it needs to be fixed so that the browser can perform its layout before the image asset is loaded and examined.
That makes sense to me, depending on exactly how it was setup, because if you specify one image dimension explicitly, but let the other dimension be governed by the container, you’ve basically told the browser to ignore the image’s internal aspect ratio. I’d have to test this out to find the right configuration for what you’re trying to do.
For me I usually take the easy route of using a DIV with a background image set to centered, cover. That will trim the edges, but ensures the entire space is covered by that image, and usually that’s the effect I want.
Read up on object-fit as well, it offers many of these same background-image layout capabilities directly in an image element, and as a bonus you’ll get the media srcset optimization for mobile devices.
