svelte-imgix

Svelte Use Imgix

Svelte action for responsive, lazily-loaded images withImgix

Features

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

Basic Usage

npm i svelte-use-imgix

<script>
  import imgix from 'svelte-use-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.