pankajparashar
commented
7 months ago An alternative could be to host the images on Image CDNs like Cloudinary (which offers a generous free tier), and then dynamically fetch images of different sizes, shapes and formats by just altering the URL.
Example,
# original image
https://res.cloudinary.com/<project>/image/upload/example1.png
# image with width 450px
https://res.cloudinary.com/<project>/image/upload/w_450/example1.png
# image in webp format
https://res.cloudinary.com/<project>/image/upload/w_450/example1.webp
Images tend to be quite big, but they're mostly shown at small sizes on the site.
They appear at max ~450 pixels in the various lists of tips. And at max ~800 pixels in a tip page. Only when you click on the image do you see it full size.
We should therefore generate thumbnail versions of all images (at 450px and 800px) at build time, preferably as WebP format, and then use these instead of the original images.
The Image plugin should be able to do this: https://www.11ty.dev/docs/plugins/image/
Doing this would have the biggest impact on the load performance of the website.