For a web developer understanding a Client hints is essential, to evaluate how an image will be displayed in a browser. Google introduced client hints for Chrome and other supported browsers for web developers to provide a superior user experience for all end-users.
With the help of client hints, web developers / designers can evaluate the process of proactive content negotiation and thereby conclude the final images that will be displayed in various devices.
In other words, the pictures that you will see on your laptop must be optimized for your laptop while the pictures you see on your mobile must be optimized for your mobile and so on.
Back in 2010, iPhone 4S happened and it came out with a Retina ready screen. (no mp3 support but retina ready heh?). Only problem was that required 2x Images to properly leverage it’s Retina state.
Back at the time the majority of the websites were not responsive so most images were shown using the Desktop version so the display quality was much better than any other cell-phone out there. You could see all 640px in a 320px display. (how amazing was that?)
As of today there is an enormous amount of different displays from wareables, cellphones, refrigerators, tablets, phablets, laptops, desktops until TV screens. All those crafted by different vendors with different displays and sizes. Now if you add up to the equation the creativity of each web designer using a different CSS frameworks with different breakpoints (or custom breakpoints) it leads to a gazillion different viewports in the Web.
(Yes… its actually really huge number. I thought it’d be something like 20-50 but I counted 1600 different viewports).
(I am not over exaggerating – this is actually true).
If you choose not to implement client hints it will not be the end of the world. But if you do, you will certainly make internet a better place. You will reduce transferred traffic to the absolutely minimum required for each user to have a proper user experience for your product.
You will also provide a faster user experience. And don’t get me started on researches showing how Conversion rates increased after increasing their loading speed.
Also by Implementing the hints, you can save up a significant amount of time during the designing & coding phase and simplify the entire process of developing a web page.
Who doesn’t likes the following snippet after all?
| <picture class="text-center"> | |
| <!--[if IE 9]><audio><![endif]--> | |
| <source sizes="758px" type="image/webp" media="(min-width: 1200px)" srcset="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_1920_webp/app/uploads/2020/06/pipinaKoumantou.png"> | |
| <source sizes="635px" type="image/webp" media="(min-width: 992px)" srcset="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_1200_webp/app/uploads/2020/06/pipinaKoumantou.png"> | |
| <source sizes="530px" type="image/webp" media="(min-width: 768px)" srcset="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_992_webp/app/uploads/2020/06/pipinaKoumantou.png"> | |
| <source sizes="345px" type="image/webp" media="(min-width: 375px)" srcset="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_375_webp/app/uploads/2020/06/pipinaKoumantou.png"> | |
| <source sizes="345px" type="image/webp" media="(min-width: 0px)" srcset="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_0_webp/app/uploads/2020/06/pipinaKoumantou.png"> | |
| <source sizes="758px" type="image/jpg" media="(min-width: 1200px)" srcset="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_1920/app/uploads/2020/06/pipinaKoumantou.png"> | |
| <source sizes="635px" type="image/jpg" media="(min-width: 992px)" srcset="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_1200/app/uploads/2020/06/pipinaKoumantou.png"> | |
| <source sizes="530px" type="image/jpg" media="(min-width: 768px)" srcset="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_992/app/uploads/2020/06/pipinaKoumantou.png"> | |
| <source sizes="345px" type="image/jpg" media="(min-width: 375px)" srcset="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_375/app/uploads/2020/06/pipinaKoumantou.png"> | |
| <source sizes="345px" type="image/jpg" media="(min-width: 0px)" srcset="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_0/app/uploads/2020/06/pipinaKoumantou.png"> | |
| <!--[if IE 9]></audio><![endif]--> | |
| <img class="img-fluid" src="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_1920/app/uploads/2020/06/pipinaKoumantou.png" alt="Πρόεδρος της Δημόσιας Βιβλιοθήκης Καλαμάτας το μέλος της ΝΔ που αναρωτιόταν «Ποιος είναι αυτός ο Γκοτζαμάνης»" width="758"> | |
| </picture> |
Using client hints, you can simplified the aforementioned code into:
| <img class="img-fluid" src="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_1920/app/uploads/2020/06/pipinaKoumantou.png" width="758" size="(max-width: 375px) 345px, (max-width:768px) 530px, (max-width: 992px) 635px, 758px"> |
Client hints primarily work as HTTP request headers. These look for specific parameters in the servers and accordingly deliver the content. So that the images are displayed as per the device.
In other words, these are like content negotiators that provides hints to the server on how to provide the content. It has to take under consideration factors like Device Pixel Ratio (DPR), Image Width to be displayed, Download Speed, Connection Type (ECT), Device Memory, whether user has selected to Save Data on his mobile device and more…
So for example, if Device memory is sufficient, you can load Progressive JPEGs and Interlaced PNGs that generally render harder in low end devices.
If user has selected “Save Data” at his cellphone, you can lower the quality to grant his wish.
If a user is on the road (and… don’t check your cellphone while driving) having a DownLink connection of 1mbps you probably want to reduce the overall image size for him. He needs to check it quickly or you will be responsive for the car crush!!
Without proper Client hints association with the device and delivery content, it will become difficult to display the image adequately on the device. This processing of information between server and client is made simpler with the help of Client hints. The following figure will give you a better idea about how Client hints work.
At the moment, (2020/06/01) there is a significant browser support at approximately ~70%. New content has been recently added to the Client Hint Spec draft (2020/05/27). It is a feature that ensures backwards compatibility so there is no reason why you should not start using it right away. Client Hints will also takeover the User Agent header on the web so… You should probably be ready about it.
The most important point in enabling Client hints is first evaluating the requirement of the individual hints. Since enabling the Client hints will increase the payload on your server, you will have to evaluate the requirement of the hints before you start accepting the hints.
You can easily enable client hints by adding a meta tag in your <head> in the following manner:
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Accept-CH" content="DPR,Width,Viewport-Width,Downlink,ECT"> | |
| </head> | |
| <body></body> | |
| </html> |
Then you will have to individually divide each hint that you wish the server to accept. This is why it is essential that you first decide the hints that you require. If you are viewing the entire snippet in a Downlink, then you will have to add it to the tag. If you are viewing the entire snippet on Chrome, then the look will be as follows:
The objective of the hints is to make the pages more responsive. When you click on a link, you expect the page along with the images to load almost immediately. In other words, you want the page to load quickly. For this, the page must be optimized as per the device in which you are viewing. The server browser negotiation must be optimized to deliver responsive web images. This can be done easily with the help of Client hints. Additionally, you can do it by adding a Meta tag or an HTTP header to the markup. This makes the content negotiation between the server and the webpage easier. Client hints also ensure that the Width header also works properly, so that image gets displayed on the webpage. This also simplifies the coding process. A sample method of an image with the help of Client hints instead of using coding looks like:
It is evident with the help of Client hints, you can cut down on coding, and yet you can have the same result. Moreover, the image will also load faster. It will be optimized as per the device in which the webpage is being viewed. Thus, with the help of Client hints, you can simplify the entire process of webpage development.
The simplicity of the process is the primary reason why more and more web developers are looking to shift to Client hints as a suitable method for developing web pages instead of the traditional way of coding. It makes the entire process more streamlined, and it is also ideal for supported browsers.