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.
Quick answer
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.
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.
How to use this tool
- Choose the image use case that matches where the image appears on the page.
- The tool sets the recommended attribute combination for that use case.
- Enter the image path, dimensions, and alt text.
- 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.