Picture element as a progressive enhancement


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:

Code language
  <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" />

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 👇

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me