← →

Image

The pura-image primitive renders an img inside an aspect-ratio frame, with lazy loading and async decoding enabled by default. It is purely attribute-driven: set the source, aspect ratio, object-fit, corner radius, and explicit dimensions through attributes. It degrades gracefully when no src is provided, showing the subtle background of the frame.

Preview

<script type="module" src="/pura/lib/image.js"></script>

<!-- Responsive cover image -->
<pura-image
  src="/assets/hero.jpg"
  alt="Team working together"
  ratio="16/9"
  fit="cover"
  radius="md"
></pura-image>

<!-- Fixed-size rounded avatar -->
<pura-image
  src="/assets/avatar.png"
  alt="Jane Doe"
  ratio="1/1"
  radius="full"
  w="48"
  h="48"
></pura-image>

Attributes

Attribute	Type	Default	Description
`src`	string	—	Image URL. When omitted, the frame renders empty with a subtle background.
`alt`	string	""	Alternative text for the image. Defaults to an empty string.
`ratio`	string	auto	Aspect ratio of the frame, e.g. "16/9", "1/1", "4/3".
`fit`	"cover" \| "contain" \| "fill"	cover	object-fit behavior of the image within the frame.
`radius`	"sm" \| "md" \| "lg" \| "full"	—	Corner rounding applied to the frame, mapped to the --pura-radius tokens.
`w`	string \| number	auto	Explicit width. A bare number is coerced to px; any other CSS length is passed through.
`h`	string \| number	auto	Explicit height. A bare number is coerced to px; any other CSS length is passed through.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/image.js"></script>

JavaScript

import "./pura/lib/image.js";