Reduce mobile website load time

[balihr]

Interesting, and where would I need to insert that code?
Would it go into ../includes/templates/bootstrap/templates/tpl_index_slider.php ?

Well, yes and no.
I just checked that file and it will only take the main image that you uploaded in the banner manager, nothing else, and then display it using the zen_image() function. This won't help you because there's no built-in support for responsive images.

If you want to prepare the images manually and upload them to the same directory where the banner image was uploaded (either use FTP or my Image Manager plugin), you could "hack" the output line with your own version, something like:
Find

<?= zen_image(DIR_WS_IMAGES . $row['banners_image'], $row['banners_title'], BS4_SLIDER_WIDTH, BS4_SLIDER_HEIGHT, ' class="mx-auto d-block"') ?>

Replace with

<img src="<?= DIR_WS_IMAGES . $row['banners_image'] ?>" sizes="50vw"
     srcset="YOUR SOURCES HERE" alt="<?= $row['banners_title'] ?>">

Now, the tricky part would be what's highlighted in red. You'd need to come up with your own solution on how to build that string so that it takes the $row['banners_image'] value and inserts the width (example: your_banner.webp --> your_banner_400.webp 400w, your_banner_800.webp 800w etc) using your predetermined widths.

This allows you to upload a small version of the banner image in Banner Manager (let's say 200px width) and then add all other variants manually.

All of this CAN be automated with some backend code, of course, but it's up to you if you want to take it that far.