{"plugin":{"id":13,"name":"image-optimizer","icon":"✨","description":"Automatic images optimizations  ","longDescription":"A powerful image optimization plugin that automatically generates responsive, optimized images in multiple formats and sizes. Import images directly in your code and get a utility object with smart `src`, `srcset`, and `sources` helpers.\n\n## Features\n\n- 🖼️ **Multi-format output** - Generate WebP, AVIF, JPEG, and PNG variants\n- 📐 **Responsive sizes** - Automatically create multiple sizes for responsive images\n- 🔄 **Smart imports** - Import images as JS modules with utility methods\n- ⚡ **On-the-fly optimization** - API endpoint for dynamic image optimization\n- 👀 **Dev mode watching** - Auto-reprocess on file changes\n- 📄 **Manifest generation** - JSON manifest for advanced use cases\n- ⚡ **Build integration** - Seamless integration with Frame-Master's build system\n- 🛠️ **CLI commands** - Manual processing and cleanup commands\n- 🎯 **TypeScript support** - Full type definitions included","version":"0.1.0","compatibleVersions":"^3.0.0","author":"Justin Halle","ownerId":"c166cdde-5f5c-40e5-a3ff-236652fa88a9","category":"utilities","tags":["image","optimize"],"published":true,"npmPackage":"frame-master-plugin-image-optimizer","githubUrl":"https://github.com/shpaw415/frame-master-plugin-image-optimizer","docsUrl":"https://github.com/shpaw415/frame-master-plugin-image-optimizer","installation":"bun add frame-master-plugin-image-optimizer sharp","quickStart":"// static/img/image.webp\n\n// src/pages/index.tsx\nimport Img from \"@/static/img/image.webp\";\n\n// pre compiled image\nconst imgElement = (<img src={Img.src(320, \"png\")} />)\n\n// on the fly optimization\nimport { fetchOptimized } from \"frame-master-plugin-image-optimizer/utils\";\nconst result = await fetchOptimized(\"hero.jpg\", {\n  width: 640,\n  format: \"webp\",\n  quality: 85,\n});\n\n// release when finish\nresult.revoke();\n","configuration":"import type { FrameMasterConfig } from \"frame-master/server/types\";\nimport ImageOptimizerPlugin from \"frame-master-plugin-image-optimizer\";\n\nconst config: FrameMasterConfig = {\n  HTTPServer: { port: 3000 },\n  plugins: [\n    ImageOptimizerPlugin({\n      input: \"static/img\",\n      output: \"static/optimized\",\n      publicPath: \"/img\",\n      formats: [\"webp\", \"avif\", \"png\"],\n      sizes: [320, 640, 1280, 1920],\n    }),\n  ],\n};\n\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    \"types\": [\"frame-master-plugin-image-optimizer/types\"]\n  }\n}\n","upvote":0,"downvote":0,"createdAt":"2025-12-12T06:04:35.000Z","updatedAt":"2025-12-12T06:04:35.000Z","dependencies":[]}}