Picture element as a progressive enhancement

Categories

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
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 👇

Hello, I’m Andy and I’ll help you to level up your front-end development skills.

I'm a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

On Piccalilli, I share my knowledge and experience to make you a better front-end developer.

I'm the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.