Daltons

daltons is a command-line tool that computes optimal image widths to put in srcset attributes of responsive images.

Why do we need this tool?

We want to provide the best experience to our clients’ users, so optimizing web performance is one of our main concerns.

Using responsive images in every projects, we wanted to be able to make it as efficient as possible. The main difficulty is choosing the image widths we put in srcset attributes, because nothing in the standard tells us about this.

How can we choose the responsive image widths?

We didn’t invent anything here, we’re standing on the shoulders of giants.

Back in 2015, Jason Grigsby wrote this in Responsive Images 101, Part 9: Image Breakpoints:

we want to provide multiple image sources because of performance concerns, different screen densities, etc. [but] we can’t simply reuse our responsive layout breakpoints for our images.

Jason presented a few ways to decide which image sizes to put in the srcset attribute of responsive images.

Cloudinary then developed the Responsive Image Breakpoints Generator, based on Jason’s setting image breakpoints based on a performance budget idea. It was already a good optimization.

We’d start by defining a budget for the amount of wasted bytes that the browser would be allowed to download above what is needed to fit the size of the image in the page.

But we believe the most efficient of Jason’s ideas is setting image breakpoints based on most frequent requests, inspired by a discussion with Yoav Weiss from Akamai (who made Blink and webkit support responsive images before joining Akamai) and Ilya Grigorik from Google:

For these organizations, they can tie their image processing and breakpoints logic to their analytics and change the size of the images over time if they find that new image sizes are getting requested more frequently.

Jason Grigsby also wrote in the same article that humans shouldn’t be doing this, and we agree. That’s why we started developing daltons.

How does it work?

It takes 3 steps for daltons to find the best widths to put in the srcset attribute of a responsive image:

• Step 1: take Real User Monitoring (RUM) of viewport widths and screen densities used on the website
• Step 2: detect the image’s widths across all of these viewport widths
• Step 3: compute the optimal image widths to put in the srcset attribute to cover all these needs

Getting started

To install and run this application, you’ll need Node.js (which comes with npm) installed on your computer.

From your command line, install daltons as a global package:

npm install -g "cleverage/daltons"

Then run it with the -h option to get help:

npx daltons -h

It will output the following help:

Global: limit viewport widths, for example for Art Direction (see docs)
  --minViewport, -i  Minimum viewport width to check  [number]
  --maxViewport, -x  Maximum viewport width to check  [number]

Step 1: get actual stats of site visitors
  --statsFile, -c  File path from which reading the actual stats data in CSV format (screen density in dppx, viewport width in px, number of page views)  [string] [required]

Step 2: get variations of image width across viewport widths
  --url, -u             Page URL  [required]
  --selector, -s        Image selector in the page  [required]
  --delay, -d           Delay after viewport resizing before checking image width (ms)  [number] [default: 500]
  --variationsFile, -a  File path to which saving the image width variations data, in CSV format  [string]

Step 3: compute optimal n widths from both datasets
  --widthsNumber, -n  Number of widths to recommend  [number] [default: 5]
  --destFile, -f      File path to which saving the image widths for the srcset attribute  [string]

Options:
  --version      Show version number  [boolean]
  --verbose, -v  Log progress and result in the console
  -h, --help     Show help  [boolean]

Examples:
  npx cli.js --statsFile ./stats.csv --url 'https://example.com/' --selector 'main img[srcset]:first-of-type' --verbose
  npx cli.js -c ./stats.csv -u 'https://example.com/' -s 'main img[srcset]:first-of-type' -i 320 -x 1280 -a ./variations.csv -f ./srcset-widths.txt -v

See details about each option.

Examples and use cases

There are a few examples in the project’s repository: examples

Use cases:

• How to deal with multiple <source> with mix/max-width media queries (Art Direction)