svelte-imgix

Svelt Imgix

Svelte action for responsive, lazily-loaded images with 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>

<img use:imgix="some-imgix-img.jpeg" />

Helper functions

Svelte Imgix exports 2 additional helper functions that you can use to create LQIP placeholders and responsive srcsets yourself, placeholder(src) and srcset(src;

<script>
  import { placeholder, srcset } from 'svelte-imgix';
  import { invew } from 'svelte-inview';

  let intersected = false;
</script>

<img src={intersected ? srcset(imgixImg) : placeholder(imgixImg)} use:invew on:enter={() => intersected = true} />

SSR Support

Until Svelte supports actions running in SSR, you might notice images don't have a src at all until svelte-imgix has hydrated. As a workaround, use the placeholder helper function to SSR an LQIP placeholder image manually. Svelte-imgix will then hydrate from there, with the same placeholder image, and load your full srcset once the image enters the viewport.

<img use:imgix={src} src={placeholder(src)} />

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.