Concrete and simple examples for responsive HTML images

In HTML you can implement responsive images. That means that you specify multiple image variations (lower and higher resolution images) and let the browser pick the best fitting image for the given screen size. For a responsive website you want to render large images (higher resolution) on bigger screens like a desktop PC screen, and smaller images (lower resolution) on mobile phones.

Higher resolution images on larger screens will present an image in a good quality. Lower resolution images load faster and in most cases are sufficient when rendered on smaller mobile screens.

The HTML specification solves that problem with the HTML picture tag and the HTML img attribute srcset. The spec is fairly complex and allows a wide range of configurations. The following video presents a few concrete and simple examples to help get you started with responsive images. The video covers following aspects:

• Showing 2 different approaches for responsive images with an <img> tag by itself and then with a <picture> tag and <source> tags
• Specifying multiple image paths and widths in the "srcset" attribute
• Images by breakpoint, where order matters
• The "sizes" attribute of the <img> tag and a simple example of how it works
• Higher resolution images for retina / high pixel density displays: "2x rules"
• Using the lazysizes library for lazy loading images
• Using a placeholder image source before the actual image is loaded
• Automatically determining the available room for the image as the screen size changes