How to optimize your images: Part 2- The picture tag

  • Engineering
  • Guides
In the second part of our image optimization series, we look at how to use the picture tag to provide art direction for your images.
6 mins reading time
Neil Cooper | January 20, 2021

In the first part of this image optimization blog series we looked at how to use the 

1<img>
 tag to help the browser choose the right sized image based on what it knows about the device. But requesting the right size image is only part of the challenge with image optimisation, you also have to deal with multiple image formats and varying levels of browser support. 

Currently, there are between 3 and 7 supported image formats: JPG, PNG, and GIF are all widely supported, but we have 3 more modern formats: JPG2000, WEBP, and JPEGXR that all deliver improvements in terms of image optimisation.

However, they're not all supported by all the browsers, so developers are left either having to choose the best one. Or they can use picture tags. That's what we'll look at in this blog. 

Using the picture tag

An example picture tag is shown below:

1<picture>
2   <source type="image/webp" srcset="cats.jpg?fmt=webp">
3   <source type="image/jp2" srcset="cats.jpg?fmt=jp2">
4   <source type="image/jpg" srcset="cats.jpg?fmt=jpg">
5   <img src="cats.jpg" width="100%" border="0" alt="" title="">
6</picture>
The browser works through the sources from top to bottom, choosing the first that is compatible with the browser it's requesting from. If you're in a legacy browser that doesn't support picture tags , then the image specified in the 
1<img>
 tag is used.

Art Direction

The final challenge for developers/designers is far more challenging than all the previous ones because it's highly subjective. 

All our previous solutions have focussed around simply scaling an image to the relevant size. However as I'm sure you've discovered, devices come in all shapes and sizes, from a 16:9 widescreen (or even some ultrawides at 21:9) down to the portrait view on a mobile phone. 

What if your original image was shot in the opposite orientation to how it's being viewed? Or the point of interest on that image takes up such a small portion that it's lost when it's shrunk down? 

A designer would say just change the crop and render out a different shaped image relevant to the device.

This is where picture tag comes to the rescue:

1<picture>
2   <source src="cats-landscape.jpg" media="(min-width: 1024px)">
3   <source src="cats-portrait.jpg" media="(min-width: 760px)">
4   <source src="cats-small-portrait.jpg" media="(min-width: 320px)">
5   <img src="cats-small-portrait.jpg" width="100%" border="0" alt="" title="">
6</picture>
So now the picture tag allows a level of art direction enabling designers to ensure the screen real estate is used effectively:

In our example, we've assumed a level of browser testing to determine what image fits best with which viewports. Within the media attribute, we've specified conditions that govern when the browser should request which image. We've included landscape and portrait images for the two higher pixel viewpoints and then the same for the lower sized viewpoints. 

You can also use srcsets and sizes within these tags to allow for scalable images and accommodate varying pixel densities. It's also possible to provide an alternate source for different image formats to get something that looks like:

1<picture>
2   <source srcset="cats-landscape.jpg?w=1024 1024w,
3                  cats-landscape.jpg?w=1440 1440w, 
4                  cats-landscape.jpg?w=1920 1920w 
5                  cats-landscape.jpg?w=2048 2048w" 
6            media="(min-width: 1024px)" 
7            sizes="(min-width:2048px) 2048px, 100vw">
8
9   <source srcset="cats-landscape.webp?w=1024 1024w,
10                  cats-landscape.webp?w=1440 1440w, 
11                  cats-landscape.webp?w=1920 1920w 
12                  cats-landscape.webp?w=2048 2048w" 
13            media="(min-width: 1024px)" 
14            sizes="(min-width:2048px) 2048px, 100vw">
15
16   <source srcset="cats-portrait.jpg?w=768 768w,
17                  cats-portrait.jpg?w=800 800ww, 
18                  cats-portrait.jpg?w=1536 1536w 
19                  cats-portrait.jpg?w=1600 1600w" 
20            media="(min-width: 760px)" 
21            sizes="100vw">
22
23   <source srcset="cats-portrait.webp?w=768 768w,
24                  cats-portrait.webp?w=800 800w, 
25                  cats-portrait.webp?w=1536 1536w 
26                  cats-portrait.webp?w=1600 1600w" 
27            media="(min-width: 760px)" 
28            sizes="100vw">
29
30   <source srcset="cats-landscape-small.jpg?w=320 320w,
31                  cats-landscape-small.jpg?w=360 360w, 
32                  cats-landscape-small.jpg?w=412 412w, 
33                  cats-landscape-small.jpg?w=640 640w, 
34                  cats-landscape-small.jpg?w=720 720w, 
35                  cats-landscape-small.jpg?w=824 824w" 
36            media="(min-width: 320px)" 
37            sizes="100vw">
38
39   <source srcset="cats-landscape-small.webp?w=320 320w,
40                  cats-landscape-small.webp?w=360 360w, 
41                  cats-landscape-small.webp?w=412 412w, 
42                  cats-landscape-small.webp?w=640 640w, 
43                  cats-landscape-small.webp?w=720 720w, 
44                  cats-landscape-small.webp?w=824 824w" 
45            media="(min-width: 320px)" 
46            sizes="100vw">
47   <img src="cats-small-landscape.jpg" width="100%" border="0" alt="" title="">
48</picture>

Advanced image optimization

This is a fairly thorough example of how your picture tag can sort of get a little out of control, even with the relatively simple case of a full-width image that doesn't do anything complicated like swap from full width to half-width at a certain breakpoint. 

It's also worth considering that this might not be the most re-usable chunk of code either, or easy to read for a less experienced developer who may need to add a new image format, or support new devices and displays.

Fortunately, the Amplience platform contains ways to mitigate these problems and that's what we'll focus on in part 3.