{"id":14977030,"url":"https://github.com/elmassimo/vite-plugin-image-presets","last_synced_at":"2025-04-04T18:10:31.112Z","repository":{"id":39663534,"uuid":"446652489","full_name":"ElMassimo/vite-plugin-image-presets","owner":"ElMassimo","description":"🖼 Image Presets for Vite.js apps","archived":false,"fork":false,"pushed_at":"2023-11-28T09:35:37.000Z","size":363,"stargazers_count":255,"open_issues_count":3,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-27T08:59:22.365Z","etag":null,"topics":["image-processing","images","sharp","ssg","vite-plugin","vitejs"],"latest_commit_sha":null,"homepage":"https://image-presets.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/ElMassimo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-01-11T02:34:07.000Z","updated_at":"2025-03-04T10:22:23.000Z","dependencies_parsed_at":"2024-01-07T18:04:42.010Z","dependency_job_id":"5dff4993-4f03-4352-bc2b-f80080a1c7a8","html_url":"https://github.com/ElMassimo/vite-plugin-image-presets","commit_stats":{"total_commits":47,"total_committers":4,"mean_commits":11.75,"dds":0.06382978723404253,"last_synced_commit":"370989ec06b1789864d2137b5fef7fe47b2d17c0"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElMassimo%2Fvite-plugin-image-presets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElMassimo%2Fvite-plugin-image-presets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElMassimo%2Fvite-plugin-image-presets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElMassimo%2Fvite-plugin-image-presets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ElMassimo","download_url":"https://codeload.github.com/ElMassimo/vite-plugin-image-presets/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247226215,"owners_count":20904465,"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-processing","images","sharp","ssg","vite-plugin","vitejs"],"created_at":"2024-09-24T13:54:54.930Z","updated_at":"2025-04-04T18:10:31.092Z","avatar_url":"https://github.com/ElMassimo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch2 align='center'\u003e\n  \u003ca href=\"https://image-presets.netlify.app/\"\u003e\n    \u003cimg src=\"https://github.com/ElMassimo/vite-plugin-image-presets/blob/main/example/images/logo.svg\" width=\"100px\"/\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003csamp\u003evite-plugin-image-presets\u003c/samp\u003e\n\u003c/h2\u003e\n\n\u003cp align='center'\u003eImage Presets for Vite.js apps\u003c/p\u003e\n\n\u003cp align='center'\u003e\n  \u003ca href='https://www.npmjs.com/package/vite-plugin-image-presets'\u003e\n    \u003cimg src='https://img.shields.io/npm/v/vite-plugin-image-presets?color=222\u0026style=flat-square'\u003e\n  \u003c/a\u003e\n  \u003ca href='https://github.com/ElMassimo/vite-plugin-image-presets/blob/main/LICENSE.txt'\u003e\n    \u003cimg src='https://img.shields.io/badge/license-MIT-blue.svg'\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n[Vite]: https://vitejs.dev/\n[Sharp]: https://sharp.pixelplumbing.com/\n[îles]: https://iles-docs.netlify.app/\n[example]: https://github.com/ElMassimo/vite-plugin-image-presets/blob/main/example/App.vue#L10\n[live]: https://image-presets.netlify.app/\n\nThis [Vite] plugin allows you to define presets for image processing using [Sharp],\nallowing you to optimize, resize, and process images consistently and with ease.\n\n[__Demo__ 🖼][live]\n\n## Installation 💿\n\n```bash\nnpm install -D vite-plugin-image-presets # pnpm, yarn\n```\n\n## Configuration ⚙️\n\nAdd it to your plugins in `vite.config.ts`\n\n```ts\nimport { defineConfig } from 'vite'\nimport imagePresets, { widthPreset } from 'vite-plugin-image-presets'\n\nexport default defineConfig({\n  plugins: [\n    imagePresets({\n      thumbnail: widthPreset({\n        class: 'img thumb',\n        loading: 'lazy',\n        widths: [48, 96],\n        formats: {\n          webp: { quality: 50 },\n          jpg: { quality: 70 },\n        },\n      }),\n    }),\n  ],\n})\n```\n\n### Usage 🚀\n\nUse the `preset` query parameter to obtain an array of `source` and `img` attrs:\n\n```js\nimport thumbnails from '~/images/logo.jpg?preset=thumbnail'\n\nexpect(thumbnails).toEqual([\n  {\n    type: 'image/webp',\n    srcset: '/assets/logo.ffc730c4.webp 48w, /assets/logo.1f874174.webp 96w',\n  },\n  {\n    type: 'image/jpeg',\n    srcset: '/assets/logo.063759b1.jpeg 48w, /assets/logo.81d93491.jpeg 96w',\n    src: '/assets/logo.81d93491.jpeg',\n    class: 'img thumb',\n    loading: 'lazy',\n  },\n])\n```\n\nYou can also use the `src` and `srcset` query parameters for direct usage:\n\n```js\nimport srcset from '~/images/logo.jpg?preset=thumbnail\u0026srcset'\nimport src from '~/images/logo.jpg?preset=thumbnail\u0026src'\n\nexpect(srcset).toEqual('/assets/logo.063759b1.jpeg 48w, /assets/logo.81d93491.jpeg 96w')\nexpect(src).toEqual('/assets/logo.81d93491.jpeg')\n```\n\nCheck the [example] for additional usage information and different preset examples, or [see it live][live].\n\n## Documentation 📖\n\nAdditional usage documentation coming soon.\n\nIn the meantime, check the [`@islands/images`](https://github.com/ElMassimo/iles/tree/main/packages/images) module for [îles].\n\n## Acknowledgements\n\n- [sharp][sharp]: High performance Node.js image processing\n- [vite-imagetools](https://github.com/JonasKruckenberg/imagetools/tree/main/packages/vite): The middleware used in development is based on this nice library.\n\nThe `hdPreset` is based on the following article by Jake Archibald:\n\n- [Halve the size of images by optimising for high density displays](https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/)\n\n## License\n\nThis library is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felmassimo%2Fvite-plugin-image-presets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felmassimo%2Fvite-plugin-image-presets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felmassimo%2Fvite-plugin-image-presets/lists"}