Lazy Load Code Generator
Generate image and iframe code with native lazy loading, width, height and alt text. For the main image at the top of the page, get eager loading with high priority instead.
How to use the lazy load generator
- Choose the element type: image, image with WebP, iframe or video.
- Enter the file URL, alt text and real size in pixels.
- Tick the top-image option only for the main image visible on load.
- Copy the code into your HTML or an HTML widget.
When to lazy load and when not to
| Element | Loading |
|---|---|
| Hero or banner image at the top | Eager, with fetchpriority="high" |
| Logo in the header | Eager |
| Images further down the page | Lazy |
| Maps and YouTube embeds | Lazy |
| Background videos | Avoid on mobile if possible |
WordPress users
WordPress adds loading=”lazy” to most images automatically, and LiteSpeed Cache can lazy load images and iframes too. The common mistake is lazy loading the top image, which slows LCP. Exclude your hero image from lazy loading in your caching plugin settings.
Related tools
Preload the hero image with the preload tag generator, convert images with the WebP converter, and embed maps with the Google Maps embed generator.
More free tools and guides
Practise tools like this on real projects in our digital marketing course in Faridabad, with weekday, weekend and online batches.
See the courseAll free toolsAsk on WhatsApp
Frequently Asked Questions
Is this lazy load code generator free?
Yes. It is free with no sign-up and works in your browser.
Does lazy loading help SEO?
It helps page speed, which supports user experience. Google can see lazy-loaded images that use native loading=lazy.
Should I lazy load all images?
No. Load the main image at the top eagerly. Lazy load images below the fold.
Do all browsers support loading=lazy?
All modern browsers support it for images and iframes.