Fully Validating Website

Posted on November 30, 2024

Tagged TIL, opie : I may be the only one who cares.

11ty has eleventyImageTransformPlugin which resizes images to give alternatives for smaller viewports like phones. This plug-in was causing my only validation error and I certainly didn't know enough to fix it myself. I searched it up and was surprised it wasn't more widely discussed.

Finally, I found a discussion on this page which led me to this solution.

I added the sizes: '100vw' as follows:

			// e.g.  assigned on the HTML tag will override these values.
			loading: "lazy",
			decoding: "async",
			sizes: '100vw',
		}

and the site validates. All my images look good. The second post above also helped me understand why images aren't transformed when you do a local build until the server requests that page-otherwise, local builds were slow.