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.

Don't miss out anything about Vue, your favourite framework.

Subscribe to receive all the articles we publish in a concise format, perfect for busy devs.

Related Articles

Achieve Max Performance loading your images with v-lazy-image

Don't you know what to do to improve your web performance? Learn Progressive Image Loading, a technique used by Spotify, Medium and Netflix.

Alex Jover Morales

Alex Jover Morales

Aug 30, 2021

Use Web Workers in your Vue.js Components for Max Performance

Learn how to get up to 20x performance improvement of Vue.js components that rely on heavy tasks so they render and load faster

Alex Jover Morales

Alex Jover Morales

Mar 31, 2020

Lazy load images using v-lazy-image Vue.js component

Learn to improve the web performance of your vue.js application

Alex Jover Morales

Alex Jover Morales

Apr 16, 2019

Sponsors

VueDose is proudly supported by its sponsors. If you enjoy it, consider supporting it to ensure the project maintainability.

Silver
Learning Partner