Images

Responsive, centered email images with width, alignment, and more.

Block images (standalone paragraph) are automatically rendered as responsive, centered email images:

![Hero banner](https://example.com/hero.jpg)

Width

Control image width with the attrs syntax:

![Product](https://example.com/product.jpg){width="400"}

Alignment

Images are centered by default. Override with:

![Photo](https://example.com/photo.jpg){align="left"}

Rounded Corners

![Avatar](https://example.com/avatar.jpg){width="80" border-radius="50%"}

Linked Images

Wrap an image in a link to make it clickable:

[![Shop banner](https://example.com/banner.jpg)](https://example.com/shop)

Inline Images

Images mixed with text in a paragraph are rendered inline:

Feature one with icon ![check](https://example.com/check.png) included.

Vertical Alignment

Inline images default to vertical-align: middle, centering them with adjacent text. Override per image with valign:

Top-aligned ![icon](https://example.com/icon.png){valign="top"} icon.

Supported values: top, middle, bottom, baseline, text-top, text-bottom.

Float

Use float to wrap text around an image instead of flowing beneath it:

![Plant](https://example.com/plant.jpg){width="80" float="left"} **Monstera Deliciosa, 6" pot** Easy care · Bright indirect light · $42.00

Supported values: left, right. Appropriate margin is added automatically.

Note: Outlook desktop ignores float and falls back to default inline behavior.

Inline Image Size

Control inline image dimensions with width and height:

A small ![icon](https://example.com/icon.png){width="20" height="20"} icon.