Skip to content

Latest commit

 

History

History

Folders and files

README.md

@srcset/core

ESM-only package NPM version Node version Dependencies status Install size Build status Coverage status

Image processing engine of srcset: resize, convert and optimize images with sharp.

  • 🌠 Resize images for different screen sizes and densities
  • 📸 Convert images to modern formats such as WebP and Avif
  • 🎯 Match images by glob patterns and media queries
  • ⚡️ Concurrency-limited single-pass encoding

Install

# pnpm
pnpm add -D @srcset/core
# yarn
yarn add -D @srcset/core
# npm
npm i -D @srcset/core

Usage

import { readFile, writeFile } from 'node:fs/promises'
import { SrcSetGenerator } from '@srcset/core'

const generator = new SrcSetGenerator()
const source = {
  path: 'images/photo.jpg',
  contents: await readFile('images/photo.jpg')
}

for await (const image of generator.generate(source, {
  width: [1, 0.5, 320],
  format: ['avif', 'webp', 'jpg']
})) {
  await writeFile(`dist/${image.path.split('/').pop()}`, image.contents)
}

Documentation

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