How to find THE good image's size ?
Answered
Ninhache posted this in #help-forum
NinhacheOP
According to https://nextjs.org/docs/app/building-your-application/optimizing/images#remote-images
The width and height attributes are used to infer the correct aspect ratio of image and avoid layout shift from the image loading in. The width and height do not determine the rendered size of the image file.
So, How to find THE good image's size ?.. In a context of a blog, where the users can be on mobile or on PC, when you got multiple views ...
And even, If I'm on PC with a 14" screen.. the render won't be the same if i've a 32" screen..
That's not really a NextJS question, that's probably more general..
~~
That's only theory but.. using CSS I would know the size of the image so I might be able to solve what's I'm trying to do using CSS :
Instead of giving a width/height, using a Suspense that will scale up on how parent is can be "better" no ?
That looks possible using layout.. but they removed it according to https://nextjs.org/docs/messages/next-image-upgrade-to-13
The width and height attributes are used to infer the correct aspect ratio of image and avoid layout shift from the image loading in. The width and height do not determine the rendered size of the image file.
So, How to find THE good image's size ?.. In a context of a blog, where the users can be on mobile or on PC, when you got multiple views ...
And even, If I'm on PC with a 14" screen.. the render won't be the same if i've a 32" screen..
That's not really a NextJS question, that's probably more general..
~~
That's only theory but.. using CSS I would know the size of the image so I might be able to solve what's I'm trying to do using CSS :
Instead of giving a width/height, using a Suspense that will scale up on how parent is can be "better" no ?
That looks possible using layout.. but they removed it according to https://nextjs.org/docs/messages/next-image-upgrade-to-13
Answered by Netherland Dwarf
https://m.youtube.com/watch?v=gpJKj45AikY&t=638s&pp=ygUTTmV4dC5qcyBpbWFnZSBzaXplcw%3D%3D
You can watch this on how to use it.
You can watch this on how to use it.
14 Replies
Amur catfish
You just need to know the size of the image as those props are for getting rid of layout shifts. You can use the
sizes prop for setting the sizes on which image size to download from next: https://nextjs.org/docs/pages/api-reference/components/image#sizesNetherland Dwarf
You can use the linter extension
It calculates and shows what the sizes prop should be for all images
@B33fb0n3 You can use the fill property on images to fill up available space
NinhacheOP
no it's deprecated
@Amur catfish You just need to know the size of the image as those props are for getting rid of layout shifts. You can use the `sizes` prop for setting the sizes on which image size to download from next: https://nextjs.org/docs/pages/api-reference/components/image#sizes
NinhacheOP
I've seen that, I didnt test it yet tho..
Am I able to put à calc or something inside of the input ?
Am I able to put à calc or something inside of the input ?
@Netherland Dwarf You can use the linter extension
NinhacheOP
What is that, any docs or something?
Netherland Dwarf
Lint images its called
Il try to find the link
Netherland Dwarf
To use it, you just need to download it and i think it has instructions,
And then click it on any page which has imagez
Netherland Dwarf
https://m.youtube.com/watch?v=gpJKj45AikY&t=638s&pp=ygUTTmV4dC5qcyBpbWFnZSBzaXplcw%3D%3D
You can watch this on how to use it.
You can watch this on how to use it.
Answer
NinhacheOP
fine thanks I will look