Setup automatic image optimization pipeline

[parlough]

Use 11ty's first-party image transformation plugin to automatically optimize images, convert them to png, webp, and avif, and then transform the site HTML to use the <picture> element to select the best one for the user. This only runs in production deploy builds to reduce serving time. Also applies lazy loading and async decoding to all images, even when serving without optimizations. The transform also adds a hash of the image, allowing us to expand caching for images in Firebase hosting.

To account for the transformed HTML structure, some minor HTML and CSS changes were needed as well.

Overall, this reduces page load time on pages that use images, and reduces unnecessary downloads that were due to a relatively short cache time for images. On a page with just a few images, such as https://dart.dev/tools/pub/automated-publishing, the lighthouse perf score increases around 10-15 points.

Fixes #4473
Fixes #3124

[dart-github-bot]

Visit the preview URL for this PR (updated for commit 3a1d92a):

https://dart-dev--pr5779-feat-image-opt-db6dftoy.web.app

[atsansone]

@parlough : I see no reason not to make this change, but I'm not seeing any benefit. Both the staged version and live version of https://dart.dev/web/debugging and https://dart.dev/tools/pub/automated-publishing, Lighthouse scores were 97 for all.

Current

Staged