HTML Image Lazy Loading Generator
Why download images nobody has scrolled to yet? Lazy loading waits until an image is about to appear, so your page loads faster and feels lighter. Fill in the details and grab the code, native one-liner or a JavaScript fallback for older browsers.
The one-liner that does most of the work
Modern browsers ship with lazy loading built in. Add a single attribute and you are done:
<img src="photo.jpg" alt="A photo" width="300" height="180" loading="lazy">
Always set width and height so the browser can reserve space and avoid layout shift while the image loads.
Native or JavaScript?
Native (recommended)
Just add loading="lazy". No scripts, no libraries, supported by every modern browser. Use this unless you have a specific reason not to.
Intersection Observer
A small script swaps a data-src into src as the image nears the viewport. Useful for custom effects or very old browsers.
Do not lazy load the hero
Images visible right away, like a banner or logo, should load eagerly. Delaying them can hurt your largest contentful paint.
Keep dimensions set
With either method, set width and height so the layout does not jump as images pop in. Your visitors will not notice, which is the point.
How to use the generator
- Enter your image details. Add the src, a real alt description, and the width and height.
- Choose a method. Native for simplicity, Intersection Observer if you need the JavaScript approach.
- Copy the code. Paste the result into your page. For the JS version, the script handles the rest.
Frequently asked questions
What is image lazy loading?
It delays downloading an image until it is about to scroll into view. Off-screen images no longer block the first paint, so image-heavy pages feel much faster.
Native or JavaScript, which should I use?
Use native loading="lazy" for almost everything. It is one attribute and works in all modern browsers. Reach for an Intersection Observer only for custom behaviour or ancient browsers.
Should I lazy load every image?
No. Do not lazy load anything visible immediately, like a hero or logo, since delaying it can hurt your largest contentful paint. Lazy load images further down the page.
Does lazy loading help SEO?
Indirectly, yes. Faster pages and better Core Web Vitals are ranking signals. Just keep above-the-fold images eager so they are not delayed.
Further reading: Google's web.dev browser-level lazy loading, the MDN loading attribute, and the MDN Intersection Observer API.
Lazy loading defers the download. Make the download tiny too.
Open the Image Optimizer→