@srcset/preact

Preact components for responsive images: Picture and Image.

• 🖼 <picture> sources grouped by mime type and ordered by format efficiency
• 🚀 Lazy loading and async decoding by default, priority for above-the-fold images
• 🌫 Blur-up placeholder background until the image loads
• 📐 Anti-CLS: intrinsic size from the image variant

Install

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

Usage

import { src, srcSet, placeholder } from './photo.jpg'
import { Picture, Image } from '@srcset/preact'

function Hero() {
  return (
    <Picture srcSet={srcSet}>
      <Image
        alt='Hero photo'
        src={src}
        placeholder={placeholder}
      />
    </Picture>
  )
}

Documentation

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