Good way to use Image component for optimization
Unanswered
Pacific herring posted this in #help-forum
Pacific herringOP
Okay im gonna start this post to find the good practice for optimize image in a NextJS app. Well Ive made a custom component
Firstly, I was thinking at the begining that with
So the first question is what should I use
But I also dont understand how work
yo @Arinji @American Crow
ImageWithFallback that I use everytime instead of directly Image just for having fallback if image dont exist.Firstly, I was thinking at the begining that with
fill props the width was automatically calculate based on the parent container but isnt so Ive something wrong.So the first question is what should I use
width and height or fill ? I guess use width and height is probably better because if I have multiple size of image in a same page (like big poster and little one) I can load big size image for little render size.But I also dont understand how work
width and height because if both are needed how can I know the size without having the ratio ?yo @Arinji @American Crow
4 Replies
Netherland Dwarf
Next.js image already has a fallback its called placeholder blur
Also you can still use fill property but the parent you can the height as padding top since the box model adds height by default with padding or margins
And set the width to fix width in the parent
@Netherland Dwarf Next.js image already has a fallback its called placeholder blur
Pacific herringOP
Sry I forgot to precise that is for optimize the image size (with a images server like VErcel does for optimize images)