Learn How to Automate your Image Optimization Process with Lepto
Tags: webdev, javascript, opensource, optimization
Published: 2018-08-06 09:11:59

---
title: Learn How to Automate your Image Optimization Process with Lepto
published: true
description: Lepto is a tool for automating image optimization for the web. Learn how to set it up into your project and how to use his Command Line and Graphical interface.
tags: webdev, javascript, opensource, optimization
cover_image: https://thepracticaldev.s3.amazonaws.com/i/kznyz81vuo52ag3fs60q.jpeg
---

Optimizing images is a long duty, maybe you’re already using imagemin or ImageOptim, they’re great tools, but it can seem difficult to automate their usage.

When you want to optimize your images for the web, you have plenty of tasks to do like:

* Resizing

* Creating different resolution files (for Retina screens)

* Optimizing (removing metadata)

* Compressing

* Create better format alternatives (like WebP)

We’re already compiling our JavaScript and CSS through module bundlers and pre/post-processors, here comes a new build step: image processing.

## Getting started with Lepto

[github.com/leptojs/lepto](https://github.com/leptojs/lepto)

Lepto is a Node.js module and Command Line Interface responsible for **editing, optimizing and analyzing** images resources. So let’s get started!

First of all, you will **need to have an “npm initialized project”**. If not, run the command `npm init`.

You will also need to install the CLI tool as a dev dependency:

```
$ npm install -D lepto-cli
```

If you’re **too lazy to collect some ordinary images**, I give you some that [you can download on this gist](https://gist.github.com/dimitrinicolas/766eecec10adf4deb6a20c8002df4f2b), simply click on the “Download ZIP” button and put those resources into an “assets” directory.

Then you have to create your configuration file named `lepto.config.json`:

```json
{
  "input": "assets",
  "output": "assets/output",
  "watch": true,
  "filters": [
    {
      "glob": "**/*.*",
      "use": [
        {
          "name": "lepto.jpeg",
          "quality": 75
        },
        {
          "name": "lepto.png",
          "quality": 75
        }
      ]
    }
  ]
}
```

Create a new npm script named like `build` into your `package.json`:

```json
{
  ...
  "scripts": {
    "build": "lepto",
    ...
  }
  ...
}
```

Now, by running the command `npm run build`, Lepto will compress all jpg and png from your “assets” directory and export them into the output directory. By setting the `watch` option to `true`, Lepto will watch for every single change inside the “assets” directory to relaunch the process.

By default, Lepto comes with zero configuration, so you need to **write a list of `filters`** each of them associated with a `glob` and a list of plugins to `use`. In this configuration file example, we ask Lepto to compress all jpg and png files with a quality of 75.

![lepto command running](https://thepracticaldev.s3.amazonaws.com/i/xbnrqit1ip2feyxdfsxv.png)

## Let’s add some plugins

Now, you would like to resize your images. There is a plugin for that: [`lepto-resize`](https://github.com/leptojs/lepto-resize), you will have to install it like that:

```
$ npm install -D lepto-resize
```

### Then we’ll add a new filter in our Lepto config:

```json
{
  "glob": "**/*.{jpg,jpeg}",
  "use": [
    {
      "name": "lepto-resize",
      "maxWidth": 1200
    }
  ]
}
```

All your jpgs have now a width less or equal to 1200px. You can discover way more options to use with [`lepto-resize`](https://github.com/leptojs/lepto-resize) on the repository: [github.com/leptojs/lepto-resize](https://github.com/leptojs/lepto-resize).

### Let’s add another filter to create Retina’s versions of our png:

```json
{
  "glob": "**/*.png",
  "use": [
    {
      "name": "lepto-resize",
      "retina": [2, 3]
    }
  ]
}
```

Now we can easily insert them into our html using `srcset`:

```html
<img srcset="assets/output/icon.png,
             assets/output/icon@2x.png 2x,
             assets/output/icon@3x.png 3x"
     src="assets/output/icon.png" alt="Icon alt">
```

I’m pretty sure that you are now capable of adding the plugin [`lepto-webp`](https://github.com/leptojs/lepto-webp) to create WebP alternatives of your jpgs! Check out the documentation here: [github.com/leptojs/lepto-webp](https://github.com/leptojs/lepto-webp).

## Using the GUI

For having the best-optimized images, we also need to carefully choose the best suitable quality percentage for each of them.

By default, the GUI is accessible on the port 4490, so let’s run `npm run build` and go on [localhost:4490](http://localhost:4490/). We’ll get this beautiful interface composed of three parts: your input files list, your filters list and finally the optimizer waiting for a file selection.

![Lepto Graphical User Interface](https://thepracticaldev.s3.amazonaws.com/i/hgu9mntesny4r2foncst.png)

So let’s select a file in the list: it is now displayed it the optimizer, letting us play with the quality slider and see the output in real-time. When you’re satisfied with a quality percentage, **click on the button “Add optimization plugin”** and **save this new configuration by clicking on “Save config”** (or press ⌘S / Ctrl+S).

![Lepto GUI optimizer usage](https://thepracticaldev.s3.amazonaws.com/i/3re5scayjzucsic181e5.png)

By adding an “optimization plugin” the GUI is simply creating a new filter with a glob equal to the file name, and the plugin corresponding to the file extension:

```json
{
  "glob": "001.jpg",
  "use": [
    {
      "name": "lepto.jpeg",
      "quality": 48
    }
  ]
}
```

Be sure to keep those specific filters at the end of the list.

## To go even further

The use cases for this tool are endless. You can even **automatically collect the vibrant colors of your images** and get them into a single JSON file with the [`lepto-vibrant-color`](https://github.com/leptojs/lepto-vibrant-color) plugin.

![lepto-vibrant-color extraction example](https://thepracticaldev.s3.amazonaws.com/i/6fys66bblrizrfgo1pyj.png)

To learn more about Lepto, check out the `lepto` and `lepto-cli` documentations:

* [github.com/leptojs/lepto](https://github.com/leptojs/lepto)

* [github.com/leptojs/lepto-cli](https://github.com/leptojs/lepto-cli)

To learn even more about the best image optimization practices I recommend you the “[Essential Image Optimization](https://images.guide/)” guide by [Addy Osmani](https://twitter.com/addyosmani): [images.guide](https://images.guide/).

## About me

I’m a French student, enthusiast of front-end development for several years now. By creating Lepto, I tried my best to make a non-frustrating and efficient tool to easily manage image optimization. Building a Command Line Interface was obvious for performance and ease of use reason (see [this great article about Terminal and design](https://brandur.org/interfaces) by [Brandur](https://twitter.com/brandur)). However, the GUI was necessary for choosing the best compression quality. So I came to this great harmony.

I am listening to all suggestions, discussions and violent criticism via [Twitter](https://twitter.com/dimitrincls) or via e-mail: [dimitri@ooeo.fr](mailto:dimitri@ooeo.fr).

Thanks for reading! 😄

{% github leptojs/lepto %}