svelte-imgix
    TypeScript icon, indicating that this package has built-in type declarations

    2.4.1 • Public • Published

    Svelt Imgix

    NPM License

    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.

    Install

    npm i svelte-imgix

    DownloadsWeekly Downloads

    16

    Version

    2.4.1

    License

    MIT

    Unpacked Size

    35.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • madeleineostoja