npmpackage.info

Gathering detailed insights and metrics for srcset

Other packages similar to srcset

parse-srcset

1.0.2

A spec-conformant JavaScript parser for the HTML5 srcset attribute

webpack-image-srcset-loader

5.0.4

Generate srcset string from image

@types/parse-srcset

1.0.0

TypeScript definitions for parse-srcset

@prettier/parse-srcset

3.1.0

A spec-conformant JavaScript parser for the HTML5 srcset attribute

Gathering detailed insights and metrics for srcset

srcset

Parse and stringify the HTML <img> srcset attribute

5.0.1

138

MIT

JavaScript

174,223,071 4.2

Installations

npm install srcset

Pull Requests

Open

0

Total

10

Closed

2

Merged

8

Issues

Open

1

Total

6

Closed

5

Releases

v5.0.1

Published on 29 Jan 2024

v5.0.0

Published on 21 Nov 2021

v4.0.0

Published on 14 May 2021

v3.0.1

Published on 19 Apr 2021

v3.0.0

Published on 12 Jul 2020

v2.0.1

Published on 21 Nov 2019

View all 7 releases

Developer

sindresorhus

Developer Guide

BETA

Module System

ESM

Min. Node Version

^12.20.0 || ^14.13.1 || >=16.0.0

Typescript Support

Yes

Node Version

20.11.0

NPM Version

9.2.0 Statistics

138 Stars

31 Commits

16 Forks

7 Watching

1 Branches

7 Contributors

Updated on 11 Nov 2024

Languages

JavaScript (95.75%)

TypeScript (4.25%)

Total Downloads

Cumulative downloads

Total Downloads

174,223,071

Last day

1.6%

156,215

Compared to previous day

Last week

864,651

Compared to previous week

Last month

20.2%

3,528,414

Compared to previous month

Last year

62.2%

33,155,054

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

ava tsd xo

Versions

srcset

Parse and stringify the HTML <img> srcset attribute.

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

Install

1npm install srcset

Usage

How an image with srcset might look like:

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

Then have some fun with it:

1import {parseSrcset, stringifySrcset} from 'srcset';
2
3const parsed = parseSrcset('banner-HD.jpg 2x, banner-phone.jpg 100w');
4console.log(parsed);
5/*
6[
7	{
8		url: 'banner-HD.jpg',
9		density: 2
10	},
11	{
12		url: 'banner-phone.jpg',
13		width: 100
14	}
15]
16*/
17
18parsed.push({
19	url: 'banner-super-HD.jpg',
20	density: 3
21});
22
23const stringified = stringifySrcset(parsed);
24console.log(stringified);
25/*
26banner-HD.jpg 2x, banner-phone.jpg 100w, banner-super-HD.jpg 3x
27*/

API

parseSrcset(string, options?)

Parse the HTML <img> srcset 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 SrcSetDefinitions. 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.

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

4.2

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More