HTML: How to structure the <picture> element?

The CMS Questions
2

Hi Stefan,

yes, picture is complicated and can become very verbose.

You can think of it like this:
When you use picture, you need an img element within it. It provides the common infos like alt text and image dimesions and serves as fallback for older browsers with the good old src attribute. If img is used within picture, you don’t need srcset, as this is provided within the source elements

Now, you can add source elements for different image formats. They need the srcset attribute (no src as this is already used within img)

With srcset you provide different sizes of the same image. The browser picks what fits best. To help the browser making its choice you can also add the sizes attribute, telling the browser, how large the image is compared to the viewport size. For example sizes="100vw, (min-width: 1000px) 50vw" tells the browser, that the image ist displayed at the full-size. From a viewport of 1000px it’s only half of the viewport width (50vw). If your image is always full-size, e.g. a big hero image, you can omit the sizes attribute.

So, to wrap it up:

<picture>
  <source
     type="image/avif" -> required
     srcset="xxx" -> required
     sizes="xxx"> -> optional
 
  <source
     type="image/webp" -> required
     srcset="xxx" -> required
     sizes="xxx"> -> optional

  <img
    src="???"  -> required, fallback
    srset="???" -> no, not if img is within picture
    sizes="???"> -> no, not if img is within picture
    alt="" -> accessibility
    width="" -> avoid layout shift
    height="" -> avoid layout shift
</picture>

Maybe this thread might be of interest, with Kirby code example:

1 Like