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

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes