Intent to Implement: srcset and imgsizes attributes on link rel=preload

[Kunihiko Sakamoto]

Contact emails

ksak...@chromium.org

Explainer

https://docs.google.com/document/d/1wob4u9AER1kmUodqIEp78BuziSJChBl54A5ZRXPRCUI/edit?usp=sharing

Design doc/Spec

spec: TBD

spec discussion: https://github.com/w3c/preload/issues/120

Summary

Add srcset and imgsizes attributes to <link rel=preload as=image>, that correspond to the srcset and sizes attributes of HTMLImageElement. We are using imgsizes here instead of sizes because it already has a different meaning for HTMLLinkElement in the rel=icon case.

Motivation

The srcset and sizes attributes of images enable authors to define multiple image resources that fit multiple device resolutions / layouts. However, currently there's no corresponding attributes in <link rel=preload> that instruct browsers to only preload the most appropriate resource from a set of images.

Risks

Interoperability and Compatibility

High (early spec stages)

Edge: No signals

Firefox: No signals

Safari: No signals

Web developers: Positive signals from the AMP team

Browsers that support preload but do not understand srcset/imgsizes attributes would continue to preload the resource specified with the href= attribute.

Ergonomics

This will be used along with images featuring srcset / sizes attributes.

Activation

To take advantage of this feature, developers just need to add link preload headers for key images, e.g. hero image, and re-use existing srcset and sizes attributes with a slight name change for the latter. For backward compatibility, developers would just use the existing href attribute set on their key images.

Debuggability

Preloaded images would appear in the devtools network panel, and the "Initiator" column would reference the <link rel=preload> element.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes.

Link to entry on the feature dashboard

https://www.chromestatus.com/features/5164259990306816

Requesting approval to ship?

No.

[Yoav Weiss]

Thanks for working on this. Non-required LGTM.

As this runs a risk of being contentious (due to the `sizes`/`imgsizes` conflict), would be good to start a TAG review and reach out to other vendors early.

--
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/CAO5vZCh-3%2B67ssY2FKAERN6Wg86%2BP5xxHagmZD3w7oU0AtN4gg%40mail.gmail.com.

[Kunihiko Sakamoto]

Update: Spec PRs (by domfarolino@) are here (whatwg/html) and here (w3c/preload).

The attribute names used in the PRs are `imagesrcset` and `imagesizes`. Current blink implementation (behind-the-flag) still uses `srcset` and `imgsizes`, but I'm going to rename them to `imagesrcset` and `imagesizes` before the M72 branch cut.

We'll also file a TAG review request shortly.

Kunihiko Sakamoto

2018年3月1日(木) 16:25 Yoav Weiss <yo...@yoav.ws>:

Thanks for working on this. Non-required LGTM.

As this runs a risk of being contentious (due to the `sizes`/`imgsizes` conflict), would be good to start a TAG review and reach out to other vendors early.