Responsive images with srcset and sizes

Overview

When implementing responsive images, you will have to write the values for the srcset and sizes attributes. It can quickly get tricky. So let’s repeat the purpose of these two attributes so that it becomes easy to derive the values:

srcset - To define multiple image sources of different widths and let the browser pick the most appropriate candidate during HTML parsing.

sizes - To define the size of the image element. It could be a fixed size like 225px or relative to the viewport. We can use CSS media conditions here to provide different size values based on the viewport width.

Before we provide different image sources in srcset, you need to understand what are all the sizes you need based on the layout.

Fallback

We should change our fallback src from our largest image to a medium image. In our case that would be what falls into the 992px breakpoint. The reason for the change is simple. We currently serve our largest image as a fallback. Once this has been cached by the browser (as we most likely load rapha.cc fullscreen on a laptop device) it has no need to use any of the srcset values because it already has the largest in the set.