Example for SEO folks - Use of picture element for responsive images

An example of the <picture> element being used to serve a differently sized WebP image to the browser depending on the viewport width of the device in question

Why use the <picture> element?

• It allows the browser to choose the most appropriate image to serve to the user
• It preserves art directions as it allows specific variations to be shown depending on highly-readable media queries
• It's a native HTML element that has extensive and comprehensive documentation
• It's supported by all modern browsers
• In my own experience, it's a lot easier to use (and less error-prone) than the srcset attribute on the img element

How to use this example

• Feel free to share this example with your clients and fellow SEOs