Svelte Responsive Image Tag (SRIT)

Svelte Responsive Image Tag (SRIT) is a Svelte component that makes it easy to create responsive images with automatic format selection based on browser support.

The component uses the picture element to provide multiple sources for the image in different formats, and the img element with the srcset and sizes attributes to select the appropriate source based on the device's screen size and resolution.

Installation

pnpm i -D srit

Usage

To use the Srit component, import it in your Svelte file and pass the required and optional props:

<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 above code creates the following output:

<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.

How to generate all images

Use bimgc. bimgc converts PNG and JPG images to AVIF and WebP format with various sizes and saves them in a specified output directory. The output images are named based on the input file and include information about their size and format.