Performance issues on images for Prestashop

As a developer, I always optimize the size and the weight of an image before uploading it on a website. But when an editor wants to add or update a decorative, gallery or featured image, it is most likely to add a high resolution image with a huge weight.

This non optimized image will be the same for all devices. On a mobile device with a weak connection, the customer will leave before the image loads.

It's a waste of bandwidth, and a heavy resource stored on the customer device.

For example, you want to give the e-commerce editor the possibility of adding an image to the home page. You would add a module containing a template with the img element:

<img src="{$huge_image_path}" alt="Non optimized image" />

The image is non optimized and shared on all devices.

Image Optimizer module for Prestashop

We developed a module for Prestashop to easily manage responsive image in a template. With a widget, the image weight will be reduced and the size updated according the customer screen.

In the previous example, the HTML image code will become:

<picture>
    <source media="(max-width: 800px)" srcset="https://www.example.com/img/web/image-800x400-90.jpg" />
    <source media="(max-width: 500px)" srcset="https://www.example.com/img/web/image-500x250-90.jpg" />
    <img src="https://www.example.com/img/web/image-1200x600-90.jpg" loading="lazy" />
</picture>

On a mobile device the light image file "image-500x250-90.jpg" will be loaded. It will only weigh a few kb.

Widget

Simply replace the call of the image in the template with the module widget:

{widget name='pixel_image_optimizer'
    image_path=$huge_image_path
    alt='Optimized image'
    quality=90
    width=1200
    breakpoints='500,800'
}

The image is resized according the screen and the proportions are preserved.

The module allows you to convert the image in another format with the ext option, like webp:

{widget name='pixel_image_optimizer'
    image_path=$huge_jpg_image_path
    alt='Optimized image'
    quality=90
    width=1200
    breakpoints='500,800'
    ext='webp'
}

See page project here.