{"id":15317120,"url":"https://github.com/nitedani/img-optimizer","last_synced_at":"2025-04-15T02:22:13.214Z","repository":{"id":65189473,"uuid":"571377756","full_name":"nitedani/img-optimizer","owner":"nitedani","description":"img-optimizer aims to provide a subset of next/image as an independent library, easy to integrate with your favorite tools.","archived":false,"fork":false,"pushed_at":"2023-11-05T00:04:38.000Z","size":1146,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-21T15:51:50.808Z","etag":null,"topics":["image-optimization"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nitedani.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2022-11-28T01:38:42.000Z","updated_at":"2025-01-08T11:23:11.000Z","dependencies_parsed_at":"2025-02-26T15:46:01.903Z","dependency_job_id":null,"html_url":"https://github.com/nitedani/img-optimizer","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitedani%2Fimg-optimizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitedani%2Fimg-optimizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitedani%2Fimg-optimizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitedani%2Fimg-optimizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nitedani","download_url":"https://codeload.github.com/nitedani/img-optimizer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248991800,"owners_count":21194937,"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":["image-optimization"],"created_at":"2024-10-01T08:55:48.616Z","updated_at":"2025-04-15T02:22:13.185Z","avatar_url":"https://github.com/nitedani.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# img-optimizer\n\nimg-optimizer aims to provide a subset of [next/image](https://nextjs.org/docs/api-reference/next/image) as an independent library, easy to integrate with your favorite tools. img-optimizer\ndelivers compressed images to the browser on demand. It prioritizes the [avif](https://caniuse.com/avif) format when the browser supports it, falling back to [webp](https://caniuse.com/webp).\n\n\u003chr\u003e\n\nIntegration examples:\n- [Express](./examples/express/)\n- [Rakkas](./examples/rakkas/)\n- [vite-plugin-ssr](./examples/vite-plugin-ssr/)\n\nIntegration guide:\n\n1. Add a server-side request handler for \"/img-optimizer\":\n```ts\nimport express from \"express\";\nimport { createOptimizer } from \"img-optimizer/server\";\n\nconst app = express();\napp.use(express.static(\"public\"));\nconst optimize = createOptimizer({\n    domains: [\"some.domain.com\"]\n});\n\napp.get(\"/img-optimizer\", async (req, res, next) =\u003e {\n  const result = await optimize({\n    url: req.url,\n    headers: req.headers,\n  });\n  const { body, status, headers } = result;\n  res.status(status).header(headers).send(body);\n});\n\napp.listen(3000, () =\u003e {\n  console.log(\"Listening on http://localhost:3000\");\n});\n```\n\n2. Use it on the client/server render:\n\nSimple JS:\n```JS\nimport { createSrcSet } from \"img-optimizer\";\n`\n\u003cimg srcset=\"${createSrcSet(\"/test-8k.jpg\")}\" /\u003e\n\u003cimg srcset=\"${createSrcSet(\"https://some.domain.com/some-image.jpg\")}\" /\u003e\n`\n```\n\nWith React:\n```ts\nimport image from \"./test-8k.jpg\";\nimport { Image } from \"img-optimizer-react\";\n\nexport function Page() {\n  return (\n    \u003c\u003e\n        \u003cImage\n          src={image}\n          fill\n          alt=\"\"\n          style={{\n            objectFit: \"contain\",\n            background: \"#cef\",\n          }}\n        /\u003e\n        \u003cImage\n          src=\"https://some.domain.com/some-image.jpg\"\n          fill\n          alt=\"\"\n          style={{\n            objectFit: \"contain\",\n            background: \"#cef\",\n          }}\n        /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n### Usage with build tools (webpack, vite):\nThis library requires the Sharp native dependecies to be present at runtime. There are utilities for both webpack and vite that handle this for you.\n\n- [Vite example](https://github.com/nitedani/vite-plugin-standalone/tree/main/examples/sharp)\n\n- [Webpack](https://github.com/vercel/webpack-asset-relocator-loader)\n\n\n\n\ncreateOptimizer options:\n- \u003cb\u003ecacheSizeMb?: number\u003c/b\u003e\u003cbr\u003e img-optimizer caches the compressed images. This option sets the upper limit of the cache size in megabytes.\n- \u003cb\u003esizes?: number[]\u003c/b\u003e\u003cbr\u003e img-optimizer can be restricted to only serve specific sizes(width). If the size is not allowed, a 400 bad response will be returned. default: [360, 640, 1024, 1280, 1600, 1920, 2560, 3840]\n- \u003cb\u003eformats?: Format[]\u003c/b\u003e\u003cbr\u003e default: [\n      {\n        format: 'avif',\n        quality: 45\n      },\n      {\n        format: 'webp',\n        quality: 65\n      }\n    ]\n- \u003cb\u003edomains?: string[] | true\u003c/b\u003e\u003cbr\u003e the domains configuration can be used to provide a list of allowed hostnames for external images. Setting it to true removes the restriction.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitedani%2Fimg-optimizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitedani%2Fimg-optimizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitedani%2Fimg-optimizer/lists"}