cssnext.jsimage-optimizationnextjs-image

What image size should be used with Next.js?


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.


Solution

  • 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.