HTML figure and figcaption generator for captioned images

How to use the figure generator

1. Enter the Image URL and the Alt text.
2. Write the Caption, for example a figure number and one sentence of context.
3. Add a Credit (optional) such as “Photo: A. Rao”.
4. Set Width and Height in pixels, or 0 to leave them out, and choose Lazy-load.
5. Copy the code.

What it does and when to use it

Diagrams, charts, screenshots and photos in articles often need a visible caption: “Figure 3”, a description of what the reader should notice, a date, a source. The figure element groups the image with its figcaption, so the caption belongs to the image rather than floating in the text near it. Screen readers can announce the caption with the image, and the pair can be moved, floated or styled as one block.

The generator writes the image with the same loading attributes as a good standalone img: alt, width and height to prevent layout shift, and loading="lazy" decoding="async" for images further down the page. For an image without a caption, the HTML Image Tag Generator offers more options, such as srcset and fetch priority. For several widths of one image, use the Responsive Image Srcset Generator and paste its img into the figure.

How it works

The img is written first, then a figcaption if you entered a caption or a credit. When both are present they are joined by a space, with the credit in <small>. When there is only a credit, the caption holds just the small element. With neither, the figure has no figcaption. The alt attribute is always written, even if empty. All values are HTML-escaped. The code is built in your browser.

Worked examples

The default diagram:

<figure>
  <img src="/images/workflow-diagram.png" alt="Diagram: files are processed on your device and never uploaded" width="960" height="540" loading="lazy" decoding="async">
  <figcaption>Figure 1. How ToolsRift processes files locally.</figcaption>
</figure>

With a credit. Adding “Photo: A. Rao” gives <figcaption>Figure 1. How ToolsRift processes files locally. <small>Photo: A. Rao</small></figcaption>.

A chart with only a source line. Image /img/chart.png, alt text “Bar chart: sales rose from 1,200 in Q1 to 1,450 in Q2”, no caption, no size, lazy loading off. The image tag has only src and alt, and the caption is <figcaption><small>Source: company report 2026</small></figcaption>. The alt text carries the chart’s finding, so the caption only needs the source.

Limits and tips

• The caption is placed after the image. To show it above, move the figcaption to the top of the figure; both positions are valid.
• Long data belongs in a table rather than in the alt text of a chart.
• For a quotation with its attribution in a figure, use the HTML Blockquote Generator.
• Default browser styles add margins to figure. Reset them in your CSS if the figure looks indented.