Implement a reusable img component

[ghost]

Various pages on the site make use of the img tag. Let's implement a reusable Img React component, which provides a simpler interface and sensible defaults. This issue is similar to #427.

[ghost]

As part of this issue, it would be useful to research best practices on when to use background images versus an image tag for decorative images. This component could provide a parameter to pick the appropriate implementation.

[cdaringe]

For image tags:

• next/image already applies various best practices: https://nextjs.org/docs/api-reference/next/image
• height + width should ALWAYS be supplied, because in tandem they behave as an aspect ratio, give the image a non empty bounding box on download, then actual height/width may be overridden using CSS. this improves CLS metric. Jen Simmons has a video on it

for either type of image, likely preload it if it is top of page or in the header