Image Tag Generator
Generate img markup with alt text, explicit dimensions, lazy loading and fetchpriority, optionally wrapped in a figure with a caption.
Responsive image markup with alt text, lazy loading and explicit dimensions (good for Core Web Vitals).
Live preview
<img src="https://picsum.photos/600/400" alt="A descriptive alt text" width="600" height="400" loading="lazy">About the image tag generator
Two attributes matter more than the rest. alt describes the image for screen readers and for anyone whose image fails to load. Explicit width and height let the browser reserve space before the file arrives, which prevents the layout shift that hurts Core Web Vitals.
loading="lazy" defers offscreen images, but never put it on your hero image, since that delays the largest paint you are being measured on.
How to use it
- 1Set the source and write real alt text.
- 2Enter the natural width and height so space is reserved.
- 3Use lazy loading for images below the fold, eager for the hero.
- 4Add a caption to wrap it in a figure.
- 5Copy the HTML.
Questions
What makes good alt text?
Describe what the image conveys in context, not what it literally contains. If it is purely decorative, use an empty alt so screen readers skip it.
Why set width and height when CSS controls the size?
The browser uses them to work out the aspect ratio and reserve space before the file downloads, which stops content jumping when it arrives.
Should every image be lazy loaded?
No. Lazy loading the hero delays your Largest Contentful Paint. Use eager and fetchpriority="high" for above-the-fold images.