Skip to content
aidsgnaidsgnaidsgn

Image

Image lets the browser choose a responsive AVIF, WebP, or fallback source while a compact BlurHash provides immediate visual context.

aidsgn mark
<aidsgn-image
  src="/aidsgn-mark.svg"
  alt="aidsgn mark"
  width="400"
  height="400"
  loading="eager"
  fetch-priority="high"
  blurhash="UPE3vFbdE3s;xukCRkWBIWaz~mayR:WBoeoy"
  style="aspect-ratio: 1; inline-size: 18rem; max-inline-size: 100%;"
>
  <span class="aidsgn-image__frame">
    <canvas class="aidsgn-image__placeholder" width="32" height="32" aria-hidden="true"></canvas>
    <picture class="aidsgn-image__picture">
      <source type="image/avif" />
      <source type="image/webp" />
      <img class="aidsgn-image__img" src="/aidsgn-mark.svg" alt="aidsgn mark" width="400" height="400" loading="eager" fetchpriority="high" />
    </picture>
  </span>
</aidsgn-image>

Responsive modern formats

Section titled “Responsive modern formats”

Provide normal source-set candidates for each format. The browser downloads only the best candidate from the first format it supports.

<aidsgn-image
  src="photo-960.jpg"
  srcset="photo-480.jpg 480w, photo-960.jpg 960w"
  webp-srcset="photo-480.webp 480w, photo-960.webp 960w"
  avif-srcset="photo-480.avif 480w, photo-960.avif 960w"
  sizes="(max-width: 40rem) 100vw, 40rem"
  width="960"
  height="540"
  alt="Mountain lake at sunrise"
>
  <span class="aidsgn-image__frame">
    <canvas class="aidsgn-image__placeholder" width="32" height="32" aria-hidden="true"></canvas>
    <picture class="aidsgn-image__picture">
      <source type="image/avif" />
      <source type="image/webp" />
      <img
        class="aidsgn-image__img"
        src="photo-960.jpg"
        alt="Mountain lake at sunrise"
        width="960"
        height="540"
        loading="lazy"
      />
    </picture>
  </span>
</aidsgn-image>

Always provide accurate width, height, and alt. Keep the default lazy loading for content images; use loading="eager" with fetch-priority="high" only when the image is likely to be immediately visible.

Usage guidelines

Section titled “Usage guidelines”
An informative aidsgn mark is presented with a nearby note that its alternative text identifies the logo.An informative aidsgn mark is presented with a nearby note that its alternative text identifies the logo.
Do

Match alternative text to purpose

Describe informative images concisely and use an empty alt value when an image is purely decorative.

An image placeholder reserves a stable square beside text using explicit width and height dimensions.An image placeholder reserves a stable square beside text using explicit width and height dimensions.
Do

Reserve the image’s space

Supply intrinsic width and height so nearby content does not shift while the image loads.

An aidsgn logo has identical aidsgn logo text shown as both alternative text and a visible caption.An aidsgn logo has identical aidsgn logo text shown as both alternative text and a visible caption.
Don’t

Avoid repeating the caption

Write alternative text for the image’s purpose instead of duplicating nearby caption text word for word.

A blurred placeholder remains where a final project image should appear and is labelled Final image missing.A blurred placeholder remains where a final project image should appear and is labelled Final image missing.
Don’t

Never treat a placeholder as content

A blurred placeholder supports loading but cannot replace the final image or its alternative text.