Bug 149899 – Responsive images (srcset, sizes, w) don't load higher resolution when viewport is enlarged.

• Component: Images
• Status: NEW

[Duncan Wilcox]

Created attachment 262646 [details]
testcase

The attached test case defines a 100% size image. The srcset attribute indicates different resolution images to be loaded. The sizes attribute indicates the image is going to be 100% of the viewport size.

The test case file should be opened after the browser window has been made as narrow as possible, or reloading the page after having made the browser window as narrow as possible. This ensures the browser starts with the smallest size image it needs. The placeholder images (sourced from placehold.it) show the image size. The initial image is typically 800 pixels on a retina Mac, with the Safari window as narrow as possible, as indicated by the "800w" text in the image.

The expected behavior is for the image to be reloaded when the viewport size changes, so making the browser window wider should show a new text, such as 1000w or 1200w, and so on.

The actual behavior in Safari 9 is no new image is ever loaded, until the whole page is reloaded. The current version of Chrome (45....) properly loads larger images.

While this is under- or un-specified in the relevant spec (https://html.spec.whatwg.org/multipage/embedded-content.html) the sensible approach is to load proper assets for the current viewport. Otherwise images will appear fuzzy or pixellated. On the desktop the switch can be dramatic (perhaps 400 to 1200+), but even on mobile a portrait/landscape rotation can almost double the required image size, and a split screen 320 pixel wide mobile safari can become a 1000+ pixel wide full screen browser.

[Yoav Weiss]

Switching resources when the viewport changes have not yet been implemented.

This behavior is not specified on purpose, leaving UAs to do what they see fit, which means that current behavior is spec compliant. With that said, I believe we should implement such dynamic loading, for the reasons you stated.

[Moritz Mahringer]

This is still a problem.
We have to add an event listener to manually change the srcSet attribute to make it reevaluate. Chrome correctly automatically updates to a larger size on resize.

[Radar WebKit Bug Importer]

<rdar://problem/62318091>