Currently, Responsive Image Client Hints provide a way for origins to obtain the viewport’s width. However, no such attribute exists for viewport height. We’ve observed that to optimize the loading of content that appears in viewport, it is essential for the origins to adapt HTML response based on viewport height.

Motivation

Currently, Responsive Image Client Hints provide a way for origins to obtain the viewport’s width. However, no such attribute exists for viewport height. We’ve observed that to optimize the loading of content that appears in viewport, it is essential for the origins to adapt HTML response based on viewport height as well. Current methods of doing that include content-negotiation through the User-Agent string, but that is suboptimal as it’s indirect, and doesn’t cover all platforms. We’d like to propose adding a new image hint Sec-CH-Viewport-Height (similar to the existing Sec-CH-Viewport-Width). Similar to other client hints, origins would be able to register the opt-in for viewport-height client-hint via Accept-CH header, and receive the attribute value as part of HTTP request headers. This would enable origins to e.g., inline all the content that’s expected to appear in the viewport, or avoid lazy-loading it, optimizing height-constrained images in the absence of the layout height of the image, support server-side automated art direction ensuring that the whole image is always visible above the fold on height-constrained devices.

Specification

Specification link


Unknown standards status - check spec link for status

Status in Chromium

Blink>Loader


In development (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owners

Last updated on 2021-11-12