Alternative to HTTP Client Hints

Question

I am wanting to implement a solution where a server app returns an image that is just large enough to cover the entire device screen in any given orientation.

I have been learning a little about the HTTP Client Hints method where the browser will send information along with a request for an image such as the screen size, pixel density etc. Then the server can parse that information and return the appropriately sized image.

This way I don't have to make any modifications to my existing image tags <img src="/myniceimage.jpg" /> and the extra information will be sent along with the request.

Unfortunately it appears support for this HTTP Client Hints feature is limited, see http://caniuse.com/#feat=client-hints-dpr-width-viewport

The only alternative to this feature that I can see (so that support isn't limited to Chrome) is moving the image to data-src so the browser doesn't load it automatically and then have some javascript function load the image manually and also send along screen resolution and pixel density in the header for the request.

---

Is there some other way to get the screen size and pixel density sent to the server that doesn't require me to move my image links into data-src and to have a javascript function manually load them. Or is there some other way to have the server use existing headers that all browsers send to somehow extrapolate that information or estimate it?

Thanks!

Answer 1

It depends on what you want to invest. You need to somehow stuff the required information (rendered width of image) into the HTTP request, that the browser sends back to the server.

The only method apart from Client Hints (which are specifically designed to provide this feature) or using Javascript is to hijack the srcset attribute. But mind you, that solution is all but elegant, if you want pixel-perfect response:

<img srcset="
  foo.1px.jpg 1w,
  foo.2px.jpg 2w,
  foo.3px.jpg 3w,
  ...
  foo.998px.jpg 998w,
  foo.999px.jpg 999w,
  foo.1000px.jpg 1000w
">

This way the browser requests foo.1px.jpg when the image should be 1px wide, foo.2px.jpg for 2px wide display and so on ad infinitum.

If you have a finite set of image sizes, say 200px, 500px, and arbitrarily larger than 500px, then srcset is actually indeed the solution to go for:

<img srcset="
  foo.large.jpg 501w,
  foo.500px.jpg 500w,
  foo.250px.jpg 250w
">