Incorrect default image dimensions from generated HTML

[Jorn Mineur]

Hi,

I'm encountering an issue with the HTML generated by eleventy-img.

The dimensions of the fallback image don't match its width and height attributes. The src points to the 360w-version of the image, but the width and height belong to the 2160w-version.

<picture>
    <source type="image/avif" srcset="/images/interview-360w.avif 360w, /images/interview-540w.avif 540w, /images/interview-720w.avif 720w, /images/interview-1080w.avif 1080w, /images/interview-1440w.avif 1440w, /images/interview-2160w.avif 2160w" sizes="(max-width: 779px) calc(100vw - 56px), 720px">
    <source type="image/jpeg" srcset="/images/interview-360w.jpeg 360w, /images/interview-540w.jpeg 540w, /images/interview-720w.jpeg 720w, /images/interview-1080w.jpeg 1080w, /images/interview-1440w.jpeg 1440w, /images/interview-2160w.jpeg 2160w" sizes="(max-width: 779px) calc(100vw - 56px), 720px">
    <img alt="AI-image of a man and a woman during a job interview" src="/images/interview-360w.jpeg" width="2160" height="1213">
</picture>

This is my code in module.exports

    // --- START, eleventy-img
    function imageShortcode(src, alt, sizes = "(max-width: 775px) calc(100vw - 56px), 720px") {
        console.log(`Generating image(s) from:  ${src}`)
        let options = {
            widths: [360, 540, 720, 1080, 1440, 2160],
            formats: ["avif", "jpeg"],
            sharpAvifOptions: {
                quality: 70,
                effort: 9
            },
            urlPath: "/assets/images/",
            outputDir: "_build/assets/images/",
            filenameFormat: function(id, src, width, format, options) {
                const extension = path.extname(src)
                const name = path.basename(src, extension)
                return `${name}-${width}w.${format}`
            }
        }

        // generate images
        Image(src, options)

        let imageAttributes = {
            alt,
            sizes,
            // loading: "lazy",
            // decoding: "async",
        }
        // get metadata
        metadata = Image.statsSync(src, options)
        return Image.generateHTML(metadata, imageAttributes)
    }
    eleventyConfig.addShortcode("image", imageShortcode)
    // --- END, eleventy-img

Thanks a bundle for taking a look!

[Mike B.]

I'm experiencing the same problem.

[Jorn Mineur]

@themikejr @zachleat
I created a PR to fix this issue: #167

[Mike B.]

I arrived at a temporary solution. If you remove the height and width attributes from the generated HTML, chrome seems to do ok and figure out the right image to use:

imageHTML.replace(/width="(.*?)"/, '').replace(/height="(.*?)"/, '');

[Jorn Mineur]

I arrived at a temporary solution. If you remove the height and width attributes from the generated HTML, chrome seems to do ok and figure out the right image to use [...]

Interesting... thanks for sharing! 👍

[Jorn Mineur]

I now believe this is not a bug after all, but intentional behaviour.

See the example DIY code in the 11ty documentation.

[Jorn Mineur]

Closing as this is not a bug after all.

[Zach Leatherman]

Just circling back here, this is intentional, I wrote this blog post about it: https://www.zachleat.com/web/fluid-images/