svimg is an image preprocessing and lazy loading component for Svelte. It consists of:
- A Svelte preprocessor that automatically resizes your images to multiple resolutions in a
srcset, creates additional WebP versions, and generates blurred placeholder images - A Svelte component that displays the blurred placeholder and automatically lazy loads the proper resolution image when it comes into view
svimg uses native browser lazy loading with a fallback to IntersectionObserver, and automatically calculates the appropriate sizes attribute. Some other image components do not set a proper sizes attribute, which can cause the browser to download a much larger resolution image than necessary if you are resizing the image with CSS. svimg will also use a literal width if specified to control image preprocessing and only generate the necessary image files for that width.
Since svimg is an external Svelte component, you'll want to make sure it gets bundled by Svelte during compile by installing it as a dev dependency (or modifying your rollup/webpack config to not treat it as an external).
npm install -D svimgIn rollup.config.js, add imagePreprocessor as a preprocessor for rollup-plugin-svelte:
import imagePreprocessor from 'svimg';
export default {
plugins: [
svelte({
preprocess: [
imagePreprocessor({
inputDir: 'public',
outputDir: 'public/g',
webp: true
})
]
})
]
};If you'r
8000
e using Sapper, add the preprocessor to both the client and the server svelte plugins. Make sure to use the same instance of imagePreprocessor for both client and server, to avoid redundant double-processing of image files:
import imagePreprocessor from 'svimg';
const preprocess = [
imagePreprocessor({
inputDir: 'static',
outputDir: 'static/g',
webp: true
})
];
export default {
client: {
plugins: [
svelte({
preprocess
})
]
},
server: {
plugins: [
svelte({
preprocess
})
]
}
};<script>
import Image from 'svimg';
</script>
<Image src="images/splash.jpg" />
<Image src="images/avatar.jpg" width="150" alt="Avatar" class="blue-border" />The Image component will render a blurred placeholder, a srcset with multiple resolutions, a sizes attribute, and a source of type image/webp with webp images.
| Property | Default | |
|---|---|---|
| src | required | Image url |
| alt | Alternate text for the image | |
| class | CSS classes to apply to image | |
| width | Resize image to specified width in pixels. If not specified, generates images of widths 480, 1024, 1920, and 2560. |
The following properties will be automatically populated by the preprocessor:
| Property | |
|---|---|
| srcset | Responsive images and widths |
| srcsetwebp | Responsive WebP images and widths |
| placeholder | Blurred placeholder image |
| Option | Default | |
|---|---|---|
| inputDir | required | The static asset directory where image urls are retrieved from |
| outputDir | required | The output directory where resized image files should be written to. This should usually be a subfolder within the normal static asset directory |
| webp | true | Whether to generate WebP versions of images in addition to the original image formats |
- Chris Han - Initial work - xiphux
This project is licensed under the ISC License - see the LICENSE.md file for details