How does image optimization work?

Hey guys, I am using Plasmic + NextJs, it is really amazing!
So I read that plasmic supports image optimization, but I cannot find much informations about it.
How does it work? Should I bother replacing my components with NextImage?

Thank you in advance!

Hi! Image optimization works automatically over any images that are stored in Plasmic, such as images you upload, drag-and-drop, or paste. (It does not do anything with externally hosted images, where you are just pasting the URL.)

It’s independent from NextImage, which you would continue to use for your own images that are in your codebase and not in Plasmic designs.

Cool cool! you really have everything on point!

@yang - I didn’t see Plasmic making use of the sizes prop on optimized image tags (feeding sizes per breakpoint). Wondering if that’s in the works or is unnecessary (did seem like you guys were filtering the srcset a bit based on max size

Right now we are always assuming sizes of 100vw, unless there’s an explicit width set, in which case we generate 1x and 2x of that instead. We could expose a sizes prop to let users fine tune this further, but it feels a tad too esoteric to ask… :thinking_face:

@chungwu - I was imagining this would automatically be inferred based on the size of the image on the canvas. We’ve seen significant size savings in loaded image after specifying a per-breakpoint value for sizes. My understanding of next/image was that the you need to specify a set of sizes to ensure that the browser loads the appropriate version of the image from the srcset. Could be missing something though