Use Responsive Images with v-lazy-image

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 <picture> tag.

Let me show you the how-to.

# Srcset

Using the 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 srcset and sizes attributes:

<template>
  <v-lazy-image
    srcset="image-320w.jpg 320w, image-480w.jpg 480w"
    sizes="(max-width: 320px) 280px, 440px"
    src="image-480w.jpg"
  />
</template>

The srcset prop is combinable with src-placeholder in order to apply progressive loading.

# Picture

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 img element`.

<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>

Renders as:

<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.

# Demo

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 srcset and <picture>, you probably need to understand that better. You can read a deeper explanation on the article Responsive Images Done Right: A Guide To And srcset 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.