Image Lazy Load Generator
Add loading="lazy" and decoding="async" to your img tags, keep the first ones eager, with an IntersectionObserver fallback.
Add lazy loading to your images
Runs in your browser. Paste markup or list image URLs; the output keeps every other attribute as it was.
- Images found
- —
- Kept eager
- —The hero image should load at once; lazy-loading it delays the Largest Contentful Paint.
- Lazy
- —
Output HTML
What the Image Lazy Load Generator does
A long page may contain forty images and the visitor sees three of them before scrolling. Without lazy loading the browser downloads all forty at once, competing with the CSS and fonts the first screen needs. The loading="lazy" attribute tells the browser to fetch an image only when it is close to the viewport, and decoding="async" lets it decode the image off the main thread so text does not stall. Both are supported by every current browser and need no script.
This tool takes your existing HTML and adds those attributes to each img tag, or builds the tags from a list of URLs. It leaves the first image (or however many you choose) eager, because lazy-loading the hero image is the most common way to make the Largest Contentful Paint worse: the browser only starts the download after layout, instead of from the preload scanner. Width and height attributes can be added as placeholders so the page does not jump as images arrive; fill in the real values.
For the few visitors on browsers from before 2020 the tool also outputs a short IntersectionObserver snippet that swaps data-src into src when an image approaches. Everything runs in your browser; the HTML is not sent anywhere.
Step by step
- 01Paste HTML that contains img tags, or switch to the URL list and enter one image per line.
- 02Set how many images at the top stay eager; one is right for most pages with a single hero image.
- 03Turn on width and height placeholders if your tags lack them, then replace the values with the real dimensions.
- 04Copy the rewritten HTML into your template.
- 05Add the fallback script only if you still support browsers without native lazy loading.
Common questions
The browser's preload scanner finds eager images in the HTML and starts fetching them before the page has even laid out. A lazy image is fetched only after the browser knows where it is on the page. For the hero image that delay is visible and it lowers your Largest Contentful Paint score, so leave it eager and consider fetchpriority="high" as well.
Only for browsers that predate the loading attribute: Safari before 15.4 and anything older than 2020. The script checks for native support first and does nothing when it exists. If your analytics show no such visitors, skip it.
With both attributes the browser reserves the right box before the image loads, so content below does not jump. That movement is what Cumulative Layout Shift measures. The tool inserts placeholder values you must replace; the real dimensions come from the file.
Native lazy loading does not: Google reads the src attribute as usual. Script-based lazy loading that leaves src empty can hide images from crawlers, which is why the fallback here keeps a real src for browsers with native support and only uses data-src in the old-browser path.
Keep checking
Responsive Image Generator
Build img srcset and sizes attributes, or a picture element with WebP and AVIF sources, from a file name and widths.
Free toolImage Compressor
Compress and resize JPEG, PNG and WebP images in your browser; nothing is uploaded, download them one by one or all.
Free toolHTML Minifier
Strip comments and collapse whitespace in HTML without touching pre, textarea, script or style blocks.
Free toolSVG Optimizer
Clean an SVG in your browser: editor metadata, comments, empty groups and long decimals out, preview before and after.
Want these fixes done for you?
Our team runs the audit, makes the changes and reports the result.