svelte-progressive-image

Progressive image component using Svelte (granted that you already have the images).

Demo

Installation

Run yarn add -D svelte-progressive-image.

Then use it in your svelte files like that:

<script>
  import Image from "svelte-progressive-image";

  let name = 'image-name';
</script>

<Image {name}>

Result

The result looks like:

<picture>
  <source 
    srcset="[email protected]  254w,
            [email protected]  338w,
            [email protected]  389w,
            [email protected]  518w,
            [email protected]  676w,
            [email protected]  777w,
            [email protected]  892w,
            [email protected]  960w,
            [email protected] 1036w,
            [email protected] 1280w,
            [email protected] 1338w,
            [email protected] 1382w,
            [email protected] 1784w,
            [email protected] 1920w,
            [email protected] 2560w"
            
    sizes="(max-width: 992px)   892px,
           (max-width: 768px)   691px,
           (max-width: 576px)   518px,
           (max-width: 375px)   338px,
           1280px"
           
    type="image/webp"
  >
  
  <img 
    srcset="[email protected]  254w,
            [email protected]  338w,
            [email protected]  389w,
            [email protected]  518w,
            [email protected]  676w,
            [email protected]  777w,
            [email protected]  892w,
            [email protected]  960w,
            [email protected] 1036w,
            [email protected] 1280w,
            [email protected] 1338w,
            [email protected] 1382w,
            [email protected] 1784w,
            [email protected] 1920w,
            [email protected] 2560w"
            
    sizes="(max-width: 992px)   892px,
           (max-width: 768px)   691px,  
           (max-width: 576px)   518px,  
           (max-width: 375px)   338px,  
           1280px"                       
           
    src="[email protected]"
    
    alt="Alternative text"
    
    class="w-90-percent max-width-1280"
  >
</picture>

API

Check the Image.svelte for the exported variables, their types and defaults. These include:

• The name of the image
• The widths that are used to create the srcSet attribute.
• The defaultWidth of the img to be shown if nothing else works.
• The sizes that makes the max-width media query for the screen-image.
• The largestImageSize which is the image size for the max window size.
• The alt attribute for alternative text for the image.
• The imageClass for any class that we need to style our component.

Based upon

• Opinionated Svelte Component Template
• Unsplash Svelte image by Ferenc Almasi
• Practical HTML for responsive images in 2019 by Greg Ochab