We are not using any image optimisation in the frontend but there are some tools available to us which would reduce image load times.
For a comparison of how images have changed during the move from Gatsby to Next.js see this PR conversation, but the TL;DR is: not much.
The blog is the most obvious location, where some images are 1MB+. Shifting from <img> to <Image> (from next/image) should help a lot.
In the rest of the site we use a slightly different approach for sourcing images (detailed in above PR conversation) but the same optimizations should be available to us. As an example the /pathogens page includes 2MB of pathogen tile images, 0.3Mb of team images and 0.4MB of logos, while the data for all the snapshot versions is only 0.02MB. For comparison, the JS bundles total 0.6MB. But ~all of these are cached, and so it's not nearly as bad as it seems.
We are not using any image optimisation in the frontend but there are some tools available to us which would reduce image load times.
For a comparison of how images have changed during the move from Gatsby to Next.js see this PR conversation, but the TL;DR is: not much.
The blog is the most obvious location, where some images are 1MB+. Shifting from
<img>to<Image>(fromnext/image) should help a lot.In the rest of the site we use a slightly different approach for sourcing images (detailed in above PR conversation) but the same optimizations should be available to us. As an example the /pathogens page includes 2MB of pathogen tile images, 0.3Mb of team images and 0.4MB of logos, while the data for all the snapshot versions is only 0.02MB. For comparison, the JS bundles total 0.6MB. But ~all of these are cached, and so it's not nearly as bad as it seems.