[Catalog] Automate image minification and webp conversion

Nobody has claimed this yet.

### Description

Currently we hand-author images and sometimes don't even convert it to modern image size formats such as webp. Additionally, we do not provide multiple rendering sizes for images.

Eleventy offers a tool with their [image plugin](https://www.11ty.dev/docs/plugins/image/) to help automate that, but to consume them, you need to often input a shortcode. We do not want any visual artifacts in the raw markdown as it will affect our documentation on GitHub and inside Google's g3doc markdown site rendering system. So there are 2 tasks associated with this:

1. Integrate the eleventy image plugin
2. Integrate a plugin that can detect the image location and replace the native markdown image

I have my concerns about the feasibility of #2 in one step, so we may have to leverage the `/catalog/scripts/copy-docs.mjs` module's transform feature to pre-process the docs and scrape this information. Then there is the other step of integrating it to the eleventy-specific parts of the site

### Browser/OS Environment

_No response_

Start by reading /catalog/scripts/copy-docs.mjs and the Eleventy image plugin documentation linked in the issue. Determine how native Markdown images can be detected and transformed without changing raw Markdown rendering on GitHub or g3doc, then integrate the preprocessing and Eleventy-specific steps. Done means images are minified, converted to WebP, and served in multiple rendering sizes.

Written by the indexing model from the issue text.