Images in PrestaShop Themes

Images are crucial in any e-commerce store, impacting both visual appeal and performance. PrestaShop offers several image types and sizes to help you optimize images for your store.

PrestaShop Available Image Formats

PrestaShop supports various image formats for displaying images across different sections such as products, categories, stores, brands, and suppliers. Here’s a summary of the available formats:

Note: The following formats depend on the version of PrestaShop you’re using.

Format Pros Cons
JPG/JPEG Small file size, widely supported No transparency, lossy compression
PNG High quality, supports transparency Larger file size
WebP Superior compression, transparency support Older browsers may not support it
AVIF Better compression (compared to WebP), supports transparency Limited browser support (but improving), not widely adopted yet

✅ Preferred Image Format: WebP

If your PrestaShop version and server support WebP, use it as the preferred format for your images due to its superior quality / size ratio.

💡 Why?

✔ Best for performance: WebP offers superior compression with minimal quality loss, improving page load times.

✔ Transparency support: Like PNG, WebP supports transparency but with a smaller file size.

✔ Wide browser support: Most modern browsers now support WebP.

Configuring Image Sizes

Before working with images in PrestaShop, ensure image sizes are configured in the Back Office to fit your theme’s requirements. Be aware that creating too many image sizes will increase the storage space occupied by images on your server especially if you have a lot of products with multiple images.

✅ Configure Image Sizes in config/theme.yml

Defining image formats in your theme configuration ensures these formats are created when the theme is installed.

Notes:

  • Some image sizes are mendatory by PrestaShop themes. Find the list here.
  • Don’t forget to regenerate image formats via the BO when needed.
global_settings:
  image_types:
    # mandatory images by PrestaShop themes
    # ...
    # your custom image sizes
    theme_product_large:
      width: 800
      height: 800
      scope: [products]
    theme_square:
      width: 120
      height: 120
      scope: [manufacturers, suppliers]

🔍 Explanation of Fields

  • theme_product_large → Name of the custom image format.
  • width / height → Defines the image dimensions.
  • scope → Specifies where the image format applies (products, categories, manufacturers, suppliers, stores).

✅ Configure Image Sizes in the BO

Alternatively, image sizes can be configured in the Design → Image Settings section of the Back Office.

Note: Don’t forget to regenerate image formats via the BO when needed.

💡 Why?

✔ Consistency across your store: Configuring image sizes ensures all images fit your theme’s design requirements.

✔ Easy adjustments: You can easily change image sizes in the BO without needing to modify code, offering more flexibility and manageability.

Modern Way to Handle Image Sizes

With the rise of responsive web design and retina displays, it’s essential to provide different image resolutions that adapt to various devices.

More information about srcset and sizes.

✅ Use srcset for Responsive Images

<img
  src="{$product.cover.bySize.default_md.url}"
  srcset="{$product.cover.bySize.default_sm.url} 480w,
    {$product.cover.bySize.default_md.url} 800w,
    {$product.cover.bySize.default_lg.url} 1200w"
  sizes="(min-width: 1300px) 33vw, 50vw"
  alt="Product Image">

Note: Don’t forget to test in your .tpl if your urls exist before using it.

💡 Why?

✔ Adapts to different screen sizes: Using srcset and sizes allows the browser to load the appropriate image resolution for the device.

✔ Improves performance: The browser loads only the necessary image size based on screen size, reducing unnecessary data usage.

Modern Way to Handle Image Formats

To ensure maximum compatibility and optimal performance, use the <picture> element to serve images in multiple formats.

✅ Use the <picture> Element for Multiple Formats

This ensures the browser loads AVIF if supported, WebP if supported, and then <img> as a last resort.

More information about the <picture> element.

<picture>
  <source srcset="{$product.cover.bySize.default_md.sources.avif}" type="image/avif">
  <source srcset="{$product.cover.bySize.default_md.sources.webp}" type="image/webp">
  <img
    src="{$product.cover.bySize.default_md.url}"
    width="{$product.cover.bySize.default_md.width}"
    height="{$product.cover.bySize.default_md.height}"
    alt="Product Image">
</picture>

Note: Don’t forget to test in your .tpl if your sources exist before using it.

💡 Why?

✔ Supports multiple formats: The <picture> element allows you to offer AVIF, WebP, and fallback formats for older browsers.

✔ Improves load times: The browser will serve optimized images formats if he supports it.

Native Lazy Load for Images

To improve page load times, it’s essential to implement lazy loading. This ensures images are only loaded when they are about to appear on the screen, reducing the initial page load time.

✅ Enable Native Lazy Load

<img
  src="{$product.cover.bySize.default_md.url}"
  loading="lazy"
>

Note: Don’t use loading=lazy on the Largest Contentful Paint (LCP) element.

💡 Why?

✔ Optimizes performance: Lazy loading reduces initial page load time by loading images only when they are needed.

✔ Saves bandwidth: Off-screen images are not loaded until the user scrolls to them, saving data.

Define Image Dimensions in HTML

To ensure a smooth user experience and improve performance, it’s important to specify image dimensions in HTML. This helps browsers allocate space for images before they load, preventing layout shifts and improving page stability.

✅ Define Image Dimensions

<img
  src="{$product.cover.bySize.default_md.url}"
  width="{$product.cover.bySize.default_md.width}"
  height="{$product.cover.bySize.default_md.height}">

💡 Why?

✔ Prevents layout shifts: Helps maintain a stable page layout, improving Cumulative Layout Shift (CLS).

✔ Optimizes performance: Browsers reserve space for images, reducing unexpected content movement.

✔ Enhances user experience: Ensures smoother and more predictable page rendering.

Default “No Image” Placeholder

When images are unavailable, displaying a default “no image” placeholder ensures consistent design across your store. PrestaShop provides a “No image available” image for all image formats with the “product” scope.

✅ Set Up a “No Image” Placeholder

<img src="{$urls.no_picture_image.bySize.default_md.url}" alt="">

💡 Why?

✔ Improves UX: A placeholder ensures your theme looks uniform even when an image is missing.

✔ Prevents broken image links: A default image avoids showing missing content.

Conclusion

Properly managing images in your PrestaShop theme is essential for optimal performance and a professional user experience.

🚀 Key Takeaways:

✔ If available, use WebP as the preferred format: WebP offers superior compression and supports transparency, providing excellent performance across modern browsers.

✔ Implement responsive images with srcset and sizes: These attributes ensure that the browser loads the optimal image size based on screen size and resolution, improving performance.

✔ Leverage the <picture> element for format support: Serve multiple image formats (e.g., WebP and AVIF) for cross-browser compatibility, ensuring that each browser loads the best available format.

✔ Enable lazy loading for images: Lazy loading reduces the initial page load time by loading images only when they’re about to appear in the viewport, saving bandwidth and improving performance.

✔ Provide a default “no image” placeholder: A fallback ensures your site maintains a consistent design, even when images are missing.