Image optimization in Plamsic is sort of nuts

The image optimization in Plasmic is sort of nuts. I uploaded these multi mb images, and wondered why they were loading so fast. Then I realized they were compressed to webp, and didn’t lose any quality.

I would also love to know a bit more about how it works, but mostly wanted to say good job with that stuff.

Thank you, @innovative_grouse! I believe we don’t have a doc with details about it (the closest to it is probably the announcement), but to provide you a very high level overview the optimization works in two parts: an image optimization server (that optimizes and caches images to serve) and a PlasmicImg component in the client (that works similarly to next/image). The general idea is to automatically serve resized images for different window sizes and screen densities, to minimize content layout shift for images with dynamic widths, to lazy load the images, and to use webp when the browser supports it.

I think Chung shared some technical insights regarding this in a tweet. The following might helps
https://twitter.com/chungwu/status/1509301201849896961?t=7KZraInsO7AuZbQSvtZ7Ig&s=19