Intent to Ship: Support specifying width/height on <source> elements for <picture>

[Christian Biesinger]

Contact emails

cbies...@google.com

Explainer

None

Specification

https://github.com/whatwg/html/pull/5894

Summary

This feature allows specifying a width and height on <source> elements
that are used in <picture>, which allows the image to compute an
aspect ratio from these attributes, e.g.:

<picture>
<source srcset="image.jpg" width="640" height="480">
<img style="width: 100%; height: auto;">
</picture>

In this example, the width of the image will adjust to the size of its
container and the height will follow the aspect ratio, even before the
image is loaded (avoiding a content shift).



Blink component

Blink>CSS

TAG review

part of https://github.com/w3ctag/design-reviews/issues/559

TAG review status

Not applicable

Risks



Interoperability and Compatibility

Very little risk; this matters primarily before the image is loaded
There is a small interop risk if a width/height is specified on the
source element that does not match the natural size of the image *and*
there is no other sizing specified elsewhere (on the <img>/in CSS),
such images could be incorrectly sized.



Gecko: No signal (https://github.com/mozilla/standards-positions/issues/485)

WebKit: No signal
(https://lists.webkit.org/pipermail/webkit-dev/2021-February/031692.html)

Web developers: No signals

Ergonomics

Reduces risk insofar as we now give <picture> similar behavior as
<img>/<video>/<canvas>



Activation

n/a



Security

n/a



Debuggability

This will show up in the styles panel like other style from
attributes, e.g. "aspect-ratio: auto 640 / 480"



Is this feature fully tested by web-platform-tests?

Yes

Tracking bug

https://crbug.com/1137794

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5737185317748736

This intent message was generated by Chrome Platform Status.

[Simon Pieters]

Non-owner LGTM, I'm happy to see this!

> Web developers: No signals

As one data point: In September Jen Simmons asked on twitter what people want to know about the width and height attributes in HTML, and there were multiple replies asking about <picture> with multiple <source>s:

• "How do you make the <img> width & height attributes work with <picture> element for art direction (e.g., using <picture> to swap between a landscape and portrait graphic)?" https://twitter.com/AmeliasBrain/status/1310681563026223105?s=20
  
• "Can the width & height attributes improve initial paint layout on picture elements with multiple sources? If so, should they go in the picture element wrapper, or in the sources & img elements within it?" https://twitter.com/wingmattdev/status/1310609654892781568?s=20
  
• "What to do with <picture> elements which might use art direction to select different aspect ratio crops with different w/h. <source> by spec does not support w/h attrs, so I think it will be good to provide example and coverage" https://twitter.com/pecus/status/1310654896077770752?s=20

cheers,

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAPTJ0XGbxQ8EkdX%3DYPnBf5Ace6nunjh0Zw645nAKbund9HU9tA%40mail.gmail.com.

--

Simon Pieters

Bocoup https://bocoup.com/

[Anne van Kesteren]

On Fri, Feb 12, 2021 at 10:42 PM Christian Biesinger
<cbies...@chromium.org> wrote:

> Specification
>
> https://github.com/whatwg/html/pull/5894

To be clear, this PR is not ready. There's various checkboxes
unchecked, it hasn't had review from maintainers, it conflicts with
main, and there's an outstanding comment that indicates there needs to
be a behavior change...

[Chris Harrelson]

Looks like the PR now has approvals and support, and the remaining comments are editorial.

LGTM1 to ship once the PR lands and WPTs are in place.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADnb78jrw3BmiwjWRR-3cmKP%3D91jEqBEy3vpF0-weth8X_fcvw%40mail.gmail.com.

[Mike West]

LGTM2, with the same qualifications as Chris.

-mike

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw8eV7%3DLa15FNz3yk7%2BeUprNxgxKHDtsocCw1Crk-mhkYw%40mail.gmail.com.

[Manuel Rego Casasnovas]

LGTM3, also adding the required tests as suggested on the spec PR.

> <mailto:blink-dev%2Bunsu...@chromium.org>.

> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADnb78jrw3BmiwjWRR-3cmKP%3D91jEqBEy3vpF0-weth8X_fcvw%40mail.gmail.com

> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADnb78jrw3BmiwjWRR-3cmKP%3D91jEqBEy3vpF0-weth8X_fcvw%40mail.gmail.com>.

>
> --
> You received this message because you are subscribed to the Google
> Groups "blink-dev" group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to blink-dev+...@chromium.org

> <mailto:blink-dev+...@chromium.org>.

> To view this discussion on the web visit

> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw8eV7%3DLa15FNz3yk7%2BeUprNxgxKHDtsocCw1Crk-mhkYw%40mail.gmail.com
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw8eV7%3DLa15FNz3yk7%2BeUprNxgxKHDtsocCw1Crk-mhkYw%40mail.gmail.com?utm_medium=email&utm_source=footer>.

>
> --
> You received this message because you are subscribed to the Google
> Groups "blink-dev" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to blink-dev+...@chromium.org

> <mailto:blink-dev+...@chromium.org>.

> To view this discussion on the web visit

> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKXHy%3Dc4wpK7eidEhXnsa1-GDHNGCeeb15ASu3-CrqkV%3Dm6M7w%40mail.gmail.com
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKXHy%3Dc4wpK7eidEhXnsa1-GDHNGCeeb15ASu3-CrqkV%3Dm6M7w%40mail.gmail.com?utm_medium=email&utm_source=footer>.

[Christian Biesinger]

Thanks, this has landed and will ship in Chrome 90.

Christian

[Yoav Weiss]

🎉

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAPTJ0XFcjqDR0YvEy9a-bjOBSpUQWZXUiZ-9AJFyuhKjCVmc2w%40mail.gmail.com.