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?
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?
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.
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.
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.
