{"id":39491721,"url":"https://github.com/firefoxic/optimize","last_synced_at":"2026-01-18T05:36:45.106Z","repository":{"id":231741319,"uuid":"782548625","full_name":"firefoxic/optimize","owner":"firefoxic","description":"Optimize images, icons and favicons for your frontend project.","archived":false,"fork":false,"pushed_at":"2025-09-25T10:46:10.000Z","size":858,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-28T03:59:59.715Z","etag":null,"topics":["avif","convert","favicon","frontend","ico","icon","image","optimize","prepare","raster","svg","vector","webmanifest","webp"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/@firefoxic/optimize","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/firefoxic.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-04-05T14:15:49.000Z","updated_at":"2025-09-25T10:46:14.000Z","dependencies_parsed_at":"2024-04-05T17:31:37.057Z","dependency_job_id":"0a07add8-d2a0-46a2-a855-eb870509c0ad","html_url":"https://github.com/firefoxic/optimize","commit_stats":{"total_commits":67,"total_committers":2,"mean_commits":33.5,"dds":0.02985074626865669,"last_synced_commit":"fce49cb06f4206a2b7dc21f1a5dffc9e3a5679b5"},"previous_names":["firefoxic/conjure","firefoxic/optimize"],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/firefoxic/optimize","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firefoxic%2Foptimize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firefoxic%2Foptimize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firefoxic%2Foptimize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firefoxic%2Foptimize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/firefoxic","download_url":"https://codeload.github.com/firefoxic/optimize/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firefoxic%2Foptimize/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28530976,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["avif","convert","favicon","frontend","ico","icon","image","optimize","prepare","raster","svg","vector","webmanifest","webp"],"created_at":"2026-01-18T05:36:44.563Z","updated_at":"2026-01-18T05:36:45.092Z","avatar_url":"https://github.com/firefoxic.png","language":"JavaScript","readme":"\u003c!-- markdownlint-disable MD007 MD024 --\u003e\n# Optimize\n\n[![License: MIT][license-image]][license-url]\n[![Changelog][changelog-image]][changelog-url]\n[![NPM version][npm-image]][npm-url]\n[![Test Status][test-image]][test-url]\n\nOptimize all frontend graphic assets or all images in specific directory.\n\n\u003cpicture\u003e\n\t\u003csource srcset=\"https://raw.githubusercontent.com/firefoxic/optimize/main/example/dark.webp\" media=\"(prefers-color-scheme: dark)\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/firefoxic/optimize/main/example/light.webp\" alt=\"Example showing the source files, and the files after running the 'optimize all -r -m' command.\"\u003e\n\u003c/picture\u003e\n\n## Purpose\n\nIn 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!\n\nOptimize 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).\n\n## Installation\n\nTo 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`):\n\n```shell\npnpm add @firefoxic/optimize -D\n```\n\nor globally\n\n```shell\npnpm add @firefoxic/optimize -g\n```\n\n## Usage\n\nOptimize is invoked via the command line:\n\n- with globally installation:\n\n\t```shell\n\toptimize \u003ccommand\u003e [options]\n\t```\n\n- with locally installation (in a project):\n\n\t```shell\n\tpnpm exec optimize \u003ccommand\u003e [options]\n\t```\n\n- without installation:\n\n\t```shell\n\tpnpm dlx @firefoxic/optimize \u003ccommand\u003e [options]\n\t```\n\n### The `assets` command\n\nComprehensive 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`.\n\n                  Option                   |   Default value   | Description\n-------------------------------------------|-------------------|---------------------------------------------------------------------------------------------------------------------------\n`-p`, `--public-directory`                 | `./public/`       | Path to the directory with static assets\n`-s`, `--shared-directory`                 | `./src/shared/`   | Path to the directory with shared files\n`-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)\n`-f`, `--target-formats`                   | `[avif,webp]`     | Output raster image formats (to specify multiple formats, specify an option for each)\n`-r`, `--remove-origin`                    | `true`            | Remove the original raster files after successful processing\n`-m`, `--add-meta-data`                    | `true`            | Add metadata of the raster images to `data.json` file and generate CSS file for the icons\n\n\u003e [!TIP]\n\u003e\n\u003e #### Controlling metadata generation\n\u003e\n\u003e 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`.\n\n\u003e [!TIP]\n\u003e\n\u003e #### Exporting raster layers from mockups\n\u003e\n\u003e 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.\n\n\u003e [!TIP]\n\u003e\n\u003e #### Recommendations for the source favicon files\n\u003e\n\u003e - The most optimal composition of source files is a couple of files:\n\u003e\t - `32.svg` — the drawing is adjusted to a `32×32` pixel grid, may have transparent areas such as rounded corners of the background;\n\u003e\t - `touch.svg` — the drawing is prepared for large touch icons with solid background without rounding, with margins much larger than `32.svg`.\n\u003e - If you don't have a variant specially prepared by the designer for the pixel grid size `16×16`, then don't create a file `16.svg` from variants of other sizes — it will only increase the weight of the final `favicon.ico`.\n\u003e - If you don't have a `32×32` variant, but you have a `16×16` variant, there is no need to make a `32.svg` file, `optimize` will make all the variants for you.\n\u003e - If you have only one variant and it's not `16×16`, it doesn't matter what you name the file, `32.svg` or `touch.svg` (as long as it's not `16.svg`) — a file with either of these two names will be used by `optimize` to generate the entire set of favicons.\n\n#### Examples\n\n- Optimize all assets for a frontend project with default settings (expects `touch.svg`/`32.svg` in `public/`, icons in `src/shared/icons/`, images in `public/images/`):\n\n\t```shell\n\toptimize assets\n\t```\n\n- Optimize assets but keep the original images:\n\n\t```shell\n\toptimize assets --no-r\n\t```\n\n### The `images` command\n\nOptimize vector and raster images in specific directory (current by default).\n\n                  Option                   |   Default value   | Description\n-------------------------------------------|-------------------|---------------------------------------------------------------------------------------------------------------------------\n`-i`, `--input-directory`                  | `./`              | Path to the directory containing raw files\n`-o`, `--output-directory`                 | the value of `-i` | Path to the directory where processed files will be placed\n`-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)\n`-f`, `--target-format`                    | `[avif]`          | Output raster image format (to specify multiple formats, specify an option for each)\n`-r`, `--remove-origin`                    | `false`           | Remove the original raster files after successful processing\n\n#### Examples\n\n- Simple image optimization in the `photos` folder, convert to `avif` and remove originals:\n\n\t```shell\n\toptimize images -i photos -r\n\t```\n\n- Take all images from the `photos` folder, optimize them to both `webp` and `avif` formats, place results in `optimized` folder, and remove originals:\n\n\t```shell\n\toptimize images -i photos -o optimized -f webp -f avif -r\n\t```\n\n[license-url]: https://github.com/firefoxic/optimizee/blob/main/LICENSE.md\n[license-image]: https://img.shields.io/badge/License-MIT-limegreen.svg\n\n[changelog-url]: https://github.com/firefoxic/optimizee/blob/main/CHANGELOG.md\n[changelog-image]: https://img.shields.io/badge/Changelog-md-limegreen\n\n[npm-url]: https://npmjs.org/package/@firefoxic/optimize\n[npm-image]: https://img.shields.io/npm/v/%40firefoxic%2Foptimize?logo=npm\u0026color=limegreen\n\n[test-url]: https://github.com/firefoxic/optimize/actions\n[test-image]: https://github.com/firefoxic/optimize/actions/workflows/test.yaml/badge.svg?branch=main\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirefoxic%2Foptimize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffirefoxic%2Foptimize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirefoxic%2Foptimize/lists"}