Multiple images for different viewports

Markdown:

![First object]({property_name.at(0).src})
![Second object]({property_name.at(1).src})

First object Second object

YAML definition:

    
images:
  - name: property_name
    image: $lib/images/fjord.webp
    width: 800
    height:
      - 200
      - 400

JSON of the property:

    
[
    {
        "format": "webp",
        "width": 800,
        "height": 200,
        "space": "srgb",
        "channels": 3,
        "depth": "uchar",
        "isProgressive": false,
        "hasProfile": false,
        "hasAlpha": false,
        "aspect": 4,
        "allowUpscale": false,
        "src": "/_app/immutable/assets/fjord.BF8F7ule.webp"
    },
    {
        "format": "webp",
        "width": 800,
        "height": 400,
        "space": "srgb",
        "channels": 3,
        "depth": "uchar",
        "isProgressive": false,
        "hasProfile": false,
        "hasAlpha": false,
        "aspect": 2,
        "allowUpscale": false,
        "src": "/_app/immutable/assets/fjord.Pe_8eCPo.webp"
    }
]

Here we’re generating multiple images which happens whenever you use square brackets for either width or height. The images in the returned array come out in this order:

width[0] - height[0]
width[1] - height[0]
width[0] - height[1]
width[1] - height[1]
…

The order of the sizes will be sorted by the plugin so the first width is always the smallest (same goes for the heights).

NOTE: In the case of mdsvex you need to reference an item using the at function. For instance: property_name.at(1).src . (see #551).