Yes I know. Web Performance is a must nowadays, and image loading plays a big part on it.
I've already told you how to lazy load an image easily. But... Can you image how the performance would improve if you can load different sizes of an image depending on the viewport?
v-lazy-image allows you to do that using Web Standards:
srcset and the
Let me show you the how-to.
srcset property you can set images for different resolutions:
<template> <v-lazy-image srcset="image.jpg 1x, image_2x.jpg 2x" /> </template>
When using the
srcset attribute is recommended to use also
src as a fallback for browsers that don't support the
<template> <v-lazy-image srcset="image-320w.jpg 320w, image-480w.jpg 480w" sizes="(max-width: 320px) 280px, 440px" src="image-480w.jpg" /> </template>
srcset prop is combinable with
src-placeholder in order to apply progressive loading.
If you want to wrap the
img in a
<picture> tag, use the prop
usePicture. You can then use slots to add additional elements above the
<v-lazy-image srcset="image-320w.jpg 320w, image-480w.jpg 480w" alt="Fallback" use-picture > <source srcset="image-320w.jpg 320w, image-480w.jpg 480w" /> </v-lazy-image>
<picture> <source srcset="image-320w.jpg 320w, image-480w.jpg 480w" /> <img srcset="image-320w.jpg 320w, image-480w.jpg 480w" alt="Fallback" /> </picture>
Note you can use the picture polyfill.
Better shown than said. See how it works in this demo and feel free to play with it:
# Follow Up
I wanted to go straight, so now you know how to optimize image loading in your website and improve performance by loading different sizes of an image, improving the UX indirectly.
However, if you didn't know about
<picture>, you probably need to understand that better. You can read a deeper explanation on the article Responsive Images Done Right: A Guide To from Smashing Magazine.
Do you want to go one step further on achieving max performance? Then you must learn Progressive Image Loading, one of the techniques I find more fascinating.