In the first part of this image optimization blog series we looked at how to use the
1<img>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>
1<img>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>
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: How Amplience helps simplify your picture tags.