Lazy-load Attribute Adder
Paste HTML and add safe lazy-loading attributes to images and embeds without changing the surrounding document. Keep above-the-fold images eager when Core Web Vitals matter.
About this tool
This tool rewrites pasted HTML so images and embeds get browser-native lazy-loading hints:
loading="lazy" for <img> and <iframe>, plus decoding="async" for images. It is meant for
bulk-cleaning snippets exported from CMSes, landing-page builders, documentation generators, or old
templates before you paste them back into a project.
The scanner is intentionally conservative. It only changes matching start tags and copies everything
else — comments, text, doctype, scripts, styles, attribute order, and quote style — through unchanged.
Existing loading, decoding, and fetchpriority attributes are never overwritten, so the transform
is idempotent.
Worked example
Input:
<img src="photo.jpg"><iframe src="https://example.com/embed"></iframe>
Default output:
<img src="photo.jpg" loading="lazy" decoding="async"><iframe src="https://example.com/embed" loading="lazy"></iframe>
For Core Web Vitals work, set First images to keep eager to 1, enable Write loading="eager",
and enable fetchpriority="high" so the first image stays eligible for Largest Contentful Paint
while later images are deferred.
Options
- Elements to rewrite targets images, iframes, or both.
- Image decoding attribute chooses
async,sync,auto, or skipsdecodingentirely. - First images to keep eager leaves the first N images in document order out of lazy loading.
- Write
loading="eager"marks skipped first images explicitly instead of leaving them alone. - Add
fetchpriority="high"writes the priority hint on the first image if it lacks one. - Respect skip markers leaves tags with
skip-lazy/no-lazyclasses ordata-skip-lazy/data-no-lazyattributes untouched. - Output returns either rewritten HTML or a change-count report.
Limits
- The tool does not download images, compute dimensions, create placeholders, or infer which asset is
actually above the fold. Use
skip_firstandfetchpriority_firstwhen you know the hero image. - It is a tolerant tag scanner, not a full browser parser. It is designed for normal HTML fragments and documents, not malformed markup recovery.
- Input is capped at 2 MB to keep browser runs responsive.
decodingis only valid on images, so iframes never receive it.
FAQ
Should every image get loading="lazy"?
No. The above-the-fold image, especially the Largest Contentful Paint image, should usually stay eager.
Set First images to keep eager to 1 (or more for a complex hero area). If you want an explicit
hint, also enable Write loading="eager" and fetchpriority="high" for the first image.
Will this overwrite attributes that are already there?
No. Existing loading, decoding, and fetchpriority values are preserved. That makes the output
safe to run again: tags already processed by this tool or tuned by hand do not keep changing.
How do I opt out a specific image or iframe?
Add a skip-lazy or no-lazy class, or a data-skip-lazy / data-no-lazy attribute. With
Respect skip markers enabled, those tags are copied through unchanged. Turn the option off only
when you intentionally want to rewrite every matching tag.
Does this optimize the image files themselves?
No. It only adds HTML attributes. Compressing, resizing, converting formats, and generating responsive
srcset variants are separate steps. This tool is useful after those steps, or when you only control
the markup and need a quick safe lazy-loading pass.
Developer & Automation Access
Run it from the terminal
Same engine as this page, headless — via the gizza CLI:
gizza tool lazy-load-attributer '<img src="hero.jpg"><p>Intro</p><iframe src="https://example.com/embed"></iframe>'New to the CLI? Get gizza →
Open it by URL
Pre-fill and auto-run this tool with query parameters — the names match the API/CLI:
https://gizza.ai/tools/lazy-load-attributer/?html=%3Cimg%20src%3D%22hero.jpg%22%3E%3Cp%3EIntro%3C%2Fp%3E%3Ciframe%20src%3D%22https%3A%2F%2Fexample.com%2Fembed%22%3E%3C%2Fiframe%3E&targets=both&decoding=async&skip_first=1&eager_first=true&fetchpriority_first=true&respect_skip_markers=true&output=htmlMachine-readable descriptor: tool.json — title + parameters JSON Schema for agents.