Green curtains of auroae borealis above trees

As they are often the largest contributor to page size and load time, bitmap images offer a challenge for the developer: balancing image quality, resolution and file size for optimimum results. Recent additions to HTML5 and CSS have made this task somewhat easier, but it is vital to start with an understanding of the basics issues of resolution, relative sizes and pixel density, before moving on to syntax and solutions:

Time: Five hours

Prerequisites: basic HTML and CSS for images

Goals: Add responsive images to a web page, covering several design scenarios.

  1. Fluid Image Techniques
  2. Understanding Pixel Resolution
  3. <picture>
  4. srcset and x
  5. srcset and w
  6. sizes
  7. Retina Background Images
  8. image-set()

Further reading: Jason Grisby has an excellent 10-part series on responsive images; Jake Archibald has a nice summary in Anatomy of Responsive Images

Photograph by Studiolit, used under a Creative Commons license

Enjoy this piece? I invite you to follow me at to learn more.