Images
Responsive, centered email images with width, alignment, and more.
Block images (standalone paragraph) are automatically rendered as responsive, centered email images:
Width
Control image width with the attrs syntax:
{width="400"}Alignment
Images are centered by default. Override with:
{align="left"}Rounded Corners
{width="80" border-radius="50%"}Captions
Add a caption to render a small, muted line under the image. It follows the image's alignment and appears after the image label in the plain-text version:
{caption="Figure 1: signups by week"}Captions are plain text; markdown and HTML inside them are not processed.
Linked Images
Wrap an image in a link to make it clickable:
[](https://example.com/shop)Inline Images
Images mixed with text in a paragraph are rendered inline:
Feature one with icon  included.Vertical Alignment
Inline images default to vertical-align: middle, centering them with adjacent text. Override per image with valign:
Top-aligned {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:
{width="80" float="left"} **Monstera Deliciosa, 6" pot** Easy care · Bright indirect light · $42.00Supported values: left, right. Appropriate margin is added automatically.
Note: Outlook desktop ignores
floatand falls back to default inline behavior.
Inline Image Size
Control inline image dimensions with width and height:
A small {width="20" height="20"} icon.Formats and Retina Sizing
Stick to PNG, JPEG, and GIF, which every email client renders. The formats to avoid:
- SVG is stripped by Gmail, Outlook, and most other clients.
data:URIs are stripped by Gmail's image proxy and clients like it, so always host images at a URL.- WebP and AVIF work in Apple Mail and Gmail, but Outlook desktop and some older clients show a broken image.
lint() flags all of these under the image-format rule.
For crisp images on high-DPI screens, use the standard email retina technique: serve an image with twice the pixels you display and set the rendered size with width:
{width="400"}The photo examples on this page follow this pattern (an 800×600 source displayed at 400).
Placeholder Images
While drafting, use placeholder services so every image actually renders. The examples on this page follow this convention, so they all work if you paste them into the builder:
- Photos:
https://picsum.photos/seed/<name>/<width>/<height>returns a random but stable photo. The same seed always returns the same image, so pick a new seed name for each distinct image. - Logos, icons, and flat graphics:
https://placehold.co/<width>x<height>.png?text=Logorenders a solid box with an optional label. The.pngextension matters: the service defaults to SVG, which most email clients won't display. - Hero backgrounds: random photos make overlaid text unreadable when they're too bright. Route the photo through the wsrv.nl image proxy with a dark duotone filter, which remaps the photo's full tonal range between two dark colors, so light text stays readable no matter which photo the seed produces:
::: hero https://wsrv.nl/?url=picsum.photos/seed/hero/1200/600&filt=duotone&start=111827&stop=4b5563
# Always readable
The photo's brightest pixel is only as light as `stop`.
:::Swap start/stop (darkest and lightest hex colors, no #) to tint toward your brand. For a light background with dark text instead, use light colors and set color= on the hero.
Placeholders are for drafts. Replace them with real, self-hosted assets before sending; lint() flags images on known placeholder hosts as a reminder.