2

Docs says:

The width of the image, in pixels. Must be an integer without a unit. The height of the image, in pixels. Must be an integer without a unit.

https://nextjs.org/docs/api-reference/next/image

Different devices can have different size. Devices can be desktop or mobile. It is a bit tedious to send the actual size of each image.

I think I do not have to send the exact size of an image, but it is enough that proportion of sent width, height is equal with proportion of actual width and height. Do you agree with me?

So if I look here on the businessman:

https://tiket.hu/sell/services

Businessmen here on Desktop has a 468x346 size, then if I pass width={100} height={74} then returned image will have optimal size. Right? And loading speed will be optimal also.

Zsolt Meszaros
  • 21,961
  • 19
  • 54
  • 57
János
  • 32,867
  • 38
  • 193
  • 353

1 Answers1

2

Right, but the width and height you should be passing needs to be the largest one you're gonna use, for instance, using your example, if the image you're gonna use on desktop is 468x346, you should pass that to your image component width={468} height={346}

The component is gonna optimized the image size for smaller devices but not for bigger ones. The size you pass is the largest one the component is going to return and render.

edgarlr
  • 583
  • 5
  • 7
  • Ahh, ok, and if I pass a smaller size, will client i.e. double download the image with different sizes? – János Feb 24 '21 at 19:09
  • So sneding smaller but proportional size will reduce efficiency? – János Feb 24 '21 at 19:21
  • Exactly, and well the client is only gonna download another image size if the client width changes to a bigger one, which is probably almost never gonna happen outside development, and even on that case is gonna download one at the time. For all the other cases will only download the optimal size for each screen. – edgarlr Feb 24 '21 at 19:38
  • Kind of, cause the idea of the component is that you only pass your largest size needed and all the optimizations is gonna be handled by the component itself, so, if you pass a smaller size that the one you need, it's not gonna be more optimized but you will be dealing with pixelated images – edgarlr Feb 24 '21 at 19:44
  • The other thing you could do is use `layout="responsive"`, that will scale up and down your image based on your proportion, but it will scale up until fill the whole size of the container. This is helpful if you don't know which your largest width is gonna be e.g. a hero or a full screen image, but if you know the max-width and want it to stop scaling up at some point, I would recommend you going the other way – edgarlr Feb 24 '21 at 19:56