Registry / devops / vite-plugin-image-srcset

vite-plugin-image-srcset

library0.1.1jsnpmunverified

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.

devops

npm install vite-plugin-image-srcset

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-IMAGE-

vite-plugin-image-srcset

devopsjavascriptv0.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

srcSetPlugin

✓ import { srcSetPlugin } from 'vite-plugin-image-srcset'

✗ import srcSetPlugin from 'vite-plugin-image-srcset'

Named export only; default import does not exist.

ImageSrcSet

✓ import type { ImageSrcSet } from 'vite-plugin-image-srcset'

TypeScript interface for the resolved image object; use type import.

vite-plugin-image-srcset/client

✓ /// <reference types="vite-plugin-image-srcset/client" />

✗ import 'vite-plugin-image-srcset/client'

Add type reference in env.d.ts or tsconfig types array for ?srcset module declarations.

Configures the plugin in Vite and demonstrates importing an image with ?srcset query to generate src and srcSet props for responsive images.

// vite.config.ts import { defineConfig } from 'vite'; import { srcSetPlugin } from 'vite-plugin-image-srcset'; export default defineConfig({ plugins: [srcSetPlugin()], }); // App.tsx import icon from './assets/icon.png?srcset'; function App() { return <img {...icon} alt="Icon" />; } // Ensure files exist: // assets/icon.png, assets/icon@2x.png, assets/icon@3x.png

Debug

Known issues

gotchaImages must follow naming convention: base (1x), base@2x.png, base@3x.png. Missing any will produce incomplete srcSet.

fix

Ensure all three variants exist: icon.png, icon@2x.png, icon@3x.png.

affects: >=0.1.0

gotchaOnly .png and .jpg formats are supported. Using other extensions will not be transformed.

fix

Convert images to .png or .jpg, or check plugin configuration for future format support.

affects: >=0.1.0

gotchaThe ?srcset query must be used; plain image imports without query will not be transformed.

fix

Append ?srcset to the import path: import img from './image.png?srcset'

affects: >=0.1.0

Errors

Common errors & fixes

Cannot find module 'vite-plugin-image-srcset/client'

Missing type reference configuration or incorrect import.

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.

Uncaught TypeError: Cannot read properties of undefined (reading 'src')

Importing an image without ?srcset query (returns a string instead of object).

fix

Use import img from './file.png?srcset' instead of import img from './file.png'

The requested module 'vite-plugin-image-srcset' does not provide an export named 'default'

Using default import instead of named import.

fix

Change to: import { srcSetPlugin } from 'vite-plugin-image-srcset'

Upgrade

Version history

0.1.1latest on npm

Audit

Dependencies

viterequiredPeer dependency; plugin runs as a Vite plugin.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/nbarinov/vite-plugin-image-srcset ↗

packagehttps://www.npmjs.com/package/vite-plugin-image-srcset ↗