[Feature] Replace <img> with Next Image

[xHayden]

Context

Some images are loaded with the <img> tag instead of <Image> from Next.js. We should use that instead, since it optimizes loading.
Images should also be stored as webp for compression reasons/loading.

Requirements

Frontend

• Use <Image> instead of <img> where possible

Backend

• Create webp versions of each stored png/jpeg/etc

Acceptance Criteria

• Replace uses of HTML img with Next Image
• Use webp versions of stored image files instead of other filetypes
• Ensure that images remain reactive
• Ensure images do not have layout shifts (See notes)

Notes

Next Image
Responsive Images/Static Images without Layout Shifts

Because next/image is designed to guarantee good performance results, it cannot be used in a way that will contribute to layout shift, and must be sized in one of three ways:

1. Automatically, using a static import
2. Manually, by including a width and height property used to determine the image's aspect ratio.
3. Implicitly, by using fill which causes the image to expand to fill its parent element.