Skip to content

Support <picture> with multiple sources #309

@timbenniks

Description

@timbenniks

It seems the picture tag implementation in the nuxt/image package is lacking basic picture tag features.

The picture tag and its sources (who act like regular images - with srcset and sizes, but with the addition of the "media" attribute) is meant to be able to show a different image for different matches in that media attribute.

Currently one source is added in the code which acts as a normal image tag with srcset and sizes.
However, there is no mention of the media attribute in the implementation.
see: https://github.com/nuxt/image/blob/main/src/runtime/components/nuxt-picture.vue

A picture tag is mainly used in a more "Art Direction" way and not “Resolution Switching”.

<picture> is capable of handling resolution switching, however you shouldn’t use it if that’s all you need. In such cases stick with a regular element plus srcset and sizes.

Example of average picture tag usage:

  1. On landscape devices I show an image in a 22:9 aspect ratio and a specific crop.
  2. On portrait devices I show an image in 1:1 ratio and with a crop on the face.

These two images are different. Not just their width/height, they are actually different files with different aspects ratios and compositions. Each one is a source in the picture tag. Each of these <source /> tags also has a srcset and a sizes attribute so they behave like a normal image nuxt image would. They have an additional media attribute which defines when they are shown. This field has a media query in it that tells the browser in which context to show the source.

An HTML example:

<picture>
    <source
        media="(orientation: landscape)"
        srcset="image-small.png 320w,
                image-medium.png 800w,
                image-large.png 1200w"
        sizes="(min-width: 60rem) 80vw,
               (min-width: 40rem) 90vw,
               100vw">
    <source
        media="(orientation: portrait)"
        srcset="image-small-portrait.png 160w,
                image-medium-portrait.png 400w,
                image-large-portrait.png 600w"
        sizes="(min-width: 60rem) 80vw,
               (min-width: 40rem) 90vw,
               100vw">
    <img src="image-small.png" alt="Image description">
</picture>

You can of course also use the picture tag for file type support etc

<picture>
  <source type="image/webp" srcset="illustration.webp">
  <img src="illustration.png" alt="A hand-made illustration">
</picture>

With the above in mind we should be able to add multiple images into the nuxt picture tag so sources can be generated with media attributes.

See image for differences:
img-picture

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions