Using a configuration from a preset

Preset from mdsvex.config.js (originally in json)

presets:
    - name: mobile
      width: 300

Markdown:

![Using preset mobile]({property_name.src})

Using preset mobile

YAML definition:

    
images:
  - name: property_name
    image: $lib/images/planet.webp
    preset: mobile

JSON of the property:

    
{
    "format": "webp",
    "width": 300,
    "height": 171,
    "space": "srgb",
    "channels": 3,
    "depth": "uchar",
    "isProgressive": false,
    "hasProfile": false,
    "hasAlpha": false,
    "aspect": 1.75,
    "allowUpscale": false,
    "src": "/_app/immutable/assets/planet.osnj-UV8.webp"
}

This example works like all others with the difference that we’re using a preconfigured image definition defined in mdsvex.config.js providing the settings for the remarkImagetools plugin. All properties of these presets can be overridden within the frontmatter which always takes precedence.