Image Styling

[twblack88]

Description

Gatsby handling images is a little wonky, so to try and make pages more consistent we wanted to finally solve for some image styling/performance, get imgur to behave, avoid making a massive build time with static images, and make sure we caught all use cases. There also happens to be a need for gif support.

Use Cases

Governance content and community editorial content:

• Governance and Risk meetings use a ton of Imgur links. They'd like to include GIF support if possible.
• Additionally a build warning on Imgur links without an extension like .jpg, .png, etc. would be 👌
• Header images from shea are consistent but some other pages have images that run quite large. Wrapping images so they conform would be helpful. @shea-fitz feel free to provide some loose guidance on how to style images in the portal. 🙇
• Community and governance updates will likely use imgur links when uploading a photo to src/images isn't appropriate.

Tasks

• [ ] We wanted to do some research on lazy-load for images, improving build times.
• [ ] See if this component for GIF handling in gatsby is helpful.
• [ ] Query data-link- also relates to suggested posts data in publications (@MaximumCrash feel free to help me edit this part, my notes weren't accurate )