Added example for sizes attribute #40017
Conversation
github-actions
bot
added
Content:HTML
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.
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 ? |
|
|
||
| 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.
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.
It evaluate the media conditions before loading the image.
| For example: | ||
|
|
||
| ```html | ||
| <img |
There was a problem hiding this comment.
this is a <picture> reference page. The example doesn't use the <picture> element
There was a problem hiding this comment.
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.
okay I will update.
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
…e; removed deep dive and added references to <img> and <source>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
…te; removed deep dive and added references to <img> and <source>
|
@estelle please review I have updated changes. |
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. |
|
@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
sizesattribute 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
sizesattribute was previously referenced but not properly introduced or explained, which could confuse readers unfamiliar with how responsive images work. This change helps users understand whysizesis important, how it affects image selection fromsrcset, and what to expect across different browsers.Additional details
sizesdocsRelated issues and pull requests
Fixes #39689