-
Notifications
You must be signed in to change notification settings - Fork 22.8k
Added example for sizes attribute #40017
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
Conversation
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Preview URLs (comment last updated: 2025-07-23 12:31:32) |
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for the PR, but the information provided does not fully reflect the specification (https://html.spec.whatwg.org/multipage/embedded-content.html#attr-source-sizes). Please revise and grammar check to get this reviewed.
Ok I will revise |
Co-Authored-By: Estelle Weyl <estelle@openwebdocs.org>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
updated content please review @estelle |
Do I need to make any other changes @estelle ? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
An example of sizes could be added to the <sources>
page. A dive into sizes is appropriate for those two pages, not this one, though we can provide an example here. The example on the <picture>
page must be a <picture>
example.
|
||
The [`sizes`](/en-US/docs/Web/HTML/Reference/Elements/source#sizes) attribute allows you to specify a set of media conditions (similar to media queries) and indicate the image display size (in CSS pixels) for each condition. This helps the browser select the most appropriate image from the `srcset` attribute, which lists images with their [intrinsic](/en-US/docs/Glossary/Intrinsic_Size) widths. | ||
|
||
When the browser loads an image, it: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
does it load the picture then do the following steps, or does evaluate the media conditions before loading the image?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It evaluate the media conditions before loading the image.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I will update.
For example: | ||
|
||
```html | ||
<img |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is a <picture>
reference page. The example doesn't use the <picture>
element
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since the example is written using srcset
attribute we don't need picture element right ? anyways I will include with picture.
|
||
When the browser loads an image, it: | ||
|
||
- Evaluates the media conditions in the `sizes` attribute from left to right. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
okay I will update.
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
…e; removed deep dive and added references to <img> and <source>
…te; removed deep dive and added references to <img> and <source>
@estelle please review I have updated changes. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
more feedback
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@estelle please review, I have changed the contents. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thanks!
@jvlavan Please delete your fork and re-fork, or force-sync your main branch with our main, before you make your next PR. Never commit directly to your main branch and reuse it for PRs because you are pulling in unrelated commits in this PR. (I should not be included as a committer for this PR) |
Ok next time I will do |
Description
Clarified how the
sizes
attribute works withsrcset
, including a detailed explanation and example of how it helps the browser choose the optimal image based on screen size and device pixel ratio. Also added notes on browser-specific behavior when resizing.Motivation
The
sizes
attribute was previously referenced but not properly introduced or explained, which could confuse readers unfamiliar with how responsive images work. This change helps users understand whysizes
is important, how it affects image selection fromsrcset
, and what to expect across different browsers.Additional details
sizes
docsRelated issues and pull requests
Fixes #39689