The default configuration of eleventy-img produces invalid HTML when generating the picture element.
Eleventy Configuration
import {eleventyImageTransformPlugin} from "@11ty/eleventy-img";
export default function (config) {
config.addPlugin(eleventyImageTransformPlugin);
config.addPassthroughCopy("src/*.png");
return {
templateFormats: ["liquid"],
dir: {
input: "src",
output: "dist"
}
}
}Input (index.liquid)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
</head>
<body>
<img loading="lazy"
width="400"
src="book.png"
alt="book">
</body>
</html>Output (index.html)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
</head>
<body>
<picture><source type="image/webp" srcset="/42PeHp8ntF-400.webp 400w"><img loading="lazy" width="400" src="/42PeHp8ntF-400.jpeg" alt="book" height="565"></picture>
</body>
</html>W3C Markup Validation Service
Error: When the srcset attribute has any image candidate string with a width descriptor, the sizes attribute must also be specified.
[From line 10, column 10; to line 10, column 70](https://validator.w3.org/nu/#l10c70)
↩<picture><source type="image/webp" srcset="/42PeHp8ntF-400.webp 400w"><img l
A minimal reproducible example is attached: eleventy-test.zip
The default configuration of
eleventy-imgproduces invalid HTML when generating thepictureelement.Eleventy Configuration
Input (
index.liquid)Output (
index.html)W3C Markup Validation Service
A minimal reproducible example is attached: eleventy-test.zip