Skip to content

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

License

Notifications You must be signed in to change notification settings

cleverage/daltons

Repository files navigation

Daltons

Travis build status Known Vulnerabilities License FOSSA Status GitHub stars

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 does it work?

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

  • take Real User Monitoring (RUM) of viewport widths and screen densities
  • list the image’s widths across all of these viewport widths
  • compute the optimal image widths to put in the srcset attribute to cover all these needs

Learn more in the full documentation.

Usage

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 i -g github:cleverage/daltons

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

npx daltons -h

Or see detailed options in the full documentation and look at examples and use cases.

Built with

  • Node.js
  • Puppeteer, a Node.js library which provides a high-level API to control headless Chrome

Authors

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

FOSSA Status

Related projects

  • Sizer-Soze, developed by Yoav Weiss, “is a utility that enables you to evaluate how much you could save by properly resizing your images to match their display size on various viewports”.
  • imaging-heap, developed by Zach Leatherman is “a command line tool to measure the efficiency of your responsive image markup across viewport sizes and device pixel ratios”.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published