Can I apply the lazyload image attribute in the Webflow Designer using a regular image module instead of the embed module?
TL;DR
- Regular image elements in Webflow automatically lazy load images; verify this with Developer Tools on your published site.
- For customized lazy loading settings, add a custom attribute "loading" with the value "lazy" in the image's Element Settings.
You want to apply the lazyload attribute to images in Webflow without using the Embed Module.
1. What is Lazy Loading?
- Lazy loading defers the loading of images until they are needed, which can improve page performance.
2. Webflow's Native Lazy Loading
- Webflow automatically uses lazy loading for images with the “loading” attribute set to “lazy” to improve performance.
3. Using Regular Image Elements
- Add the Image: Place your image on the page using the regular image module.
- Check for Native Lazy Load: Webflow should automatically assign the loading="lazy" attribute to images as needed. Verify this by checking your published site with a browser's Developer Tools.
4. Custom Attributes (if necessary)
- If you want to ensure lazy loading across all instances, go to the image settings.
- Click on the image, and navigate to Element Settings (gear icon).
- In Custom Attributes, add a new attribute by typing “loading” in the name field and “lazy” in the value field.
5. Verify Implementation
- Publish your site, and then verify that lazy loading is working using a browser's Developer Tools.
Summary
Webflow typically applies lazy loading to images automatically. You can verify and customize this behavior by checking your published site and, if needed, adding a custom loading="lazy" attribute through Element Settings.
