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.
Fluid Image Techniques
Understanding Pixel Resolution
<picture>
srcset and x
srcset and w
sizes
Retina Background Images
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 twitter.com/dudleystorey to learn more.
