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

Docs: Clarity on the width and height properties of the Image component #68228

Closed
NickWoodward opened this issue Jul 27, 2024 · 5 comments · Fixed by #68248
Closed

Docs: Clarity on the width and height properties of the Image component #68228

NickWoodward opened this issue Jul 27, 2024 · 5 comments · Fixed by #68248
Labels
Documentation Related to Next.js' official documentation. locked

Comments

@NickWoodward
Copy link

What is the update you wish to see?

Might be a mistake on my part, but I feel like the docs are in need of a bit of clarity on the width and height attributes of the Image component?

Here they're defined as representing the rendered sizes:

The width property represents the rendered width in pixels, so it will affect how large the image appears.

But here it states that they do not:

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.

Feel like it should be the latter, the intrinsic values, so that it's inline with the <img> tag?

Is there any context that might help us understand?

As above

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/pages/api-reference/components/image#width

@NickWoodward NickWoodward added the Documentation Related to Next.js' official documentation. label Jul 27, 2024
@Tim-Zj
Copy link
Contributor

Tim-Zj commented Jul 28, 2024

Hi @NickWoodward,
Thanks for pointing out the inconsistency in the documentation regarding the width and height attributes of the Image component. I'm currently working on a fix to clarify this in the docs. I'll keep you posted on the progress and provide a link to the PR once it's ready.
Best regards,
Tim

@Tim-Zj
Copy link
Contributor

Tim-Zj commented Jul 28, 2024

Hi @NickWoodward,
I've updated the documentation to clarify that the width and height properties represent the intrinsic dimensions of the image, similar to the width and height attributes in the HTML <img> tag. These properties are used to infer the correct aspect ratio and avoid layout shift during loading, and do not determine the rendered size of the image, which is controlled by CSS.

You can find the updated documentation in this [PR].
Best regards,
Tim

@NickWoodward
Copy link
Author

Thanks Tim, good to know it's the intrinsic size :)

@Tim-Zj
Copy link
Contributor

Tim-Zj commented Jul 30, 2024

This issue is addressed in PR #68248

Copy link
Contributor

github-actions bot commented Oct 2, 2024

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot added the locked label Oct 2, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 2, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Documentation Related to Next.js' official documentation. locked
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants