The Picture Element

This was originally a Medium post for the now defunct Maya Agency

We are often asked to do things quickly and that’s understandable – our clients have deadlines too. But we also want to do things the right way and sometimes that can take a little time. Even something as simple as putting an image on a page can take some serious thought as there is often more to it than meets the eye. The Img Element

Once upon a time there was an image of a dog.

<img src=”dog.jpg”>

But sometimes the image didn’t load and also blind people couldn’t see it, so a text alternative was needed.

<img src=”dog.jpg” alt=”A picture of a cute dog”>

Meanwhile people had invented mobile phones but had yet to invent unlimited data plans and 5G. They wanted a smaller image so that they could see the cute dog while on the bus. Other people (or perhaps the same people when they got home) had big screens and broadband and they could download whatever they liked. And they did. They wanted bigger, less blurry images to look at on their glorious widescreen monitors and 4K TVs.

So srcset was added, with the width of each image in pixels defined (in w units for some reason) which let the browser choose which one to display.

<img 
  src=”dog.jpg”
  srcset=”shitzu.jpg 100w, doberman.jpg 500w”
  alt=”A picture of a cute dog”>

The people that make browsers never sleep, though, and they were busy optimising the way that web pages load. For if the browser can know which images it needs, it can start downloading them sooner, when no-one is looking.

And so sizes was added. Now the img element could tell the browser how much space the image would take up, even before the CSS was loaded, and the browser would know which source to use.

<img
  src=”dog.jpg”
  srcset=”shitzu.jpg 100w, doberman.jpg 500w”
  sizes=”100vw”
  alt=”A picture of a cute dog”>

It could even use media queries too, so that the place in which the picture would show could change as the page layout changed. Now the people on their mobile phones could rotate them and the design would rearrange to accommodate its orientation.

<img
  src=”dog.jpg”
  srcset=”shitzu.jpg 100w, doberman.jpg 500w”
  sizes=”(max-width: 500px) 100vw, 500px”
  alt=”A picture of a cute dog”>

And so the web developers looked at their websites at various window sizes and saw that they were good.

Then came the great reckoning of Google Page Speed Insights which complained, saying next generation image formats would save kilobytes of size resulting in increased user retention and greater happiness for all. And the developers despaired knowing that JPEG2000 was only supported by Safari and WebP was not supported by Safari or IE.

Fortunately there was another HTML element. One that was newer and less well known than its ubiquitous counterpart but far more flexible. The Picture element.

Once upon a time there was a picture of a dog wrapped in a picture element. It was the same as before and the exciting part was yet to happen.

<picture>
  <img src=”dog.jpg” alt=”A picture of a cute dog”>
</picture>

Two more potential sources were added to the picture element and the browser looked through them one by one, trying to find one that it could understand.

Meanwhile Internet Explorer stared at the picture in confused bewilderment. Eventually it ignored the picture and pretended that only the img was there. The other browsers looked on in sympathy.

<picture>
  <source srcset=”dog.webp” type=”image/webp”>
  <source srcset=”dog.jp2" type=”image/jp2">
  <img src=”dog.jpg” alt=”A picture of a dog”>
</picture>

The picture element could even have media queries applied to them so that the developers could choose which image to show.

<picture>
  <source srcset=”dog-portrait.jpg” media=”(max-width: 500px)”>
  <source srcset=”dog-landscape.jpg”>
  <img src=”dog.jpg” alt=”A picture of a dog”>
</picture>

Now that all the pieces were there, the developers could put it all together. They could have different file types. They could have different sized images at different window sizes. They could even have different shaped images at different page sizes but that had been left up to figure out as an exercise for the reader because it was beyond the scope of the article.

<picture>
  <source
    srcset=”dog-portrait.webp”
    sizes=”500px”
    media=”(max-width: 500px)”
    type=”image/webp”>
  <source
    srcset=”dog-portrait.jp2"
    sizes=”500px”
    media=”(max-width: 500px)”
    type=”image/jp2">
  <source
    srcset=”dog-portrait.jpg”
    sizes=”500px”
    media=”(max-width: 500px)”>
  <source
    srcset=”dog-landscape.webp”
    sizes=”100vw”
    type=”image/webp”>
  <source
    srcset=”dog-landscape.jp2"
    sizes=”100vw”
    type=”image/jp2">
  <source
    srcset=”dog-landscape.jpg”
    sizes=”100vw”>
  <img
    src=”dog.jpg”
    alt=”A picture of a dog”>
</picture>

And the web developers could code happily ever after, safe in the knowledge that all of the options were available to them. They just had to remember it all.