@srcset/runtime

Browser runtime helpers of srcset: srcset strings and attributes of image variants.

• 🖼 Build srcset strings and <img>/<source> attributes from image variants
• 🌳 Zero dependencies, tree-shakable, less than 1 kB

Install

# pnpm
pnpm add @srcset/runtime
# yarn
yarn add @srcset/runtime
# npm
npm i @srcset/runtime

Usage

import url, { src, srcSet } from './photo.jpg'
import { getImageProps, getSourceProps } from '@srcset/runtime'

const { src: imgSrc, srcSet: imgSrcSet } = getImageProps(src, srcSet)
// <img src={imgSrc} srcSet={imgSrcSet}/>

const sources = getSourceProps(srcSet)
// sources of <picture>, grouped by mime type and ordered by format efficiency

Documentation

For more details, guides and API references, check out the documentation website.