Lazy Load Image Code Generator
Generate copy-paste HTML (and optional CSS/JS) to lazy-load an image, with fade or blur-up effects.
Enter an image URL to see a live preview of the generated code's effect.
This tool writes the markup to lazy-load an image — it generates code, it doesn't process image files. Enter the image URL, alt text and dimensions, choose a loading method, and copy the resulting snippet into your page. Lazy loading defers off-screen images until the visitor scrolls near them, so the initial page loads faster and uses less data. Everything is generated in your browser.
Native vs. JavaScript loading
The native method outputs a plain <img> with the loading="lazy" attribute plus explicit width and height — the simplest, most robust approach, supported by all current major browsers and requiring no CSS or JavaScript. The JavaScript method generates a fuller snippet (HTML, CSS and a small script) that uses a data-src placeholder and swaps in the real image as it enters the viewport, which is what you'd use if you need to support very old browsers or want a loading animation.
Why the width, height and effects matter
Setting width and height (or an aspect-ratio box, as the JS method does) lets the browser reserve space for the image before it loads, which prevents the page from jumping around — the layout shift that hurts Core Web Vitals. The JavaScript method also offers a fade-in or blur-up transition so images appear smoothly rather than popping in. Your alt text is HTML-escaped in the output, so quotes and angle brackets won't break the markup.
Frequently Asked Questions
Does this tool resize or optimise my image?
No. It only generates the loading code (HTML, and optionally CSS/JS). The width and height you enter are written into the markup so the browser can reserve space — they do not change the image file itself.
Which method should I use?
Prefer native loading="lazy" — it is the simplest and is supported by all current major browsers. Use the JavaScript method only if you must support very old browsers or want a fade/blur-up effect.
How does lazy loading help performance?
It tells the browser not to download off-screen images until the user scrolls near them, cutting the initial page weight and speeding up first load — especially on long, image-heavy pages.
Why should I always set width and height?
They let the browser reserve the right amount of space before the image arrives, preventing content from jumping (cumulative layout shift) as images load in.