Best practices for inline responsive images feature

Hi all,

Was hoping to get some clarity with the responsive images feature for webflow. I understand that it only works for inline images, but what should be the size of the original image I upload? should I make it the exact size it is being displayed on desktop and bring down the quality? Or is there a ballpark resolution I should stay around and bring down the quality …

Secondly, does the object-fit feature affect this responsive feature at all?

The way im hoping to use inline images is by setting the width and height in webflow and using object-fit: cover so that the image doesn’t get warped, and if the client decides to change the image down the road, the design won’t be altered.

So basically if I have an inline image on my page and I set the width to 500px and height to 600px and give it object fit: cover

What should my original image size be that I upload and would using fit: cover affect the responsive image feature in the background?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

It’s like trying to nail jelly to the ceiling.

I can’t figure out how to use inline images and set an aspect ratio that ‘scales’ across all sizes. I end up adding tons of absolute px widths and heights to try and keep the layout intact, but it goes ‘tits up’ between viewpoints. It’s a proper headache.

The Webflow responsive image feature looks great but I tend to optimise my images to the exact size. Mainly because my clients don’t have hi-res images for anything. Ever.

How do you do it? Or does everyone admit defeat and use background images for an easy life?

How much do inline images add to SEO and the UX?

Any guidance would be much appreciated.

OK. So it’s been a long time since I did a full Webflow build.

I’ve just found this…

Which is the answer to my problem. Replying here to help anybody else that’s struggling with inline images.

Thanks
Will

Right. I’m totally lost. Can somebody help?

I’m trying to use the object-fit or ‘fill > cover’ setting to get an inline image to fit a div. I cannot get it to work as intended, at all.

It’s the 2x2 grid of images at the base of this page:

The parent DIVs [image-panel-right and image-panel-left] have variable widths and fixed heights across all breakpoints. They are all over the place and simply won’t fit.

I’ve tried every setting. A custom image optimised to size and uploading a full-sized image for Webflow to handle the responsive image serving. Nothing I try works.

If you resize the browser window, you’ll see it warp in every direction. Setting a class on the images makes it worse.

What am I doing wrong?

Thanks
Will

Share link: Webflow - Caravan Park

Did you ever get to the bottom of this? Every time I think I’ve got it figured out over the last several months, I can’t repeat it the same way.

At this point, I’m debating just going back to using background images.

You need to add a generic image class with a 100% height and width value. Seems obvious, but it wasn’t to me. I thought it was controlled by the parent DIV element.

1 Like

Btw. If you optimise your images at a large ratio that fits the layout generally, say 3200x2000. You can simply upload them all to your library and let Webflow handle the different breakpoint sizes.

This makes it so much easier and bullet proof for clients. They can swap any images on the site via the library without breaking the layout.

Just make sure you pass any files you upload through a service like TinyJpg first, to cut as much data out of them as possible. :vulcan_salute:

Ah… that makes sense but definitely isn’t obvious when you’re wrestling with it. I’m going to try it today - THANK YOU!