Set up 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 7aca287):

https://dart-dev--pr5779-feat-image-opt-vhu98xo4.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

[parlough]

@atsansone You'll see increased improvements for a mobile report or with a lot more images. Another benefit of this change is the much improved caching, as the plugin adds hashes to the image URLs, allowing us to extend the cache time of images greatly.

As another metric for those pages without any caching benefits, visiting the automated publishing page with simulated slow 3g, dropped load time from 28s->21s.