Images

Core web vitals

• Set <img> width and height, or use CSS aspect ratio, to minimize CLS (Cumulative Layout Shift)

Formats

• Appropriate image formats used:
  • WebP when possible
  • SVG for icons and wordmarks
    • SVG is styleable with CSS if included in page markup
  • JPEG (or lossy WebP) for photos
  • PNG for images with lots of flat color (e.g. UIs)
  • Videos are often smaller than the equivalent animated GIF

Responsive images

• Responsive sizes (e.g. 1x, 2x) used for large images
• Use <picture> to supply different formats for images
• Use imgsrc to supply different sizes for images
  • No IE support, so include a src as a fallback

Accessibility

• Add an empty alt="" attribute for decorative images without alternative text
  • This prevents a screen reader from trying to read it out.

Design

• Different versions of images for mobile where images is wide or needs a different crop

SVG

• On SVG sizing:
  • The top level height and width attributes are the rendered size of the SVG.
  • The viewBox attribute sets up a coordinate system in which any unitless lengths, paths, sizes, etc. in the source are interpreted. It can provide a different view of the contents of the SVG.
  • The preserveAspectRatio attribute determines how the viewBox is sized/scaled in relation to the viewport of the SVG.
• Filters have their own implicit sizing box.
  • You have to explicitly set height and width on the filter to avoid e.g. a Gaussian blur being chopped off.