Srit: Svelte Responsive Image Tags

Test Image

Introduction

Svelte Responsive Image Tag (SRIT) is a Svelte component that simplifies the creation of responsive images by automatically selecting the appropriate format based on the browser's capabilities. The component uses the "picture" element to provide multiple image sources in different formats and the "img" element with the "srcset" and "sizes" attributes to choose the optimal source based on the device's screen size and resolution.

Installation

pnpm i -D srit

GitHub repo

Srit

Usage

The above image is created by the following in a Svelte file:

<script lang="ts">
  import Srit from 'srit';
  const imageSrc = 'images/test-image.jpg';
  const imageSizes = [100, 200, 400, 800];
  const imageAlt = 'Test Image';
</script>

<Srit src={imageSrc} sizes={imageSizes} alt={imageAlt} />

The created HTML is the following:

<picture>
  <source 
    type="image/avif" 
    srcset="images/test-image-2-100.avif?width=100 100w, 
    images/test-image-2-200.avif?width=200 200w, 
    images/test-image-2-400.avif?width=400 400w, 
    images/test-image-2-800.avif?width=800 800w">
  <source 
    type="image/webp" 
    srcset="images/test-image-2-100.webp?width=100 100w, 
    images/test-image-2-200.webp?width=200 200w, 
    images/test-image-2-400.webp?width=400 400w, 
    images/test-image-2-800.webp?width=800 800w">
  <img 
    src="images/test-image-2.jpg" 
    srcset="images/test-image-2-100.jpg?width=100 100w, 
    images/test-image-2-200.jpg?width=200 200w, 
    images/test-image-2-400.jpg?width=400 400w, 
    images/test-image-2-800.jpg?width=800 800w" 
    sizes="(max-width: 800px) 100vw, 50vw" 
    loading="lazy" 
    decoding="async" 
    alt="Test Image">
</picture>

Props

The following props are available for the Srit component:

Name Description Default
src A required prop that specifies the URL of the image to display.
avif An optional prop that specifies whether to include an avif source in the picture element. true
webp An optional prop that specifies whether to include a webp source in the picture element. true
sizes An optional prop that specifies an array of image sizes to include in the srcset attribute of the img element. [100, 200, 400, 800]
alt An optional prop that specifies the alternative text for the image.
loading A string indicating whether the image should be lazily loaded. Can be "lazy", "eager", null, or undefined. lazy
decoding A string indicating the decoding mode for the image. Can be "async", "auto", "sync", null, or undefined. async

Component document

If you are using an LSP-compatible editor, such as VSCode, Atom, Sublime Text, or Neovim, hovering over a component name will display a documentation link, features, props, events, and an example.

component doc example

Bimgc to create all your images from one image

You can convert your image to all AVIF and WEBP images by using bimgc.

Installing bimgc

npm i -g bimgc
bimgc --version
bimgc --help

bimgc configuration file

Create a configuration file, bimgc.config.cjs in the project root directory:

module.exports = {
  inputDir: "static/images",
  outputDir: "static/images",
  sizes: [100, 200, 400, 800],
  formats: ['avif', 'webp'],
  imageFiles: ['example-1.jpg', 'example-2.png']
};

Add the following to the scripts section of your package.json file:

"scripts": {
  "gen:images": "bimgc -c bimgc.config.cjs"
}

To generate the images, run the following command:

npm run gen:images

Find more information about bimgc.