parse-srcset

What is parse-srcset?

The parse-srcset npm package is a utility for parsing the 'srcset' attribute of HTML <img> elements. It helps in breaking down the 'srcset' attribute into its individual components, making it easier to work with responsive images in web development.

What are parse-srcset's main functionalities?

Parsing srcset attribute

This feature allows you to parse a 'srcset' attribute string into an array of objects, each representing an image candidate with its URL and descriptor.

const parseSrcset = require('parse-srcset');
const srcset = 'image1.jpg 1x, image2.jpg 2x';
const parsed = parseSrcset(srcset);
console.log(parsed);

Handling different descriptors

This feature supports parsing different types of descriptors such as width descriptors (e.g., '100w') and pixel density descriptors (e.g., '2x').

const parseSrcset = require('parse-srcset');
const srcset = 'image1.jpg 1x, image2.jpg 2x, image3.jpg 100w';
const parsed = parseSrcset(srcset);
console.log(parsed);

Other packages similar to parse-srcset

srcset

The 'srcset' package provides similar functionality for parsing and stringifying 'srcset' attributes. It offers a more comprehensive API for both parsing and generating 'srcset' strings, making it a versatile alternative to parse-srcset.

README

parse-srcset

A javascript parser for the HTML5 srcset attribute, based on the WHATWG reference algorithm. It has an extensive test suite based on the W3C srcset conformance checker. It conforms to the jQuery JSCS style rules.

Tests are written using Intern-geezer for compatibility.

To run the tests in console:

$ npm test

Or in a browser, just open the html file at:

node_modules/intern-geezer/client.html?config=tests/intern

I’m on twitter @tweetywheaty.