Hi Lumers! I am just starting to learn Webflow. From what I understand, using background images is not the best practice as far as SEO is concerned. However, at times, I find myself using background images as they are easier to work with. Does anyone have a tutorial or a strategy for ensuring that my background images (not images wrapped in a div) get properly resized for tablet and mobile viewports to improve loading times? ANY HELP or advice will be very very appreciated!
Without webflow you would normally generate different images with different sizes and then use the srcset and sizes attributes on the img element to let the browser choose the correct image based on the viewport. Webflow generates these attributes and images automatically
So this checks for example if the max screen width is 479px, it takes the image in the srcets
Hey Angelo, thank you for the clarification. Just to confirm, you are talking about the embedded images (images in a div) as opposed to images set as a background in a div, right? From my understanding, Webflow only does automatic image resizing for embedded images, not for background images. Or are you saying that Webflow does this for both embedded images and background images? A massive thank you in advance!
No not for images set as background. That is not possible, not in webflow or any other webpage.
The term 'embedded image' is wrong tho. If you put an Image element in webflow this is a standard img html element.
But this doesn't really matter anyway, just don't try to use images set as backgrounds. Use the webflow Image element. This way webflow will make sure no big images are loaded on mobile devices.
