Prestashop Image Optimizer

Presentation

Image optimizer module is an easy way to resize and compress images on the fly. Use responsive images with size alternatives.

Requirements

• Prestashop >= 1.7.6.0
• PHP >= 7.2.0

Installation

Download the pixel_image_optimizer.zip file from the last release assets.

Admin

Go to the admin module catalog section and click Upload a module. Select the downloaded zip file.

Manually

Move the downloaded file in the Prestashop modules directory and unzip the archive. Go to the admin module catalog section and search for "Image Optimizer".

Widget

{widget name='pixel_image_optimizer'}

Options

The image to optimize

• id_image: the prestashop image id (ex: 1)

{widget name='pixel_image_optimizer' id_image=1}

• image_path: the image path (ex: img/cms/image.jpg)

{widget name='pixel_image_optimizer' image_path='img/cms/image.jpg'}

Optimizer options

• alt: alternative text (optional)
• class: img element class name (optional)
• image_name: image name (optional, keep the same image name if empty)
• quality: image quality from 0 to 100 (optional, used only for jpg and webp)
• width: maximum width (optional)
• height: maximum height (optional)
• ext: convert image to jpg, png, gif or webp (optional)
• breakpoints: Alternative widths of responsive images in px (e.g. "500,800,1200") (optional)
• template: custom template file

Examples

Product image

{foreach $product.images as $image}
    {widget name='pixel_image_optimizer'
        id_image=$image.id_image
        image_name=$product.name
        alt=$image.legend
        class="product-image"
        quality=80
        width=750
    }
{/foreach}

Result:

<img src="https://www.example.com/img/web/my-product-name-750x562-80.jpg"
     alt="Legend"
     class="product-image"
     width="750"
     height="562"
     loading="lazy" />

Simple image

{widget name='pixel_image_optimizer'
    image_path='img/cms/image.jpg'
    quality=90
    height=600
}

Result:

<img src="https://www.example.com/img/web/image-800x600-90.jpg"
     width="800"
     height="600"
     loading="lazy" />

Responsive image

{widget name='pixel_image_optimizer'
    image_path='img/cms/image.jpg'
    quality=90
    width=1200
    breakpoints='500,800'
}

Result:

<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>

Custom template

You can create your own template to display image.

Create a new template file in the pixel_image_optimizer directory for your theme:

themes/{themeName}/modules/pixel_image_optimizer/custom.tpl

Add the template option in the widget with the template path:

{widget name='pixel_image_optimizer'
    image_path='img/cms/image.jpg'
    width=1200
    template='module:pixel_image_optimizer/custom.tpl'
}