Responsive Images with Lazy Load and srcset

#1

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:

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

Open Content and select Image:

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

Add new dynamic attribute:

Open Display and select Lazy Load:

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

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

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

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:

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

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

And select Auto:

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


WapplerPrevious   WapplerNext


2 Likes
Wappler Official Documentation
How-to Guides
automatically bumped #6
automatically bumped #7