live code: lazy loaded & responsive images in Svelte with svelte-image module
Channel: SpinSpire
Date: 2020-04-20

Make your Svelte applications faster, cheaper and more pleasant to users with responsive and lazy loaded images using "svelte-images" npm module. And once again, it is done at compile time rather than run time -- because that's the spirit of Svelte.

Module code & docs: https://github.com/matyunya/svelte-image

For questions, post a comment. For business inquiries, email info@spinspire.com.

TOC/Index
00:00 Intro - definition of the problem and solution
01:20 Demo - lazy loaded images
03:45 Demo - response images
07:13 Review of features
07:55 Start coding - new project - App.svelte with a basic "img" tag
12:55 npm add --save-dev svelte-image; add "image" preprocessor to rollup.config.js
16:00 workaround for a bug - rename "public" to "static"
19:50 Basics are working; let's inline the image
22:00 Switch from "img" tag to "Image" component
24:30 Show a few large images at various sizes
26:55 Controlling the size of the image
28:30 Insert 20 images to demo lazy loading
32:28 Responsive images: different image resolutions for different viewport sizes
33:10 Lazy loading of remote images
38:55 Caveats
41:25 Switching "placeholder" from "trace" to "blur"
43:00 Setting the "ratio" attribute
45:33 Summary & recap