{"id":24964527,"url":"https://github.com/stacksjs/imgx","last_synced_at":"2025-04-10T23:42:18.883Z","repository":{"id":274241112,"uuid":"922253717","full_name":"stacksjs/imgx","owner":"stacksjs","description":"🏞️ Make your images load faster. A better save for the web.","archived":false,"fork":false,"pushed_at":"2025-04-09T15:54:15.000Z","size":512,"stargazers_count":7,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T23:42:12.590Z","etag":null,"topics":["avif","bun","gif","image","imageoptim","imgix","jpeg","optimizing","png","processing","sharp","svg","typescript","web","webp"],"latest_commit_sha":null,"homepage":"https://imgx.netlify.app","language":"TypeScript","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/stacksjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["stacksjs","chrisbbreuer"],"open_collective":"stacksjs"}},"created_at":"2025-01-25T18:09:44.000Z","updated_at":"2025-04-09T15:54:18.000Z","dependencies_parsed_at":"2025-01-25T23:34:10.066Z","dependency_job_id":"23bb9550-7163-4b1d-91ff-387b5351b9ff","html_url":"https://github.com/stacksjs/imgx","commit_stats":null,"previous_names":["stacksjs/imgx"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fimgx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fimgx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fimgx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fimgx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stacksjs","download_url":"https://codeload.github.com/stacksjs/imgx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248317726,"owners_count":21083527,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","bun","gif","image","imageoptim","imgix","jpeg","optimizing","png","processing","sharp","svg","typescript","web","webp"],"created_at":"2025-02-03T10:16:26.546Z","updated_at":"2025-04-10T23:42:18.873Z","avatar_url":"https://github.com/stacksjs.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://github.com/stacksjs/imgx/blob/main/.github/art/cover.jpg?raw=true\" alt=\"Social Card of this repo\"\u003e\u003c/p\u003e\n\n[![npm version][npm-version-src]][npm-version-href]\n[![GitHub Actions][github-actions-src]][github-actions-href]\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\u003c!-- [![npm downloads][npm-downloads-src]][npm-downloads-href] --\u003e\n\u003c!-- [![Codecov][codecov-src]][codecov-href] --\u003e\n\n# imgx\n\n\u003e A powerful image optimization toolkit for modern web development.\n\n## Features\n\n- **Advanced Image Optimization**\n  - Lossy \u0026 lossless compression\n  - Smart quality optimization\n  - Metadata stripping\n  - Color profile management\n\n- **Format Support**\n  - WebP, AVIF conversion\n  - JPEG, PNG optimization\n  - SVG minification\n  - Animated GIF optimization\n\n- **Modern Web Features**\n  - Responsive image generation\n  - Art direction support\n  - Lazy loading helpers\n  - ThumbHash placeholders\n  - Sprite sheet generation\n  - OG Image generation\n\n- **Developer Experience**\n  - Watch mode for development\n  - Development server with on-the-fly optimization\n  - CI/CD integration\n  - Detailed analysis and reporting\n  - Progress indicators\n\n- **Privacy \u0026 Performance**\n  - Metadata stripping\n  - Configurable optimization levels\n  - Cache control\n  - Web-optimized by default\n\n## Install\n\n```bash\nbun install -d @stacksjs/imgx\n```\n\n## Get Started\n\n### CLI Usage\n\nBasic optimization:\n\n```bash\n# Optimize a single image\nimgx optimize input.jpg -q 75\n\n# Convert to WebP\nimgx optimize input.jpg output.webp -f webp\n\n# Optimize a directory of images\nimgx optimize ./images -R -f webp\n\n# Watch mode for development\nimgx optimize ./src/images -w -f webp\n```\n\nAdvanced features:\n\n```bash\n# Generate responsive images\nimgx optimize hero.jpg --responsive --responsive-sizes 320,768,1024,1920\n\n# Create sprite sheet\nimgx sprite ./icons ./dist --retina --optimize\n\n# Generate thumbnails with ThumbHash\nimgx optimize input.jpg -t --thumbhash-size 64x64\n\n# Analyze image optimization potential\nimgx analyze ./images -o report.json --ci\n```\n\nDevelopment server:\n\n```bash\n# Start dev server with on-the-fly optimization\nimgx serve ./public -p 3000\n\n# Access optimized images:\n# http://localhost:3000/image.jpg?format=webp\u0026quality=75\u0026size=800x600\n```\n\n### Library Usage\n\n```ts\nimport { analyzeImage, generateSprite, process } from '@stacksjs/imgx'\n\n// Basic optimization\nawait process({\n  input: 'input.jpg',\n  output: 'output.webp',\n  quality: 75,\n  format: 'webp'\n})\n\n// Generate responsive images\nawait process({\n  input: 'hero.jpg',\n  responsive: true,\n  responsiveSizes: [320, 768, 1024, 1920],\n  format: 'webp'\n})\n\n// Create sprite sheet\nawait generateSprite({\n  images: ['icon1.png', 'icon2.png'],\n  output: './dist',\n  retina: true,\n  format: 'webp'\n})\n\n// Analyze images\nconst report = await analyzeImage('image.jpg')\nconsole.log(report.optimizationPotential)\n```\n\n## Configuration\n\nCreate an `imgx.config.ts` file:\n\n```ts\nimport type { ImgxConfig } from '@stacksjs/imgx'\n\nexport default {\n  // General options\n  verbose: true,\n  cache: true,\n  cacheDir: '.imgx-cache',\n\n  // Default optimization settings\n  quality: 75,\n  format: 'webp',\n  progressive: true,\n  stripMetadata: true,\n\n  // Responsive image settings\n  responsive: {\n    sizes: [320, 768, 1024, 1920],\n    formats: ['webp', 'avif'],\n    quality: 75\n  },\n\n  // Sprite generation\n  sprites: {\n    retina: true,\n    padding: 2,\n    prefix: 'icon',\n    format: 'webp'\n  },\n\n  // Development server\n  server: {\n    port: 3000,\n    cache: true,\n    cors: true\n  }\n} satisfies ImgxConfig\n```\n\n## CLI Reference\n\n```bash\nimgx optimize [input] [output]\n\nOptions:\n  -q, --quality \u003cnumber\u003e     Image quality (1-100) (default: 80)\n  -r, --resize \u003cstring\u003e      Resize image (e.g., \"50%\" or \"800x600\")\n  -f, --format \u003cstring\u003e      Output format (jpeg, png, webp, avif)\n  -p, --progressive         Enable progressive mode (default: true)\n  -m, --preserve-metadata   Preserve image metadata\n  -w, --watch              Watch for file changes\n  -R, --recursive          Process directories recursively\n  -t, --thumbhash          Generate ThumbHash placeholder\n  --responsive             Generate responsive images\n  --skip-existing         Skip already optimized files\n  --backup                Create backup of original files\n\nExamples:\n  $ imgx optimize input.jpg -q 75 -r 50%\n  $ imgx optimize ./images -f webp -R\n  $ imgx optimize input.jpg -t --thumbhash-size 64x64\n  $ imgx sprite ./icons ./dist --retina --optimize\n  $ imgx analyze ./images --ci --threshold 500KB\n```\n\n## Contributing\n\nPlease review the [Contributing Guide](https://github.com/stacksjs/contributing) for details.\n\n## Community\n\nFor help, discussion about best practices, or any other conversation that would benefit from being searchable:\n\n[Discussions on GitHub](https://github.com/stacksjs/stacks/discussions)\n\nFor casual chit-chat with others using this package:\n\n[Join the Stacks Discord Server](https://discord.gg/stacksjs)\n\n## Postcardware\n\n“Software that is free, but hopes for a postcard.” We love receiving postcards from around the world showing where `imgx` is being used! We showcase them on our website too.\n\nOur address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094, United States 🌎\n\n## Sponsors\n\nWe would like to extend our thanks to the following sponsors for funding Stacks development. If you are interested in becoming a sponsor, please reach out to us.\n\n- [JetBrains](https://www.jetbrains.com/)\n- [The Solana Foundation](https://solana.com/)\n\n## Credits\n\n- [Chris Breuer](https://github.com/chrisbbreuer)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [LICENSE](LICENSE.md) for more information.\n\nMade with 💙\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/@stacksjs/imgx?style=flat-square\n[npm-version-href]: https://npmjs.com/package/@stacksjs/imgx\n[github-actions-src]: https://img.shields.io/github/actions/workflow/status/stacksjs/imgx/ci.yml?style=flat-square\u0026branch=main\n[github-actions-href]: https://github.com/stacksjs/imgx/actions?query=workflow%3Aci\n\n\u003c!-- [codecov-src]: https://img.shields.io/codecov/c/gh/stacksjs/imgx/main?style=flat-square\n[codecov-href]: https://codecov.io/gh/stacksjs/imgx --\u003e\n","funding_links":["https://github.com/sponsors/stacksjs","https://github.com/sponsors/chrisbbreuer","https://opencollective.com/stacksjs"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstacksjs%2Fimgx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstacksjs%2Fimgx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstacksjs%2Fimgx/lists"}