Proposal: NextImage should automatically determine width/height for local images

[Timer]

Feature request

It'd be really cool if NextImage automatically configured width and height for local images, as well as automatically hashing the image.

Describe the solution you'd like

import Logo from "../logo.png";
import Image from "next/image";

// Logo = { src: '<basePath>/_next/media/logo-<hash>.png', width: 200, height: 150 }
<Image src={Logo} alt="Vercel" />

Describe alternatives you've considered

N/A

Additional context

Currently, you have to manually set the width and height for a local image. Plus, the image paths aren't statically verified like an import would be.

[neilpalima]

This is a reason why I cannot use next/image since I need to provide the width and height. It will be great if it can be used with using css width and height (ex. value of 100%) or something similar.

[agcty]

This is a reason why I cannot use next/image since I need to provide the width and height. It will be great if it can be used with using css width and height (ex. value of 100%) or something similar.

You actually can with the "unsized" property

[neilpalima]

@agcty I tried that but got a not good result.

[agcty]

@Timer One thing that might be possible is probing for the image dimensions of the remote or local resource without downloading it. I read something about this several weeks ago and it seems a perfect use case for this. If no width and height are set and unsized is not set as well, the image component could probe the dimensions and populate width and height automatically.

I can dimly remember that HTTP3 will make this really easy but not entirely sure. For reference there's a library that does something similar: https://github.com/nodeca/probe-image-size/

[agcty]

@agcty I tried that but got a not good result.

What did you try and what was the result?

[Timer]

@neilpalima we're landing a change to <NextImage /> right now that'll allow you to specify various layouts for your image! See #18491

[Nicoowr]

@Timer I don't understand how #18491 is solving the issue tackled by the proposal? 😅 What I'd expect is that if one provides width=200px, <Image/> will determine height by itself? Or as a temporary solution, could I use a custom wrapper which reads the dimensions of my image, calculates the missing dimension and injects it to <Image /> ?

[gregkonush]

it would nice infer width size if the height prop was passed and the opposite way as well

[leerob]

One idea: we can read the width and height with the Node package image-size. I used this package to automate adding widths and heights to my images.

Maybe it's possible to use this at build time, assuming it doesn't negatively affect build time with lots of images.

[moaaz-bhnas]

Or as a temporary solution, could I use a custom wrapper which reads the dimensions of my image, calculates the missing dimension and injects it to ?

@Nicoowr I like the idea, but won't a custom wrapper require loading the image to get its aspect ratio and do the calculation? which means loading the image twice everytime an image needs to be displayed.