Implementation overview
How to set Appropriate Sizing and Background Images on Webflow?
Ensuring the appropriate sizing of your images is essential for optimizing website performance, improving load times, and enhancing user experience. Oversized images can slow down your site, negatively impacting both SEO and user satisfaction.
You can use images in your Webflow site in 2 ways: Inline or Background.
How to do it on Webflow?
Inline image: Webflow automatically optimize and create variants of this image at different resolutions. No need to worry here.
Background image: If you’re setting a background image on an element, like a section or container, the original image will be used. It means Webflow uses the same 3000 pixel image you upload to your biggest screen and your mobile. You don’t want to do this.
Do's
✅ Upload background image as image element. If you are using Relume, the background image are using inline Image to favor Webflow compression.
Here is how it looks:
<header class="section">
<div class="main"></div>
<div class="background-image">
<div class="image-overlay"></div>
<img src="image.url"
loading="eager" alt="" class="image-background">
</div>
</header>Don'ts
❌ Use image in “Background style”.
It will load the normal size picture and kill your performance.
Tools
