-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* chore: optimize images with squoosh * docs: add README for using squoosh * chore: update image imports * chore: rotate janie
- Loading branch information
1 parent
46ee490
commit b99b2d9
Showing
31 changed files
with
45 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Oops, something went wrong.
Oops, something went wrong.
Diff not rendered.
Oops, something went wrong.