Published
Updated
Most new Webflow designers will immediately drop an Image element everywhere they want a picture to appear. For some things, that's exactly the right approach. For other things, it creates challenges.
In hero areas;
- It's difficult to scale that area between desktop and mobile devices.
- It's difficult to overlay text and buttons on top of the image.
- If you want consistency, all of your hero images everywhere on your site must be exactly the same aspect ration ( width / height ).
In CMS items, you have similar problems - plus;
- If your customers will be adding new items, you have to give them the tools and education to size their images exactly right for your layout.
In many cases using a background image approach is a superior choice.
Caution!
Keep your images efficiently sized.
When you're using a background-image approach, Webflow cannot prepare a media srcset, and browsers cannot download a smaller version.
This means you don't want t be lazy with your asset preparation, or your mobile performance will suffer.
TIP: Use WEBP images whenever you can.
