Configuring Breakpoints

Breakpoints are one of the core components of responsive images.  While most theme builders have defined breakpoints within *.breakpoints.yml files, breakpoints that are compatible with preloads may be a little different.  Before we get into the required differences, it's important to understand the mechanics behind <picture>, <img>, and <link rel="preload"> when it comes to how images are selected.

Picture Elements & Image Elements (srcset | sizes | source)

Picture and image elements can take advantage of resolution switching in order to provide an optimized image for any provided viewport width.  Browsers typically "figure out" which image to use based on a combination of attributes that the core formatter conveniently generates.  Note that more than one image can technically work in a given scenario!  The browser automatically weeds out the sub-optimal selections here.  This means that media query overlap is perfectly fine when setting these up.  Consider the following example:

<picture>
  <source srcset="/sites/default/files/styles/large/public/image.jpg?itok=abc123 1x" media="(min-width:1024px) type="image/jpeg" width="1920" height="1080"/>
  <source srcset="/sites/default/files/styles/medium/public/image.jpg?itok=def456 1x" media="(min-width:768px)" type="image/jpeg" width="1024" height="576"/>
  <source srcset="/sites/default/files/styles/small/public/image.jpg?itok=ghi789 1x" type="image/jpeg" width="768" height="432"/>
  <img src="/sites/default/files/styles/fallback/public/image.jpg?itok=xyz987" width="320" height="240" alt="demo" />
</picture>

At any given breakpoint, only one image will be loaded for the picture element.  If a user visits with a viewport width of 800px, then the medium image variant will be served.

Preload Links

Compared to <picture> and <img> elements, preload links follow a much different set of rules.  There isn't a way for browsers to know about any relationships between preload links, so basically every preload link that matches a given media query will be queued for download!  This means that breakpoints should not overlap as in the previous example.  Taking the same example, a "preload friendly" set of breakpoints would be:

<picture>
  <source srcset="/sites/default/files/styles/large/public/image.jpg?itok=abc123 1x" media="(min-width:1024px) type="image/jpeg" width="1920" height="1080"/>
  <source srcset="/sites/default/files/styles/medium/public/image.jpg?itok=def456 1x" media="(min-width:768px) and (max-width:1023px)" type="image/jpeg" width="1024" height="576"/>
  <source srcset="/sites/default/files/styles/small/public/image.jpg?itok=ghi789 1x" media="(max-width:767px) type="image/jpeg" width="768" height="432"/>
  <img src="/sites/default/files/styles/fallback/public/image.jpg?itok=xyz987" width="320" height="240" alt="demo" />
</picture>

With such breakpoints, there is no overlap between sources.  As a result, when preloads are generated:

<link rel="preload" as="image" imagesrcset="/sites/default/files/styles/large/public/image.jpg?itok=abc123 1x" media="(min-width:1024px)" />
<link rel="preload" as="image" imagesrcset="/sites/default/files/styles/medium/public/image.jpg?itok=def456 1x" media="(min-width:768px) and (max-width:1023px)" />
<link rel="preload" as="image" imagesrcset="/sites/default/files/styles/small/public/image.jpg?itok=ghi789" media="(max-width:767px)" />

only a single preload link will match any given viewport.