Skip to content

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

Merged
merged 30 commits into from
Jul 23, 2025
Merged

Added example for sizes attribute #40017

merged 30 commits into from
Jul 23, 2025

Conversation

jvlavan
Copy link
Contributor

@jvlavan jvlavan commented Jun 21, 2025

Description

Clarified how the sizes attribute works with srcset, 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 why sizes is important, how it affects image selection from srcset, and what to expect across different browsers.

Additional details

Related issues and pull requests

Fixes #39689

@jvlavan jvlavan requested a review from a team as a code owner June 21, 2025 20:20
@jvlavan jvlavan requested review from estelle and removed request for a team June 21, 2025 20:20
@github-actions github-actions bot added Content:HTML Hypertext Markup Language docs size/s [PR only] 6-50 LoC changed labels Jun 21, 2025
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Copy link
Contributor

github-actions bot commented Jun 21, 2025

Preview URLs

(comment last updated: 2025-07-23 12:31:32)

jvlavan and others added 4 commits June 22, 2025 01:55
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>
@jvlavan jvlavan marked this pull request as draft June 25, 2025 17:07
@jvlavan jvlavan marked this pull request as ready for review June 25, 2025 17:08
Copy link
Member

@estelle estelle left a 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.

@jvlavan
Copy link
Contributor Author

jvlavan commented Jun 30, 2025

Ok I will revise

jvlavan and others added 6 commits July 1, 2025 23:10
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>
@jvlavan jvlavan requested a review from estelle July 2, 2025 03:12
@jvlavan
Copy link
Contributor Author

jvlavan commented Jul 2, 2025

updated content please review @estelle

@jvlavan
Copy link
Contributor Author

jvlavan commented Jul 9, 2025

Do I need to make any other changes @estelle ?

Copy link
Member

@estelle estelle left a 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:
Copy link
Member

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?

Copy link
Contributor Author

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.

Copy link
Contributor Author

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
Copy link
Member

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

Copy link
Contributor Author

@jvlavan jvlavan Jul 23, 2025

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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can delete this in favor of "see the sizes attribute of the <img> and <source> elements for more information."

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay I will update.

jvlavan and others added 3 commits July 23, 2025 15:18
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
…e; removed deep dive and added references to <img> and <source>
jvlavan and others added 2 commits July 23, 2025 16:15
@jvlavan
Copy link
Contributor Author

jvlavan commented Jul 23, 2025

@estelle please review I have updated changes.

@jvlavan jvlavan requested a review from estelle July 23, 2025 10:51
Copy link
Member

@estelle estelle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

more feedback

jvlavan and others added 4 commits July 23, 2025 17:56
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
@jvlavan jvlavan requested a review from estelle July 23, 2025 12:28
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@jvlavan
Copy link
Contributor Author

jvlavan commented Jul 23, 2025

@estelle please review, I have changed the contents.

Copy link
Member

@estelle estelle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks!

@estelle estelle merged commit 34e9a5e into mdn:main Jul 23, 2025
8 checks passed
@Josh-Cena
Copy link
Member

@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)

@jvlavan
Copy link
Contributor Author

jvlavan commented Jul 23, 2025

Ok next time I will do

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:HTML Hypertext Markup Language docs size/s [PR only] 6-50 LoC changed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Sizes referred to but not introduced nor explained nor shown in examples
3 participants