JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 802663
  • Score
    100M100P100Q199117F
  • License MIT

Parse and stringify the HTML `<img>` srcset attribute

Package Exports

  • srcset

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (srcset) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

srcset

Parse and stringify the HTML <img> srcset attribute.

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

Install

$ npm install srcset

Usage

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:

const srcset = require('srcset');

const 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
});

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

API

.parse()

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

.stringify()

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


Get professional support for this package with a Tidelift subscription
Tidelift helps make open source sustainable for maintainers while giving companies
assurances about security, maintenance, and licensing for their dependencies.