Front-end education for the real world. Since 2018.

— From set.studio

Picture element as a progressive enhancement

Published:

Written by: Andy Bell

The HTML Picture element is useful not just for responsive images, but it’s also great for progressively displaying images in a suitable, supported format.

You can use AVIF and WebP formats right now and still support old browsers by using a <picture> element like this:

html

<picture>
  <source type="image/avif" srcset="https://assets.codepen.io/174183/hankchizlbork.avif" />
  <source type="image/webp" srcset="https://assets.codepen.io/174183/hankchizlbork.webp" />
  <img src="https://assets.codepen.io/174183/hankchizlbork.jpg" alt="Me looking like a complete bork" width="1500 " height="1585" />
</picture>

This is a great example of how progressive enhancement can help you to provide the best experience for anyone that visits your site, regardless of how they access it.

This snippet works in every browser because HTML is an incredibly forgiving and intelligent programming language. If a browser doesn’t support a <picture> element, the browser will ignore it and render the <img> as usual. If a browser does support <picture>, but doesn’t for example, support AVIF images: it will pick the format it can understand, including the default jpeg. Handy!

Go ahead and try the following demo is various different browsers 👇