# srcset

> Parse and stringify the HTML `` srcset attribute

Latest version **5.0.3** (published 2026-01-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install srcset
pnpm add srcset
yarn add srcset
bun add srcset
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.3 |
| Published | 2026-01-12 |
| First published | 2013-08-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | ^12.20.0 \|\| ^14.13.1 \|\| >=16.0.0 |
| Dependencies | 0 |
| Unpacked size | 11.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 144 |
| Author | Sindre Sorhus |
| Maintainers | sindresorhus |
| Keywords | html, attribute, image, img, src, parse, stringify, srcset, responsive, picture, element |

## Links

- npm: https://www.npmjs.com/package/srcset
- Repository: https://github.com/sindresorhus/srcset
- Homepage: https://github.com/sindresorhus/srcset#readme
- Issues: https://github.com/sindresorhus/srcset/issues
- Funding: https://github.com/sponsors/sindresorhus
- npm.io page: https://npm.io/package/srcset

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 5.0.3 (latest) — 2026-01-12
- 5.0.2 — 2025-09-16
- 5.0.1 — 2024-01-29
- 5.0.0 — 2021-11-21
- 4.0.0 — 2021-05-14
- 3.0.1 — 2021-04-19
- 3.0.0 — 2020-07-12
- 2.0.1 — 2019-11-21
- 2.0.0 — 2019-04-28
- 1.0.0 — 2015-05-20
- 0.1.1 — 2014-04-30
- 0.1.0 — 2013-08-22

## README

# srcset

> Parse and stringify the HTML `<img>` [srcset](https://www.smashingmagazine.com/2013/08/webkit-implements-srcset-and-why-its-a-good-thing/) attribute.

Can be useful if you're creating a build-tool.

## Install

```sh
npm install srcset
```

## Usage

How an image with `srcset` might look like:

```html
<img
	alt="The Breakfast Combo"
	src="banner.jpg"
	srcset="banner-HD.jpg 2x, banner-phone.jpg 100w"
>
```

Then have some fun with it:

```js
import {parseSrcset, stringifySrcset} from 'srcset';

const parsed = parseSrcset('banner-HD.jpg 2x, banner-phone.jpg 100w');
console.log(parsed);
/*
[
	{
		url: 'banner-HD.jpg',
		density: 2
	},
	{
		url: 'banner-phone.jpg',
		width: 100
	}
]
*/

parsed.push({
	url: 'banner-super-HD.jpg',
	density: 3
});

const stringified = stringifySrcset(parsed);
console.log(stringified);
/*
banner-HD.jpg 2x, banner-phone.jpg 100w, banner-super-HD.jpg 3x
*/
```

## API

### parseSrcset(string, options?)

Parse the HTML `<img>` [srcset](http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/) attribute.

Accepts a “srcset” string and returns an array of objects with the possible properties: `url` (always), `width`, `height`, and `density`.

#### string

Type: `string`

A “srcset” string.

#### options

Type: `object`

##### strict

Type: `boolean`\
Default: `false`

When enabled, an invalid “srcset” string will cause an error to be thrown. When disabled, a best effort will be made to parse the string, potentially resulting in invalid or nonsensical output.

### stringifySrcset(SrcSetDefinitions, options?)

Stringify `SrcSetDefinition`s. Accepts an array of `SrcSetDefinition` objects and returns a “srcset” string.

#### srcsetDescriptors

Type: `array`

An array of `SrcSetDefinition` objects. Each object should have a `url` field and may have `width`, `height` or `density` fields. When the `strict` option is `true`, only `width` or `density` is accepted.

#### options

Type: `object`

##### strict

Type: `boolean`\
Default: `false`

Enable or disable validation of the `SrcSetDefinition`'s. When true, invalid input will cause an error to be thrown. When false, a best effort will be made to stringify invalid input, likely resulting in invalid srcset value.

---
_Source: https://npm.io/package/srcset · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._