Banner Manager Image Size (Winchester Responsive)

[mikecnz]

I've been using PageSpeed to make improvements to my site's performance - and was trying to deal with what I thought was the low-hanging fruit first.
One of the big issues is the size of the images used in the banners being large when used on a mobile device:
Displayed: 412 x 130 (3.17)
Actual: 1600 x 480 (3.33)
The recommendation is to use srcset to serve up a smaller version of the banner image on smaller screens.
Easier said than done...

First I would need to create a new function:

function zen_image_srcset($file, $alt = '', $width = '', $height = '') {
$image_path = DIR_WS_IMAGES . $file;
$image_info = getimagesize($image_path);

$src = htmlspecialchars($image_path);

// Define the sizes for the srcset attribute
$sizes = array(
'(max-width: 576px) 576px', // Example sizes for different breakpoints
'(max-width: 768px) 768px',
'(max-width: 992px) 992px',
'(max-width: 1200px) 1200px',
'2000px' // Fallback size for larger screens
);

// Generate the srcset attribute
$srcset = '';
foreach ($sizes as $size) {
$srcset .= htmlspecialchars($image_path) . ' ' . $size . ', ';
}
$srcset = rtrim($srcset, ', ');

// Construct the HTML image tag with srcset
$html = '<img src="' . $src . '" srcset="' . $srcset . '"';

if (!empty($alt)) {
$html .= ' alt="' . htmlspecialchars($alt) . '"';
}
if (!empty($width)) {
$html .= ' width="' . htmlspecialchars($width) . '"';
}
if (!empty($height)) {
$html .= ' height="' . htmlspecialchars($height) . '"';
}

$html .= '>';

Then integrate it into the content slider:

if ($banner->fields['banners_url'] == '') {
$banner_string = zen_image_srcset($banner->fields['banners_image'], 'Alt Text', 200, 150); //etc...
}

What I'm unsure of is how to get the additional image locations into the database.
Please note the above could be horribly wrong as I've utilised an AI to help come up with the code, as I am terrible with PHP.

[mikecnz]

Still thinking about this, to avoid too many changes to PHP, would the following work..
Manually alter the database by adding image_srcset & image_size as follows:

banners_id banners_title banners_image image_srcset image_size

Then altering the code in tpl_home_slider from:

if ($banner->fields['banners_url'] == '') {
                                                $banner_string = zen_image(DIR_WS_IMAGES . $banner->fields['banners_image'], $banner->fields['banners_title']) . '<span class="banner"><span>' . $banner->fields['banners_title'] . '</span></span>'; 

to

    if ($banner->fields['banners_url'] == '') {
        // Retrieve values from the new columns
        $image_src = DIR_WS_IMAGES . $banner->fields['banners_image'];
        $image_title = $banner->fields['banners_title'];
        $image_srcset = $banner->fields['image_srcset'];
        $image_sizes = $banner->fields['image_sizes'];

        // Generate the <img> tag with srcset and sizes attributes
        $banner_string = '<img src="' . $image_src . '" ' .
                        'srcset="' . $image_srcset . '" ' .
                        'sizes="' . $image_sizes . '" ' .
                        'alt="' . $image_title . '">' .
                        '<span class="banner"><span>' . $image_title . '</span></span>';
    }
}