Optimize all frontend graphic assets or all images in specific directory.
In most frontend projects, you have to perform the same and rather boring actions with images between exporting them from Figma or Penpot and deploying the project to the server. Spare yourself from this routine!
Optimize is a command line utility that provides two main scenarios: comprehensive asset optimization for frontend projects (assets command) and simple image optimization for general use (images command).
To install Optimize, you need to have Node.js installed on your machine. Then you can install in your project using pnpm (for npm, just remove the first p):
pnpm add @firefoxic/optimize -Dor globally
pnpm add @firefoxic/optimize -gOptimize is invoked via the command line:
-
with globally installation:
optimize <command> [options]
-
with locally installation (in a project):
pnpm exec optimize <command> [options]
-
without installation:
pnpm dlx @firefoxic/optimize <command> [options]
Comprehensive optimization of all graphic assets for frontend projects. Converts touch.svg and/or 32.svg (optionally 16.svg) to favicons, optimizes SVG icons and generates CSS, converts images from public/images/ and adds metadata to src/shared/data.json.
| Option | Default value | Description |
|---|---|---|
-p, --public-directory |
./public/ |
Path to the directory with static assets |
-s, --shared-directory |
./src/shared/ |
Path to the directory with shared files |
-d, --origin-density |
2 |
Pixel density in dppx of the raw raster images (0 works like 1, but without adding the density suffix to the filename) |
-f, --target-formats |
[avif,webp] |
Output raster image formats (to specify multiple formats, specify an option for each) |
-r, --remove-origin |
true |
Remove the original raster files after successful processing |
-m, --add-meta-data |
true |
Add metadata of the raster images to data.json file and generate CSS file for the icons |
Tip
Metadata added to the data.json file is useful for generating the picture tag and working with images in frontend frameworks. CSS file with custom properties for icons allows you to automatically encode icons into styles. If you don't need these files you can prevent metadata generation by using the --no- prefix for the flag: --no-m or --no-add-meta-data.
Tip
If you have finally managed to give up old formats (such as JPG and PNG) and use only modern Avif and Webp, it is better to export raster layers from Figma or Penpot only to PNG. JPG adds artifacts on them. Avoid unnecessary quality loss.
Tip
- The most optimal composition of source files is a couple of files:
32.svg— the drawing is adjusted to a32×32pixel grid, may have transparent areas such as rounded corners of the background;touch.svg— the drawing is prepared for large touch icons with solid background without rounding, with margins much larger than32.svg.
- If you don't have a variant specially prepared by the designer for the pixel grid size
16×16, then don't create a file16.svgfrom variants of other sizes — it will only increase the weight of the finalfavicon.ico. - If you don't have a
32×32variant, but you have a16×16variant, there is no need to make a32.svgfile,optimizewill make all the variants for you. - If you have only one variant and it's not
16×16, it doesn't matter what you name the file,32.svgortouch.svg(as long as it's not16.svg) — a file with either of these two names will be used byoptimizeto generate the entire set of favicons.
-
Optimize all assets for a frontend project with default settings (expects
touch.svg/32.svginpublic/, icons insrc/shared/icons/, images inpublic/images/):optimize assets
-
Optimize assets but keep the original images:
optimize assets --no-r
Optimize vector and raster images in specific directory (current by default).
| Option | Default value | Description |
|---|---|---|
-i, --input-directory |
./ |
Path to the directory containing raw files |
-o, --output-directory |
the value of -i |
Path to the directory where processed files will be placed |
-d, --origin-density |
0 |
Pixel density in dppx of the raw raster images (0 works like 1, but without adding the density suffix to the filename) |
-f, --target-format |
[avif] |
Output raster image format (to specify multiple formats, specify an option for each) |
-r, --remove-origin |
false |
Remove the original raster files after successful processing |
-
Simple image optimization in the
photosfolder, convert toavifand remove originals:optimize images -i photos -r
-
Take all images from the
photosfolder, optimize them to bothwebpandavifformats, place results inoptimizedfolder, and remove originals:optimize images -i photos -o optimized -f webp -f avif -r