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!
Last updated: