{
    "component": "image",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "src": "/example-assets/images/300x200.jpg",
                "alt": "Placeholder image showing its intrinsic dimensions",
                "lazy": true,
                "widths": {
                    "mobile": "100vw"
                },
                "sources": [
                    {
                        "type": "image/webp",
                        "sources": [
                            {
                                "src": "/example-assets/images/300x200.webp",
                                "width": 300
                            },
                            {
                                "src": "/example-assets/images/600x400.webp",
                                "width": 600
                            },
                            {
                                "src": "/example-assets/images/1200x800.webp",
                                "width": 1200
                            },
                            {
                                "src": "/example-assets/images/1800x1200.webp",
                                "width": 1800
                            }
                        ]
                    },
                    {
                        "type": "image/jpeg",
                        "sources": [
                            {
                                "src": "/example-assets/images/300x200.jpg",
                                "width": 300
                            },
                            {
                                "src": "/example-assets/images/600x400.jpg",
                                "width": 600
                            },
                            {
                                "src": "/example-assets/images/1200x800.jpg",
                                "width": 1200
                            },
                            {
                                "src": "/example-assets/images/1800x1200.jpg",
                                "width": 1800
                            }
                        ]
                    }
                ]
            },
            "html": "<picture class=\"lbcamden-image__wrapper\">\n  \n\n  \n    \n    \n\n    <source\n      type=\"image/webp\"\n      srcset=\"/example-assets/images/300x200.webp 300w, /example-assets/images/600x400.webp 600w, /example-assets/images/1200x800.webp 1200w, /example-assets/images/1800x1200.webp 1800w\"\n      sizes=\"100vw\"\n    />\n  \n    \n    \n\n    <source\n      type=\"image/jpeg\"\n      srcset=\"/example-assets/images/300x200.jpg 300w, /example-assets/images/600x400.jpg 600w, /example-assets/images/1200x800.jpg 1200w, /example-assets/images/1800x1200.jpg 1800w\"\n      sizes=\"100vw\"\n    />\n  \n\n  \n\n  <img\n    class=\"lbcamden-image \"\n    src=\"/example-assets/images/300x200.jpg\"\n    alt=\"Placeholder image showing its intrinsic dimensions\"\n    \n    \n    loading=\"lazy\"\n    style=\"\"\n  />\n</picture>",
            "hidden": false
        },
        {
            "name": "single source",
            "options": {
                "src": "/example-assets/images/300x200.jpg",
                "alt": "Placeholder image showing its intrinsic dimensions",
                "lazy": true,
                "width": 300,
                "height": 200
            },
            "html": "<picture class=\"lbcamden-image__wrapper\">\n  \n\n  \n\n  \n\n  <img\n    class=\"lbcamden-image \"\n    src=\"/example-assets/images/300x200.jpg\"\n    alt=\"Placeholder image showing its intrinsic dimensions\"\n    width=\"300\"\n    height=\"200\"\n    loading=\"lazy\"\n    style=\"\"\n  />\n</picture>",
            "hidden": false
        },
        {
            "name": "size to aspect ratio",
            "options": {
                "src": "/example-assets/images/1200x800.jpg",
                "alt": "Placeholder image showing its intrinsic dimensions",
                "lazy": true,
                "width": 1200,
                "height": 800,
                "resizeToAspectRatio": true,
                "attributes": {
                    "style": "width: 30em;"
                }
            },
            "html": "<picture class=\"lbcamden-image__wrapper\">\n  \n\n  \n\n  \n\n  <img\n    class=\"lbcamden-image \"\n    src=\"/example-assets/images/1200x800.jpg\"\n    alt=\"Placeholder image showing its intrinsic dimensions\"\n    width=\"1200\"\n    height=\"800\"\n    loading=\"lazy\"\n    style=\"width: 30em;\"\n  />\n</picture>",
            "hidden": false
        },
        {
            "name": "with multiple viewports",
            "options": {
                "src": "/example-assets/images/300x200.jpg",
                "alt": "Placeholder image showing its intrinsic dimensions",
                "lazy": true,
                "widths": {
                    "mobile": "100vw",
                    "desktop": "50vw",
                    "large": "25vw"
                },
                "sources": [
                    {
                        "type": "image/webp",
                        "sources": [
                            {
                                "src": "/example-assets/images/300x200.webp",
                                "width": 300
                            },
                            {
                                "src": "/example-assets/images/600x400.webp",
                                "width": 600
                            },
                            {
                                "src": "/example-assets/images/1200x800.webp",
                                "width": 1200
                            },
                            {
                                "src": "/example-assets/images/1800x1200.webp",
                                "width": 1800
                            }
                        ]
                    },
                    {
                        "type": "image/jpeg",
                        "sources": [
                            {
                                "src": "/example-assets/images/300x200.jpg",
                                "width": 300
                            },
                            {
                                "src": "/example-assets/images/600x400.jpg",
                                "width": 600
                            },
                            {
                                "src": "/example-assets/images/1200x800.jpg",
                                "width": 1200
                            },
                            {
                                "src": "/example-assets/images/1800x1200.jpg",
                                "width": 1800
                            }
                        ]
                    }
                ]
            },
            "html": "<picture class=\"lbcamden-image__wrapper\">\n  \n\n  \n    \n    \n\n    <source\n      type=\"image/webp\"\n      srcset=\"/example-assets/images/300x200.webp 300w, /example-assets/images/600x400.webp 600w, /example-assets/images/1200x800.webp 1200w, /example-assets/images/1800x1200.webp 1800w\"\n      sizes=\"(min-width: 768px) 50vw, 100vw\"\n    />\n  \n    \n    \n\n    <source\n      type=\"image/jpeg\"\n      srcset=\"/example-assets/images/300x200.jpg 300w, /example-assets/images/600x400.jpg 600w, /example-assets/images/1200x800.jpg 1200w, /example-assets/images/1800x1200.jpg 1800w\"\n      sizes=\"(min-width: 768px) 50vw, 100vw\"\n    />\n  \n\n  \n\n  <img\n    class=\"lbcamden-image \"\n    src=\"/example-assets/images/300x200.jpg\"\n    alt=\"Placeholder image showing its intrinsic dimensions\"\n    \n    \n    loading=\"lazy\"\n    style=\"\"\n  />\n</picture>",
            "hidden": false
        },
        {
            "name": "attributes",
            "options": {
                "sources": [
                    {
                        "type": "image/webp",
                        "sources": [
                            {
                                "src": "/example-assets/images/300x200.webp",
                                "width": 300
                            }
                        ]
                    }
                ],
                "attributes": {
                    "data-test-attribute": "value",
                    "data-test-attribute-2": "value-2"
                }
            },
            "html": "<picture class=\"lbcamden-image__wrapper\">\n  \n\n  \n    \n    \n\n    <source\n      type=\"image/webp\"\n      srcset=\"/example-assets/images/300x200.webp 300w\"\n      sizes=\"\"\n    />\n  \n\n  \n\n  <img\n    class=\"lbcamden-image \"\n    src=\"\"\n    alt=\"\"\n    \n    \n     data-test-attribute=\"value\" data-test-attribute-2=\"value-2\"\n    style=\"\"\n  />\n</picture>",
            "hidden": true
        },
        {
            "name": "classes",
            "options": {
                "sources": [
                    {
                        "type": "image/webp",
                        "sources": [
                            {
                                "src": "/example-assets/images/300x200.webp",
                                "width": 300
                            }
                        ]
                    }
                ],
                "classes": "app-image--custom-modifier"
            },
            "html": "<picture class=\"lbcamden-image__wrapper\">\n  \n\n  \n    \n    \n\n    <source\n      type=\"image/webp\"\n      srcset=\"/example-assets/images/300x200.webp 300w\"\n      sizes=\"\"\n    />\n  \n\n  \n\n  <img\n    class=\"lbcamden-image app-image--custom-modifier\"\n    src=\"\"\n    alt=\"\"\n    \n    \n    \n    style=\"\"\n  />\n</picture>",
            "hidden": true
        }
    ]
}