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" />

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.