Performance issues
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
Presentation
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'
}Get the full documentation on the module repository: Prestashop Image Optimizer
Changelog
1.0.2
Allow custom template file
Order sources by width desc
1.0.1
Allow responsive images with size alternatives
1.0.0
First stable release
