♻️ Change svg screenshots that are broken to a different format

[Jord-Gui]

Cc: @JackDevAU @tiagov8 @leahy268

As raised by @bradystroud, the screenshot on the website and repo that is svg format is broken. Change it to png. Can even optimise all images to be in WebP. Check out this convo with ChatGPT on the benefits of WebP.

Figure: SVG not loading on website

Figure: SVG not loading on GitHub readme

Tasks

Preview Give feedback

1. Swap broken svg to png
2. Investigate webp and implement

[Jord-Gui]

FYI In regards to my discussion with @bradystroud where GPT4 said using next/image automatically converts png to webp and we thought it was spouting nonsense: our NextJS build configuration currently has Image set to 'unoptimised' to resolve a path issue where the images weren't loading. Thus, the Image component may in fact natively convert png to webp if we can just get the pathing issue resolved.

Figure: Blank images due to path issue from Image optimisation

Figure: Weird path to images after Image optimisation

Figure: NextJS Image set to unoptimised to resolve blank website screenshots

Figure: Documentation on NextJS Image optimisation

[Jord-Gui]

As per discussion with @amankumarrr, the Image Optimization API is not actually available for exported applications, per source Stack Overflow and NextJS documentation

Figure: Stack overflow answer

Figure: NextJS documentation

@christianmorfordwaitessw has raised a potential solution to use the Next Image Export Optimizer npm package.

Figure: npm site for next image export optimizer