Discuss

Responsive Images with Lazy Load and srcset

On this page

In most cases using the "Responsive" option in Bootstrap 4 works perfectly fine. However, there are some cases where you need to serve different images for different devices - one for desktop, a different one for tablets, and a third version for small devices, like phones. Also, your ultra high quality photo for desktop may be 5MB in size, which on a slower 3G connection would cause a really long loading times.

In these cases you can use the Lazy Load Component with the srcset attribute options. When you want to display separate images (or usually, a separate asset of the same image) based on the device viewport size you'd go with a basic srcset implementation.

We prepared 4 different images with widths of: 640px, 960px, 1440px and 1920px. You can use as many images with the srcset as you wish, but we think these sizes are optimal:

Screenshot_2|690x150

First, let's add an image on our page:

Screenshot_1|690x382

Open Content and select Image:

Screenshot_3|690x382

Do not use the normal src option here. Just set the width to 100%:

Screenshot_5|690x409

Add new dynamic attribute:

Screenshot_5|690x382

Open Display and select Lazy Load:

Screenshot_6|690x382

Click the Add New button, to add a value in the srcset table:

Screenshot_7|690x382

Click the little folder icon, to browse to your images:

Screenshot_8|690x382

Select one - we start with the smallest (640px wide):

Screenshot_9|690x382

Then, double click inside the size field and add the image width there, floowed by: w - if your image width is 640px, you should enter 640w, if it is 800px then you should enter 800w:

Screenshot_10|690x382

Do the same for all of your srcset images, entering their sizes as explained:

Screenshot_12|690x382

When you are finished defining your images, open the sizes menu:

Screenshot_13|690x382

And select Auto:

Screenshot_14|690x382

You are done! The Lazy Load component will automatically load only the image, which fits your device viewport size!


WapplerPrevious|101x31   WapplerNext|77x31