Images Reference

Quick reference for image formats, attributes, and responsive syntax

Image Formats

Choose a format based on the content type, transparency needs, and target browser support.

Format Lossy / Lossless Transparency Animation Browser support Best for
GIF Lossless 1-bit (on/off) Yes All Simple flat animations; legacy compatibility
JPEG / JPG Lossy None No All Photographs and complex imagery
PNG Lossless Full alpha APNG All Flat artwork, logos, images needing transparency
WebP Both Full alpha Yes All modern General web use; replaces JPEG/PNG/GIF
AVIF Both Full alpha Yes Most modern Smallest file sizes; photos and graphics
JPEG XL Both Full alpha Yes Limited Future-focused; lossless recompression of JPEG
SVG Vector (no raster compression) Yes Via CSS / SMIL All modern Icons, logos, diagrams — see SVG section

See tutorial: Image formats overview

<img> Attributes

Core attributes for the <img> element. The first four have broad impact on layout stability and performance.

src
URL of the image. Always required; the browser fetches this URL if no matching srcset candidate is chosen.
alt
Alternative text. Required for accessibility — describes the image for screen readers and displays when the image fails to load. Use alt="" (empty) for purely decorative images.
width
Intrinsic width in CSS pixels. Setting both width and height lets the browser reserve layout space before the image downloads, preventing Cumulative Layout Shift (CLS).
height
Intrinsic height in CSS pixels. Used together with width to establish the correct aspect ratio during page load.
srcset
A comma-separated list of image candidates with width descriptors (800w) or density descriptors (2x). The browser picks the best candidate based on the display and sizes value.
sizes
A comma-separated list of media conditions and slot widths, e.g. (max-width: 600px) 100vw, 50vw. Tells the browser how wide the image slot will be so it can choose the right srcset candidate. Required when using width descriptors.
loading
lazy — defer loading until the image is near the viewport (saves bandwidth for off-screen images). eager (default) — load immediately. Do not use lazy on above-the-fold images.
decoding
async — decode the image off the main thread (preferred for most images). sync — decode before presenting content (rare; can block rendering). auto (default) — browser decides.
fetchpriority
high — boost fetch priority (use on the Largest Contentful Paint image). low — reduce priority (e.g. below-fold images). auto (default) — browser decides based on context.

See tutorial: The img element · Responsive images

<picture> and <source>

The <picture> element wraps one or more <source> elements and a fallback <img>. The browser uses the first <source> whose conditions match.

Attribute On element Purpose
type <source> MIME type of the offered format (e.g. image/avif, image/webp). The browser skips the <source> if it does not support that type — enabling format fallback.
media <source> Media query for art direction — supply a different image crop or composition at different viewport sizes (e.g. (max-width: 600px)). Also used with prefers-color-scheme to swap light/dark variants.
srcset <source> Same syntax as <img srcset> — a list of image candidates with width or density descriptors.
sizes <source> Same syntax as <img sizes> — required when the srcset uses width descriptors.
Always end a <picture> with an <img> fallback. The alt text and all size/decoding hints live on the <img>, not on <source>.

See tutorial: The picture element

srcset and sizes Syntax

Two descriptor styles exist. They cannot be mixed in the same srcset.

Width descriptors (w)

Report the actual pixel width of each file. Pair with sizes so the browser knows how wide the slot is.

<img
  src="img-800.jpg"
  srcset="img-400.jpg 400w,
          img-800.jpg 800w,
          img-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="A descriptive caption"
  width="800" height="533">

Density descriptors (x)

Used for fixed-size images (icons, avatars) where the slot size is constant but the pixel density varies.

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Company logo"
  width="120" height="40">
Two rules: (1) You cannot mix w and x descriptors in the same srcset. (2) The sizes attribute is ignored when density descriptors are used.

See tutorial: Responsive images & srcset/sizes

Format Decision Tree

Work through these questions in order to pick the right format:

  1. Animation needed?
    1. Use animated WebP or animated AVIF (smallest; use <picture> for fallback).
    2. Fall back to GIF only for legacy environments or extreme compatibility requirements.
  2. Vector / scalable graphic?
    1. Use SVG — resolution-independent, CSS-styleable. See the SVG section.
  3. Transparency required?
    1. Use WebP (lossless) as the primary format; PNG as fallback.
    2. Serve via <picture>: <source type="image/webp"> then <img src="fallback.png">.
  4. Photograph or complex imagery?
    1. Offer AVIF first (smallest at equivalent quality), then WebP, then JPEG as fallback — all via <picture>.
  5. Simple flat graphic, no transparency?
    1. Use WebP (lossy) or PNG depending on compression vs. fidelity trade-off.

See tutorial: Image formats overview · The picture element