Skip to content

Commit

Permalink
docs: add README for using squoosh
Browse files Browse the repository at this point in the history
  • Loading branch information
KevinWu098 committed Aug 18, 2024
1 parent d0c3beb commit 2c9ec70
Showing 1 changed file with 38 additions and 0 deletions.
38 changes: 38 additions & 0 deletions src/assets/images/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# Optimizing Images with Squoosh

Squoosh is a fantastic [open-source](https://github.com/GoogleChromeLabs/squoosh) image compression tool by Google usable both as a [web app ](https://squoosh.app/) and as a [CLI tool](https://www.npmjs.com/package/@squoosh/cli). Although the CLI is no longer maintained, it still is useful for bulk compressing images (such as every year's new board members).

## Using the Squoosh CLI

> [!IMPORTANT]
> The Squoosh CLI does not support Node versions 18 and above. **Node 16 is recommended (`nvm use 16`).**
For our directory structure (as of Aug. 2024):

```
DUCI-website
└─ src
└─ assets
└─ images
├─ board
│ ├─ current
│ └─ alumni
└─ merch
├─ ...
```

If you wanted to optimize all images within `current/`, you'd run (at the root):

```
npx @squoosh/cli --mozjpeg '{quality:75}' \
-d src/assets/images/output \
src/assets/images/board/alumni
```

Breaking it down:

1. `npx @squoosh/cli` — calls the Squoosh CLI
2. `--mozjpeg` — a flag converting images to `mozjpeg`
3. `'{quality:75}'` — options
4. `-d src/assets/images/output` — creates a directory with the outputted images at the specified location
5. `src/assets/images/board/alumni` — what file(s) to compress

0 comments on commit 2c9ec70

Please sign in to comment.