jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML & Accessibility Tools

Free Image Loading Attribute Builder

Choose an image use case and get a complete img tag with the right combination of loading, decoding, fetchpriority, width, height, and alt attributes. Covers hero images, thumbnails, article images, and galleries.

Loading tool...

What is Image Loading Attribute Builder?

Modern img tags benefit from several performance attributes used together: loading controls lazy loading, decoding controls how the image is decoded, and fetchpriority signals importance. Using them correctly together is better than setting them in isolation.

quickAnswer

Use loading='lazy' for below-the-fold images to defer loading until the user scrolls near them. Use loading='eager' or omit the attribute for above-the-fold images that should load immediately.

Last updated: 2026-05-25

limitations

  • Lazy loading defers image requests but does not reduce total page weight -- images still download when scrolled into view.
  • The browser reserves placeholder space for lazy images even before they load, which can affect layout if width and height attributes are missing.
  • Using loading='lazy' on above-the-fold images can delay LCP and hurt user experience.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

How to use this tool

  1. Choose the image use case that matches where the image appears on the page.
  2. The tool sets the recommended attribute combination for that use case.
  3. Enter the image path, dimensions, and alt text.
  4. Copy the complete img tag into your page.

What you can use it for

  • Build a hero img with loading='eager', decoding='sync', and fetchpriority='high'.
  • Create lazy-loaded article images with loading='lazy' and decoding='async'.
  • Optimize thumbnail galleries with appropriate loading and decoding attributes.

Use cases

Practical examples

example

LCP hero image tag

An LCP hero image gets loading='eager', decoding='sync', and fetchpriority='high' for fastest possible render.

example

Below-the-fold article image

A below-the-fold article image gets loading='lazy', decoding='async', and no fetchpriority to avoid competing with critical resources.

Common mistakes

  • Using loading='lazy' on the LCP image which delays it significantly.
  • Setting decoding='sync' on every image instead of only the critical ones.
  • Using fetchpriority='high' on multiple images which dilutes the priority hint.

verification

  1. Open Chrome DevTools Network panel and scroll the page to confirm lazy images only load when they enter the viewport.
  2. Check the Performance panel and verify that above-the-fold images with loading='eager' appear in the initial request waterfall.

FAQ

Questions about Image Loading Attribute Builder

When should I use loading='lazy'?

For images that are below the fold and not essential for the initial page render. Never use it on the LCP image.

What does decoding='async' do?

It tells the browser to decode the image asynchronously, allowing other content to render first before the image finishes decoding.

What is the LCP image and why should I not lazy-load it?

LCP (Largest Contentful Paint) is a Core Web Vital metric that measures when the largest visible content element renders. The LCP image is typically the hero image or main visual at the top of the page. Adding loading="lazy" to the LCP image delays its loading until the browser calculates that it is near the viewport —but it is already in the viewport on load, so the calculation itself adds unnecessary delay and hurts the LCP score.

What happens if I use loading="lazy" on an image inside a scrolling container or carousel?

The lazy loading threshold is measured relative to the viewport, not the scrolling container. Images in a carousel or overflow:scroll container may not load until the container itself scrolls, and the browser may not detect that the images are close to being seen. For carousel images, consider eager loading or use JavaScript to load images based on the component scroll position.

Related tools

More html & accessibility tools

HTML & Accessibility Tools

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

HTML & Accessibility Tools

Customizable Select Generator

Generate CSS for customizable select elements using appearance: base-select, picker icons, checkmarks, and open/closed state styling.

Open tool

Also try

Also try

CSS & Design Tools

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

CSS & Design Tools

CSS Scroll-State Query Generator

Generate CSS scroll-state() container queries for styling snapped, stuck, or scrollable elements. Includes JavaScript fallback for cross-browser support.

Open tool