Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

next/image should infer image aspect ratio at build time #18496

Closed
gajus opened this issue Oct 29, 2020 · 8 comments
Closed

next/image should infer image aspect ratio at build time #18496

gajus opened this issue Oct 29, 2020 · 8 comments
Milestone

Comments

@gajus
Copy link

gajus commented Oct 29, 2020

It is not clear why does next/image require me to add width and height values when this information can be easily inferred from the image itself at build time.

If there is a rational reason for it, I would at least briefly mention it in the documentation.

@yayvery
Copy link

yayvery commented Oct 29, 2020

Width and height are not required. Use the unsized prop.

@Timer
Copy link
Member

Timer commented Oct 29, 2020

@danbeneventano width and height are required 99.99% of the time and unsized should only be used as a last resort as it severely hurts performance.

@gajus
Copy link
Author

gajus commented Oct 29, 2020

I was going to say. There is a comment:

unsized - When true, the width and height requirement can by bypassed. Should not be used with above-the-fold images. Should not be used with priority.

Thus was my original question – since next.js can infer this information at built time, why doesn't it?

@Timer
Copy link
Member

Timer commented Oct 29, 2020

@gajus Next.js cannot infer this information at build time, as we allow you to pass any image URL you want. It does not have to be from the file system. This type of dynamic input cannot be statically analyzed.

We're going to explore a way to import images in the future, which will automatically set the width and height.

@Timer Timer added this to the backlog milestone Oct 29, 2020
@gajus
Copy link
Author

gajus commented Oct 29, 2020

@gajus Next.js cannot infer this information at build time, as we allow you to pass any image URL you want. It does not have to be from the file system. This type of dynamic input cannot be statically analyzed.

I would imagine that 99% of users will want to use next/image in a way that explicitly refers to a static asset, e.g.

<Image src={require('../images/foo.png')} />

It would seems a simple improvement to next/image to detect these cases and infer the width / height.

That said... I believe I can do this myself with a simple wrapper. I think.

@Timer
Copy link
Member

Timer commented Oct 29, 2020

We're going to explore a way to import images in the future, which will automatically set the width and height.

@Timer
Copy link
Member

Timer commented Oct 29, 2020

Closing in favor of this:
#18497

@Timer Timer closed this as completed Oct 29, 2020
@Timer Timer modified the milestones: backlog, iteration 11 Oct 29, 2020
@balazsorban44
Copy link
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants