Gumlet has support for Client Hints out of the box. If you configure your webpage to pass client hints for images, Gumlet server will automatically send resized images. Here are the client hint headers that we support.
Sec-Ch-Viewport-Width
Sec-Ch-DPR
Sec-Ch-Width
The HTML page must also have Client-Hints enabled, which can be accomplished using either HTML or HTTP. To enable Client-Hints via HTML, add the following line in the <head> of your page, before any <link>, <style>, or <script> elements:
<meta http-equiv="delegate-ch" content="sec-ch-width https://yourdomain.gumlet.io; sec-ch-dpr https://yourdomain.gumlet.io; sec-ch-viewport-width https://yourdomain.gumlet.io;">
Alternatively, to enable Client-Hints via HTTP, add the following headers to your HTML document's response:
Permissions-Policy: ch-dpr=("yourdomain.gumlet.io"), ch-width=("yourdomain.gumlet.io"), ch-viewport-width=("yourdomain.gumlet.io"")
Accept-CH: Sec-CH-DPR, Sec-CH-Width, Sec-CH-Viewport-Width
Things to note!
Please, replace
https://yourdomain.gumlet.ioin the snippets above with the origin of your image URLs.Browsers will only attach client hints to requests for URLs that use the
HTTPSprotocol.In order to send the Sec-CH-Width hint, which is required for Gumlet's automatic image width feature, the
<img>element must have asizesattribute.Client hints are only supported in Chromium-based browsers.