HTML img tag generator with alt text, size and lazy loading

How to use the image tag generator

1. Enter the Image URL and the Alt text.
2. Enter the image’s Width and Height in pixels. Use 0 to leave one out.
3. Choose Loading (Lazy, Eager or Default), Decoding (Async, Sync or Default) and Fetch priority (Auto, High (hero image) or Low).
4. Optionally fill srcset and sizes (with srcset) for responsive images, and a Class (optional).
5. Copy the tag and read any notes under it.

What it does and when to use it

The img element looks simple, but a few attributes decide whether a page feels fast and whether everyone can understand it. alt gives the image a text equivalent for screen readers, search engines and broken connections. width and height stop the layout from jumping, a problem measured as Cumulative Layout Shift. loading="lazy" delays images until the visitor scrolls near them, and fetchpriority="high" moves an important image up the download queue.

Use this tool when you add images to hand-written pages, static templates or CMS blocks that accept raw HTML. When the image needs a visible caption, the HTML Figure & Caption Generator wraps it in figure and figcaption. For several file sizes and formats, the Responsive Image Srcset Generator builds the full srcset and a picture element.

How it works

The attributes are written in a fixed order: src, alt, width, height, srcset, sizes, loading, decoding, fetchpriority, class. Empty options are left out, so choosing Default for loading removes the attribute. Values are HTML-escaped, so quotes in alt text cannot break the tag. There is no preview, because it would only load a placeholder URL. Everything runs in your browser.

Worked examples

A content image further down the page, with srcset cleared:

<img src="/images/team-photo-800.jpg" alt="The ToolsRift team at the 2026 offsite in Goa" width="800" height="533" loading="lazy" decoding="async">

A hero image at 1600 × 900 with Loading Eager and Fetch priority High. The tag ends with width="1600" height="900" loading="eager" decoding="async" fetchpriority="high">.

Two notes at once. A decorative divider with empty alt, no size, Lazy loading and High priority produces a tag with alt="", no width or height, and loading="lazy" decoding="async" fetchpriority="high", plus two notes: that alt="" marks the image as decorative, and “Do not lazy-load a high-priority (above-the-fold) image.”

Limits and tips

• Enter the real pixel size of the file, or at least its true aspect ratio.
• When an image is the only content of a link, its alt text becomes the link’s name, so describe where the link goes.
• To check alt text across a whole page, paste it into the HTML Validator, which lists every img without alt.