first_page

Flippant Remarks about Responsive Images

Self-identifying 10x developer, Ire Aderinokun (@ireaderinokun) was one of earliest writers on the subject of responsive images that addressed its combinatorial complexities in an actionable way. In 2016, with “Responsive Images—The srcset and sizes Attributes”, she adeptly cut through to the technical issue at hand: learn how to use the srcset and sizes attributes.

In 2017, a learnedia.com article addresses the other major issue related to implementing responsive images: when to use the picture element:

In case you are using <picture> element, you are strictly telling browser which image to use on different viewport widths. …This is different because now browser won’t make a decision on it’s own which image to serve. That is useful when you are serving different images on different viewport widths. It could also be variations of the same image cropped differently to look better on some devices.

Of course, in 2015 Chris Coyier literally wrote “Responsive Images: If you’re just changing resolutions, use srcset.” This is great news once you know the lay of land but the article from Ire Aderinokun just clicked for me.

The point that Chris was trying to make is that most of the time responsive image declarations are going to look like this:

<img src="small.jpg"
  srcset="medium.jpg 1000w, large.jpg 2000w"
  alt="yah" />

Everything related to responsive images beyond this linear, directly proportional relationship with the viewport (including the use of picture) should be considered “advanced topics.”

looking at srcset and sizes

With the focus provided above, we can now look through the reference material:

srcset is a string which identifies one or more image candidate strings, separated using commas (,) each specifying image resources to use under given circumstances. Each image candidate string contains an image URL and an optional width or pixel density descriptor that indicates the conditions under which that candidate should be used instead of the image specified by the src property. —MDN

By reading this reference material, I am inspired to sketch out a data transfer object (DTO) for responsive images:

ImageCandidate data transfer object

The srcset property, along with the sizes property, are a crucial component in designing responsive web sites, as they can be used together to make pages that use appropriate images for the rendering situation. —MDN

It is considered a bit of challenge to describe when srcset and sizes should be used together. But before we get back to that, the MDN reference entry introduces sizes:

sizes allows you to specify the layout width of the image for each of a list of media conditions. This provides the ability to automatically select among different images—even images of different orientations or aspect ratios—as the document state changes to match different media conditions. Each condition is specified using the same conditional format used by media queries. —MDN

The DTO for sizes might be this:

ImageSize data transfer object with CssLength

where CssLength represents CSS length. Or we can avoid struggling with units in a programming paradigm not optimized for it and just use strings (like before in ImageCandidate):

ImageSize data transfer object

when srcset and sizes should be used together

Chris Coyier explains that the srcset convention as implemented in browsers will “assume you’re probably going to render [an] image at 100vw wide.” This implies that, by default, the largest image will be rendered in a srcset declaration like this:

<img srcset="
  food-big.jpg 640w,
  foot-medium.jpg 320w,
  food-small.jpg 160w"
/>

However, what if you want to show more, smaller images (e.g. food-small.jpg) when the viewport is larger and fewer, larger images when the viewport is smaller? Declaring sizes addresses this case:

<img srcset="
  food-big.jpg 640w,
  foot-medium.jpg 320w,
  food-small.jpg 160w"

  sizes="(min-width: 600px) 160px, 320px"
/>

This img declaration with sizes breaks the linear, directly proportional relationship Chris was telling us about earlier.

what about all of those DTOs?

I inserted ImageCandidate and ImageSize classes among these flippant remarks to annoy the world with yet more object-oriented programming and to propose the possible need for centralizing responsive image design decisions in a data store behind a Web API.

Such an API could expose data that can be transformed into srcset (sizes) declarations for HTML and CSS selectors for responsive background images. Such expensive transformations can take place at design time with a tool like 11ty.

related links

https://github.com/BryanWilhite/