Images Tutorials

From why images matter through formats, responsive delivery, and accessibility

These tutorials build a complete picture of web images: why they matter, how different formats work, how to serve them responsively, and how to keep them fast and accessible. Work through them in order or jump to the topic you need.

Foundations

  1. Why Images Matter — Weight, performance, conversions, and the golden rule of using images purposefully.
  2. The img Element — src, alt, width/height, decoding, and wrapping images in <figure>.
  3. Raster, Vector & Pixels — Bit depth, HiDPI displays, and how anti-aliasing affects perceived sharpness.

Formats

  1. Raster Formats — GIF, JPEG, PNG/APNG, WebP, AVIF, and JPEG XL compared.
  2. Choosing a Format — Decision tree, illustration vs. photo trade-offs, and balancing quality against file size.

Responsive & Serving

  1. Responsive Images — srcset, sizes, and pixel-density descriptors.
  2. picture & Art Direction — Format fallback with <picture> and swapping images for prefers-color-scheme.
  3. Serving & Negotiating Formats — <picture> vs. HTTP content negotiation, CDN image transforms, and Accept headers.

Performance & Quality

  1. Performance & Loading — Above-the-fold priorities, lazy loading, fetchpriority, and <link rel="preload">.
  2. Presentational Images — CSS background-image, image-set(), and when to use an empty alt attribute.
  3. Optimization & Delivery — Compression tools, CSS sprites, data URIs, and replacing animated GIFs with video.
  4. Accessibility & Alt Text — Writing effective alt text, decorative vs. informative images, and ARIA roles for complex figures.