If you've ever used Chrome's Data-Saver   extension or turned it on through Chrome for Android you might have noticed a speed increase. What you may have not known is it adds a header to each request. This header is called a client hint  

Client hints are an HTTP header field that supply configuration data that allow resource selection. Chrome's data compression proxy and data saver extension supply the "Save-Data" client hint. This is also available in Yandex, Vivaldi and Opera browsers.

With this enabled we can send smaller images to our users on slow connections or to people who have the above browsers with either the data-saver extension or the data compression proxy enabled.

That being said I'll show you have to use this client hint with my Bolt Betterthumbs  extension.

Twig Template Setup

You'll need to do the following in a twig template. We don't have access to request headers from Bolt's backend admin interface where you can edit or create a post/page for your contenttype. The twig functions and variables we will set will be stripped from the output.

A Typical Betterthumbs Tag

When you're using Betterthumbs a typical betterthumbs tag looks as follows:

{{ img( record.image, 'betterthumbs' ) }}

That will use the settings found in "presets". See the Betterthumbs docs, config file or demo page for more information on those settings

Here is a full example in a template.

{% extends 'base.html.twig' %}
 {% set SaveData = 'Save-Data' %}
  <main>
    {% block body %}
      <figure>
        {% if app.request.headers.get( SaveData|lower ) %}
         {# here is where we put our betterthumbs tag that has
           a lesser quality than our regular tag
         #}
         {% else %}
           {# our normal betterthumbs tag #}
           {{ img( record.image, 'betterthumbs' ) }}
         {% endif %}
        <figcaption>
         <p>
          my figcaption text!
         </p>
        </figcaption>
      </figure>
    {% endblock body %}
  </main>
      

Checking For the Save-Data header

To check for the Save-Data client hint header we'll set a variable and then later on we'll "normalize" it (lower case it) that way if it changes or another browser sends the header differently we have a nice stable base to work with.

{% extends 'base.html.twig' %}
  {# Here is the variable we are setting #}
  {% set SaveData = 'Save-Data' %}
  <main>
  {# rest below here #}
      

We'll have to double up on the actual markup we use. Which is kind of clunky but it gets the job done. I'm doing it this way since it will give you more control over what quality we are using for the image. Eventually the extension may check for the header so we can use it in the backend but right now it would be too rigid.

After we've set our variable we'll move directly above our betterthumbs tag. Here is where we'll actually check for the request header of Save-Data with an if statement and use a twig filter to lowercase our variable.

{% extends 'base.html.twig' %}
        
 {% set SaveData = 'Save-Data' %}
        
  <main>
    {% block body %}
      <figure>
        {% if app.request.headers.get( SaveData|lower ) %}
         {# here is where we put our betterthumbs tag that has
           a lesser quality than our regular tag
         #}
         {% else %}
           {# our normal betterthumbs tag #}
           {{ img( record.image, 'betterthumbs' ) }}
         {% endif %}
        <figcaption>
         <p>
          my figcaption text!
         </p>
        </figcaption>
      </figure>
    {% endblock body %}
  </main>
      

Over-riding the Quality

Now that is all setup we can now insert our tag that will over-ride the settings found in "betterthumbs" in the extensions config with a lesser quality if the Save-Data header is found.

The quality you choose will more than likely depend on what type of JPG you're using. If you reduce the quality to much from what is set in the extensions config you could get blocky images or ones with lots of artifacts.

{% extends 'base.html.twig' %}
 {% set SaveData = 'Save-Data' %}
  <main>
    {% block body %}
      <figure>
        {% if app.request.headers.get( SaveData|lower ) %}
          {{ img( record.image, 'betterthumbs', {
            'modifications': {
              'small': {'q': 60 },
              'medium': {'q': 60 },
              'large': { 'q': 60},
              'xlarge': { 'q': 60}
            }
          }) }}
         {% else %}
           {# our normal betterthumbs tag #}
           {{ img( record.image, 'betterthumbs' ) }}
         {% endif %}
        <figcaption>
         <p>
          my figcaption text!
         </p>
        </figcaption>
      </figure>
    {% endblock body %}
  </main>
      

Thats it. Now if the Save-Data header is present we'll send JPG's with a quality of 60 to the browser instead of the default quality of 80 (unless you've changed that).

See the betterthumbs docs on how to over-ride config options if you're stuck!

Live Example

To see a working live example visit Using betterthumbs with save-data client hint

Browser Support

As mentioned above the Save-Data header can be found through Chrome, Yandex, Vivaldi, Opera (mini too) and most Chromium (blink) based browsers. If you're using Firefox you can enable it with an extension that allows you to modify headers like Save-Data addon   or other header modification addons like Modify Header Value