svelte-imgix

Svelte Imgix

Responsive, lazily-loaded images with Svelte and Imgix

Features

• Lazy loading with automatic LQIP placeholders
• Generate responsive image srcsets automatically

Basic Usage

npm i svelte-imgix

<script>
  import Imgix from 'svelte-imgix';
</script>

<Imgix
  src="https://assets.imgix.com/image.jpg"
/>

Svelte-preprocess

svelte-meta is written in Typescript, and requires Svelte's preprocessing to be enabled. If you're using Sapper this comes enabled by default.

To enable preprocessing, install svelte-preprocess and include it in the svelte config in your rollup.config.js or webpack.config.js

npm i svelte-preprocess

import autoPreprocess from 'svelte-preprocess';

svelte({
  preprocess: autoPreprocess()
});

See the svelte-preprocess docs for more.

Adding Sizes

Svelte-Imgix automatically generates a responsive srcset for a huge range of viewport sizes. By adding a sizes attribute to your image you can instruct the browser to use the appropriate source based on media queries.

See the MDN article on responsive images for a thorough walkthrough.

Setting Imgix Parameters

You can either provide a full Imgix URL (with query parameters) to svelte-imgix, or define parameters to override anything set on the src with the imgixParams prop. All valid Imgix properties are avaiable.

<Imgix
  src="https://assets.imgix.com/image.jpg"
  imgixParams={{
    auto: 'format',
    fit: 'facearea'
  }}
/>

Properties

Property	Description
src	Imgix source of the image
alt	Alt text for the image
ImgixParams	Object of Imgix parameters to set on the image, overrides any defaults given in src