ppvg/svelte-picture-source

Svelte picture <source> image optimization preprocessor

Warning

This project is deprecated. If you use SvelteKit, please consider using @svelte/enhanced-img instead.

svelte-picture-source

This is a svelte component and image optimization preprocessor. Use the <PictureSource /> component as you normally would a <source />, with one small addition: the original attribute. The preprocessor takes the file referenced by original and converts and resizes it (using sharp) to whatever you specify in srcset.

<picture>
  <PictureSource
    original="puppy.jpg"
    srcset="_/puppy-large.jpg 800w, _/puppy-small.jpg 400w" />
  <img src="puppy.jpg" alt="Adorbable pupper" />
</picture>

When (not) to use

Use this when you're working with static images (i.e. no dynamic filenames) and you want full control over the <picture>'s <source>s.

If your images are static but you want more convenience instead of control, consider using svelte-image (which inspired this package). If you have dynamic content, consider using something like Cloudinary.

How to use

$ npm install -D svelte-picture-source

or

$ yarn add -D svelte-picture-source

Setup the preprocessor

Rollup

import pictureSource from 'svelte-picture-source'

   plugins: [
     svelte({
       dev: !production,
+      preprocess: pictureSource({ staticDir: 'public' }),
     }),

Webpack

const pictureSource = require('svelte-picture-source')

   {
     test: /\.svelte$/,
       use: {
         loader: 'svelte-loader',
         options: {
           emitCss: true,
           hotReload: true,
+          preprocess: pictureSource({ staticDir: 'public' }),
        },
      },
   },

Render the <PictureSource> component

<script>
  import { PictureSource } from 'svelte-picture-source'
</script>

<style>
  img {
    width: 100%;
  }
</style>

<picture>
  <PictureSource
    type="image/webp"
    original="puppy.jpg"
    srcset="_/puppy-large.webp 800w, _/puppy-small.webp 400w" />
  <PictureSource
    original="puppy.jpg"
    srcset="_/puppy-large.jpg 800w, _/puppy-small.jpg 400w" />
  <img src="puppy.jpg" alt="Adorbable pupper" />
</picture>

The component gets replaced with a native <source>, so all of the native attributes are supports and things like art direction are also possible:

<picture>
  <PictureSource
    original="vase-narrow.jpg"
    media="(max-width: 699px)"
    srcset="_/vase-narrow-800.jpg 800w, _/vase-narrow-400.jpg 400w" />
  <PictureSource
    original="vase-wide.jpg"
    media="(min-width: 700px)"
    srcset="_/vase-wide-1400.jpg 1400w, _/vase-wide-700.jpg 700w" />
  <img src="vase-wide.jpg" alt="Art-directed vase" />
</picture>

To Do

• write documentation
• write more documentation
• add integration tests
• add function to generate inline sqip-style placeholder images
• setup automation (ci, renovate, changelog, et cetera)

Up for discussion: support for the density descriptor (e.g. 2x) and more control over the sharp conversion (more resize options, image operations, colour manipulation, et cetera).

Copyright and license

Copyright 2020 Peter-Paul van Gemerden. Released under the MIT license.