# Compress your first folder

Make the images of a small site smaller. At the end, every image in `public/` is at most 1600 pixels wide, and Lumen prints how many bytes it saved.

You need Lumen 1.4 or newer. Read [Install Lumen](https://docs-demo.vitehub.dev/docs/getting-started/install) first.

::tutorial-step{title="Create the project"}
## Create the project

Create a folder with a `public/` folder for the images, and a `package.json`:

```json [package.json]
{
  "name": "lumen-demo",
  "private": true,
  "scripts": {
    "images": "lumen compress ./public"
  }
}
```

Copy a few large photos into `public/`.

::

::tutorial-step{title="Write the config"}
## Write the config

Lumen reads `lumen.config.json` from the folder where it runs. Set the largest width and the quality:

```json [lumen.config.json]
{
  "maxWidth": 1600,
  "quality": 75,
  "formats": ["webp"]
}
```

`formats` adds a WebP copy next to each image. The originals stay as they are.

::

::tutorial-step{title="Run Lumen"}
## Run Lumen

```bash [commands/run]
pnpm run images
```

```txt [output/report.txt]
public/hero.jpg        2.4 MB -> 312 KB  (webp 201 KB)
public/team.png        1.1 MB -> 188 KB  (webp 96 KB)
2 images, 3.5 MB -> 500 KB, saved 86%
```

Lumen writes the smaller files in place. Run it again, and it skips the images that it already compressed.

::

::tutorial-step{title="Check the result in CI"}
## Check the result in CI

Add a check that fails when someone adds an image that is too large:

```json [package.json]
{
  "name": "lumen-demo",
  "private": true,
  "scripts": {
    "images": "lumen compress ./public",
    "images:check": "lumen check ./public --max-size 400kb"
  }
}
```

`lumen check` changes no file. It exits with code `1` when an image is over the limit. The [CI guide](https://docs-demo.vitehub.dev/docs/guides/ci) runs it on every pull request.

::

<!-- vitehub-docs:section-links -->
## In this section

- [Overview](https://docs-demo.vitehub.dev/raw/docs/getting-started.md)
- [Install Lumen](https://docs-demo.vitehub.dev/raw/docs/getting-started/install.md)
- [First folder](https://docs-demo.vitehub.dev/raw/docs/getting-started/first-folder.md) (this page)
- [The config file](https://docs-demo.vitehub.dev/raw/docs/getting-started/configuration.md)

Next: [The config file](https://docs-demo.vitehub.dev/raw/docs/getting-started/configuration.md)

All pages: [llms.txt](https://docs-demo.vitehub.dev/llms.txt)