Some of our GOATs have big images, and we love them for that but it makes browsers a little unhappy. This PR uses parcel's built-in image optimization to:
resize the thumbnail images to 400px max width
use modern formats (avif, else webp) for all images in browsers that support them
This cuts the initial page load bundle size in half, from 3.3MB to 1.2MB, and makes Lighthouse's performance score increase from 91 ➡️ 98
Note that I kept the modal images the same size (although they also get format re-encoding). I think we can probably scale these down quite a bit too, but for now I didn't want to decide on what the max width should be.
Some of our GOATs have big images, and we love them for that but it makes browsers a little unhappy. This PR uses parcel's built-in image optimization to:
avif, elsewebp) for all images in browsers that support themThis cuts the initial page load bundle size in half, from 3.3MB to 1.2MB, and makes Lighthouse's performance score increase from 91 ➡️ 98
Note that I kept the modal images the same size (although they also get format re-encoding). I think we can probably scale these down quite a bit too, but for now I didn't want to decide on what the max width should be.