Implement responsive image helpers

[alexgibson]

Description

Bedrock has long been missing a set of more fully-featured responsive image helpers for front-end work. Right now we have the high_res_img helper that serves images for high resolution screens, but this is not an ideal approach in most cases, as it doesn't let the browser pick the most appropriate image size to use based on the viewport (see https://github.com/mozilla/bedrock/issues/6962). It's only really meant for serving fixed size images at different screen resolutions. The result is in many cases we're serving oversized @2x images to visitors on mobile.

Creating a more fully featured resp_img helper where we can specify different image sizes and provide guidance for how browsers should select them could help to improve the performance of our web pages.

Another helper that could be useful is a <picture> helper, where we want to different types of image responsively. For example, "Serve image A on desktop and image B on mobile", or "Serve a WebP image for newer browsers and fall back to PNG for older browsers" (see https://github.com/mozilla/bedrock/issues/6766).

Related reading:

• https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
• https://jakearchibald.com/2015/anatomy-of-responsive-images/
• https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/

Success criteria

• [ ] Implement resp_img() and picture() helpers (with tests).
• [ ] Incorporate helpers to be used with Protocol macros.
• [ ] Use helpers on one or more key product pages to improve page performance.
• [ ] Add responsive images section to bedrock docs.

[alexgibson]

Fleshing out some requirements:

• Add a high_res_img helper that supports specifying multiple images using srcset and sizes.
• Add a picture helper that supports:
  • Serving different <source> images based on media (e.g. screen size).
  • Serving different <source> images based on type (e.g. WebP, falling back to PNG)

Both helpers should support L10n images and optional lazy loading. In older browsers, everything should fall back to using src.