srcset

Parse and stringify the HTML <img> srcset attribute

npm install srcset
2 downloads in the last week
4 downloads in the last month

srcset Build Status

Parse and stringify the HTML <img> srcset attribute.

Useful if you're creating a polyfill, build-tool, etc.

Install

Download the library manually or with a package-manager.

npm

npm install --save srcset

Bower

bower install --save srcset

Component

component install sindresorhus/srcset

Example

How an image with srcset might look like:

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

Then have some fun with it:

var parsed = srcset.parse('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-phone-HD.jpg', width: 100, density: 2 });

var stringified = srcset.stringify(parsed);
console.log(stringified);
/*
banner-HD.jpg 2x, banner-phone.jpg 100w, banner-phone-HD.jpg 100w 2x
*/

Documentation

parse()

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

stringify()

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

License

MIT © Sindre Sorhus

npm loves you