Images

Images carry the emotional weight of a page: they set context, illustrate workflows, and signal brand voice faster than paragraphs can. Use them sparingly but deliberately—each graphic should earn its space, ship crisp at multiple densities, and cooperate with surrounding typography so the narrative stays lightweight and accessible.

Plain images rely on the <img> element paired with thoughtful attributes. Always provide meaningful alt text (or an empty alt when the image is purely decorative), lock in width and height to avoid layout shifts, and lean on CSS for sizing so the asset can adapt fluidly across breakpoints. When performance matters, add loading="lazy" and consider srcset/sizes to deliver the sharpest version without bloating the page.

<figure>
  <img src="..." alt="...">
</figure>

Image captions belong inside a <figure> with a paired <figcaption>, giving screen readers and search engines clear context. Use the caption to state what the image shows and, when relevant, credit the source or license. Keep the copy concise and avoid repeating the alt verbatim—treat it as a complementary layer that anchors the visual inside the story.

<figure>
  <img src="..." alt="...">
  <figcaption>...</figcaption>
</figure>

Additional notes: pick formats that match the job (SVG for UI icons, WebP/AVIF for photos with fallbacks), compress aggressively, and avoid baking text into images so content stays translatable. Ensure every interactive image is wrapped in a semantic element like <button> or <a>, and never rely on color alone—pair visuals with clear labels so the experience remains resilient under high-contrast modes and slow networks.