seen from United States
seen from Netherlands
seen from Yemen
seen from Türkiye
seen from United States
seen from Malaysia
seen from Türkiye
seen from China
seen from United States
seen from China
seen from China
seen from Argentina
seen from Yemen
seen from United States
seen from United States
seen from United States
seen from Romania
seen from United States
seen from United States
seen from Russia
Increase the speed of your website using imghaste. Higher rankings, Less server costs. No integration required..
imghaste is an image optimization service that acts as an intermediate between your users and your website. it allows you to integrate via a Service worker on which you can enable new html5 Client Hints.
Next Generation Responsive Images with Client Hints
Responsive images can be difficult to bring to your site due to the verbose syntax of resolution switching, the requirement of polyfills, or the requirement of JavaScript. Deploying responsive images becomes easier today with the general introduction of Client Hints. Client Hints enable the server to send the best-sized image to a client or browser based on extra information included in the HTTP request headers. This is all done without JavaScript and at the time of the initial request.
Today, Chrome 46 was released to the general public, including support for Client Hints. When enabled on a website, Client Hints will send extra device pixel ratio (DPR) and image width information.
imgix is proud to support Client Hints on the first day of its availability to the general public. You can start taking advantage of Client Hints to deliver even better images to your end users, and because of Chrome’s popularity, more than 35% of the web has support for this feature today.
Implementing Client Hints
Configuring Client Hints on a site is extremely simple. Just include the following meta tag in the <head>:
<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">
The element instructs the browser to include relevant DPR, width, and viewport width information with each image request. imgix will act upon DPR and width information when present and when the ch parameter is present in the URL.
Currently, the way to leverage the resizing operations of imgix is to append URL query parameters. These are great and infinitely flexible using imgix.js, but Client Hints provides a more open interface to resizing images. By deferring this logic to the browser, you are guaranteed to deliver a pixel-perfect image to the device without requiring JavaScript.
Because imgix strives to be endlessly configurable, we require an extra URL query parameter to opt in to Client Hints functionality. This makes sure that Client Hints are explicitly applied. When the URL parameter is present, any Client Hints information will override the respective imgix URL API parameters. For example:
https://assets.imgix.net/unsplash/bear.jpg?ch=Width,DPR&w=400&dpr=2
will use the Width and DPR Client Hints when transmitted, and will fall back to an image of device pixel ratio 2 and 400 device independent pixels, i.e. an image 800 physical pixels wide.
Although requiring the extra ch parameter may seem less elegant, this allows for image-specific configuration for how Client Hints will be applied.
Examples
We’ve assembled 3 examples to show off Client Hints in action on a demo site: imgix Client Hints Examples.
View Examples
First, we show off an example page that does not opt in to client hints, because it does not include the meta tag: No Client Hints Example.
Next, we provide a simple example showing off the simplest implementation of Client Hints: Simple Client Hints Example.
Finally, we show off an example that that will gracefully fall back to srcset values in browsers that do support srcset but do not yet support Client Hints: Client Hints with srcset Fallback.
Just the Beginning
imgix supports the Width and DPR hints today, but that is just the beginning. There are Client Hints on the horizon for specifying data rates of the clients, whether to prefer speed or quality, and much more. By moving this logic to the browser at the time of the image request, the gains to be seen from Client Hints are just beginning. As more are introduced, even better targeting and performance will be possible.
Further Reading
HTTP Client Hints (Interal Draft)
HTTP Working Group: Client Hints
imgix ch parameter documentation
Can I Use... Client Hints
Chrome 46 Announcement Video
Why We Need Client Hints in HTTP/2.0
Anyone who's done even a minimal web design task realizes how useful it is to know the capabilities of the client receiving the content. Chief amongst these is the User-Agent, which identifies the basic properties of the client's web browsing environment: the web browser family and version, the layout engine, and the operating system. This is important for the server to serve content that is adequate to that particular client.
There is another set of information that is very handy for ensuring optimal web page rendering, which is the display capabilities. Information such as the screen size and resolution is used by many websites to customize page layout (design and stylesheets) and content (images, buttons, etc.). This is increasingly relevant considering the following:
The proliferation of HTTP-enabled devices (mobiles, tablets, phablets, etc.) and their extremely varied display capabilities;
The never-ending race to improve the display of these devices as well as that of "traditional" web-enabled devices (i.e. desktops and laptops); and
The variance in HTTP-shipped multimedia (e.g. DASH).
To do this server-side is to save a round-trip. But previous attempts included a number of non-standard variants (UA-pixels, X-UP-devcap-screenpixels, X-Device-User-Agent, etc.) which cannot be relied upon. The alternative is to look at the User-Agent and Accept fields and try to guestimate the best screen size. This is obviously not very efficient but is surprisingly common. Relinquishing one round trip is what most responsive web designers do. Either the server replies with a 300 Alternates list [RFC2295], and/or the web site employs client-side script to report client capabilities. This incurs additional traffic and an additional round trip, something especially expensive in mobile settings. Solving this issue is not difficult. All it would take is for the user agent (i.e. browser) to provide some information about its display in a standard HTTP header. Such header information would have to be optional to avoid unnecessary overhead in cases where the user agent does not wish for the response to be optimized for it, as in the case of web services. Also, this header should refrain from giving away too much information that could compromise security or privacy (as is proposed by Device-Stock-UA which gives away detailed information about the user agent version). This is more pertinent if the next generation of HTTP is to have a Server Push feature like Google SPDY: It makes sense for the server to push content that it anticipates the client would need, but the purpose is defied if the server has to wait for more information from the client after its initial request.
Nevertheless, such proactive negotiation of client display capabilities is not naturally supported by HTTP/1.1 despite the issue being raised a long time ago. Others are also trying to solve this, albeit at a different level.
I was thus quite please to learn this week about Ilya Grigorik's proposal dubbed Client Hints [draft, slides] which is very much along the lines of what is described above. Client Hints also has measures to avoid negative implications on caching efficiency caused by inability to reuse HTTP responses. Update: Client Hints are now being implemented in Chrome.
I think it is high time this issue is discussed as the IETF Hypertext Transfer Protocol Bis working group are actively engaged in discussion to draft HTTP/2.0 (follow progress here). I guess pivotal to this discussion is whether HTTP should be concerned with solving this issue at all, and this is probably something the community would be divided upon. There already are concerns of HTTP/2.0 being too browser-centric. My personal opinion is that this is a session and presentation issue and hence falls within the domain of HTTP.
