Svelte image component

The @responsive-image/svelte package provides a native Svelte image component to render responsive images.

Installation

In your application's directory:

npm

npm install @responsive-image/svelte

yarn

yarn add @responsive-image/svelte

pnpm

pnpm add @responsive-image/svelte

Image component

The addon provides a <ResponsiveImage> component for rendering the set of images, taking local images or remote images as the src prop. Please refer to the main image component guide for all details and supported arguments!

Local images

To process local images you will need to setup one of the build plugins depending on your app's setup.

SvelteKit

If your app is built with SvelteKit, add the Vite plugin to your vite.config.ts:

import { sveltekit } from '@sveltejs/kit/vite';
import { setupPlugins } from '@responsive-image/vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    sveltekit(),
    setupPlugins({
      include: /^[^?]+\.jpg\?.*responsive.*$/,
    }),
  ],
});

IMPORTANT

For more information on how to configure @responsive-image/vite-plugin and setupPlugins() refer to the Vite plugin documentation.

Remote images

The @responsibe-image/cdn package provides multiple helper functions to support remote images served from different image CDNs for use with the <responsive-image/> component.

Please refer to the image CDN guide for details on all supported options and examples of the respective image CDN.