{"id":22702,"library":"vite-plugin-image-srcset","title":"vite-plugin-image-srcset","description":"A Vite plugin (v0.1.1, latest) that automatically generates srcset attributes for responsive images by importing images with the ?srcset query. It expects images with @2x and @3x suffixes in the same directory, outputs an object with `src` and `srcSet` properties for 1x/2x/3x pixel densities. Supports PNG and JPG formats. Requires Vite 5+, 6+, or 7+. Ships TypeScript declarations. Minimal alternative to heavier image optimization plugins.","status":"active","version":"0.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/nbarinov/vite-plugin-image-srcset","tags":["javascript","vite","vite-plugin","image","srcset","responsive","retina","hdpi","typescript"],"install":[{"cmd":"npm install vite-plugin-image-srcset","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-image-srcset","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-image-srcset","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin runs as a Vite plugin.","package":"vite","optional":false}],"imports":[{"note":"Named export only; default import does not exist.","wrong":"import srcSetPlugin from 'vite-plugin-image-srcset'","symbol":"srcSetPlugin","correct":"import { srcSetPlugin } from 'vite-plugin-image-srcset'"},{"note":"TypeScript interface for the resolved image object; use type import.","symbol":"ImageSrcSet","correct":"import type { ImageSrcSet } from 'vite-plugin-image-srcset'"},{"note":"Add type reference in env.d.ts or tsconfig types array for ?srcset module declarations.","wrong":"import 'vite-plugin-image-srcset/client'","symbol":"vite-plugin-image-srcset/client","correct":"/// <reference types=\"vite-plugin-image-srcset/client\" />"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport { srcSetPlugin } from 'vite-plugin-image-srcset';\n\nexport default defineConfig({\n  plugins: [srcSetPlugin()],\n});\n\n// App.tsx\nimport icon from './assets/icon.png?srcset';\n\nfunction App() {\n  return <img {...icon} alt=\"Icon\" />;\n}\n\n// Ensure files exist:\n// assets/icon.png, assets/icon@2x.png, assets/icon@3x.png","lang":"typescript","description":"Configures the plugin in Vite and demonstrates importing an image with ?srcset query to generate src and srcSet props for responsive images."},"warnings":[{"fix":"Ensure all three variants exist: icon.png, icon@2x.png, icon@3x.png.","message":"Images must follow naming convention: base (1x), base@2x.png, base@3x.png. Missing any will produce incomplete srcSet.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Convert images to .png or .jpg, or check plugin configuration for future format support.","message":"Only .png and .jpg formats are supported. Using other extensions will not be transformed.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Append ?srcset to the import path: import img from './image.png?srcset'","message":"The ?srcset query must be used; plain image imports without query will not be transformed.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add \"types\": [\"vite-plugin-image-srcset/client\"] in tsconfig.json or add /// <reference types=\"vite-plugin-image-srcset/client\" /> in a .d.ts file.","cause":"Missing type reference configuration or incorrect import.","error":"Cannot find module 'vite-plugin-image-srcset/client'"},{"fix":"Use import img from './file.png?srcset' instead of import img from './file.png'","cause":"Importing an image without ?srcset query (returns a string instead of object).","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'src')"},{"fix":"Change to: import { srcSetPlugin } from 'vite-plugin-image-srcset'","cause":"Using default import instead of named import.","error":"The requested module 'vite-plugin-image-srcset' does not provide an export named 'default'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}