captainbrosset/devtools-tips

Improve performance by resizing/converting images

Opened this issue · 1 comments

captainbrosset commented

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.

pankajparashar commented

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
  • 👍1