How does Next Image optimization work when image is fetched?
Unanswered
Thrianta posted this in #help-forum
ThriantaOP
Hello,
I have application where users upload their profile photos.
Currently, I am using api route and sharp library to compress the original image and mage 3 different image files 1. 1080px 2. 320px 3. 150px
However, do I really need to do all of this myself? Does next js do all of this itself?
For example if I have a 2mb image in my storage, would next js download a smaller version of it - maybe 200kb or would it still download 2mb anyways?
I have application where users upload their profile photos.
Currently, I am using api route and sharp library to compress the original image and mage 3 different image files 1. 1080px 2. 320px 3. 150px
However, do I really need to do all of this myself? Does next js do all of this itself?
For example if I have a 2mb image in my storage, would next js download a smaller version of it - maybe 200kb or would it still download 2mb anyways?
2 Replies
Cinnamon
Yeah, next js will load whatever image should be loaded for the screen size. It'll also automatically change it to webp, which is lighter on your download time.
That's to the client, though. Not sure if it would download the full file from sharp or not.