Back to FAQ PrestaShop Tips

WebP Images in PrestaShop: Setup and Pitfalls

384 views

What Is WebP and Why It Matters for PrestaShop

WebP is a modern image format developed by Google that provides both lossy and lossless compression for web images. Compared to traditional formats like JPEG and PNG, WebP typically delivers 25-35% smaller file sizes at equivalent visual quality. For an e-commerce store running PrestaShop, where product pages often contain dozens of images, switching to WebP can dramatically reduce page weight, improve loading times, and boost Core Web Vitals scores—all of which directly impact SEO rankings and conversion rates.

Unlike older next-gen formats that struggled with adoption, WebP has reached near-universal browser support. As of 2026, every major browser—Chrome, Firefox, Safari, Edge, Opera, and their mobile counterparts—fully supports WebP. Even legacy holdouts like older Safari versions on macOS Catalina are now statistically irrelevant, accounting for less than 0.3% of global traffic. This means you can confidently serve WebP images to virtually all visitors without worrying about compatibility issues.

For PrestaShop merchants, the performance gains are substantial. A typical product catalog with 1,000 products and 5 images each can see total image payload reduced from 500 MB to under 350 MB. On product listing pages showing 20-40 thumbnails, this translates to 200-400 KB saved per page load—enough to meaningfully improve Time to First Contentful Paint and Largest Contentful Paint metrics.

Enabling WebP in PrestaShop 1.7 and 8.x

PrestaShop 1.7.8+ and all 8.x versions include native WebP support. The feature is built into the image regeneration system and can be enabled through the back office. Here is how to activate it:

  1. Navigate to Design > Image Settings (in PS 8.x) or Preferences > Images (in PS 1.7).
  2. Look for the Image Generation Options section at the bottom of the page.
  3. Find the Image format setting and select one of the WebP-related options. PrestaShop typically offers: JPEG only, PNG only, WebP only, or JPEG/PNG + WebP (generates both formats).
  4. Select JPEG/PNG + WebP if you want fallback compatibility, or WebP only if you are certain all your visitors use modern browsers.
  5. Set the WebP quality slider. A value between 80 and 85 provides an excellent balance between file size and visual quality for product photography.
  6. Click Save, then click Regenerate thumbnails to create WebP versions of all existing images.

The regeneration process can take significant time on large catalogs. For a store with 5,000+ products, expect the process to run for 30 minutes to several hours depending on server resources. It is highly recommended to run regeneration during off-peak hours or via CLI to avoid PHP timeout issues.

CLI Regeneration for Large Catalogs

For stores with thousands of products, the browser-based regeneration will likely time out. Use the CLI approach instead:

php bin/console prestashop:image:regenerate --format=all

This command runs without the web server timeout constraints. You can also target specific image types:

php bin/console prestashop:image:regenerate --type=products --format=all
php bin/console prestashop:image:regenerate --type=categories --format=all

On PrestaShop 1.7 versions that lack the console command, you can increase PHP timeout limits and run the regeneration through the admin panel, or use a custom PHP script that calls the ImageManager class directly.

Server Configuration: Apache .htaccess Rules

Even after enabling WebP generation in PrestaShop, your server must be configured to serve the correct format. PrestaShop generates WebP files alongside the original JPEG/PNG files, but the server needs to know when to serve which format.

For Apache servers, add the following rules to your .htaccess file in the PrestaShop root directory or in the img/ directory:

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Serve WebP images if the browser supports them and the file exists
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.+)\.(jpe?g|png)$
  RewriteCond %1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=REQUEST_image,L]
</IfModule>

# Set correct MIME type for WebP
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

# Vary header to prevent caching issues
<IfModule mod_headers.c>
  Header append Vary Accept env=REQUEST_image
</IfModule>

These rules work as follows: when a browser requests a JPEG or PNG file, the server checks whether the browser sends an Accept: image/webp header. If it does, and a .webp version of the file exists on disk, the server transparently serves the WebP file instead. The Vary: Accept header ensures that caching proxies store separate versions for WebP-capable and non-WebP browsers.

Make sure mod_rewrite, mod_mime, and mod_headers are enabled on your Apache installation. Most shared hosting environments have these enabled by default, but you can verify with your hosting provider.

Nginx Configuration

For stores running on Nginx, the configuration goes in your server block or a location block within your site configuration file:

map $http_accept $webp_suffix {
  default "";
  "~*image/webp" ".webp";
}

server {
  # ... existing configuration ...

  location ~* ^(/img/.+)\.(jpe?g|png)$ {
    set $img_path $1;
    add_header Vary Accept;
    try_files $img_path$webp_suffix $uri =404;
  }
}

The map directive at the http level checks whether the client sends a WebP-compatible Accept header and sets a variable accordingly. The location block then uses try_files to first attempt serving the WebP version, falling back to the original format if the WebP file does not exist.

After modifying Nginx configuration, always test before reloading:

nginx -t
nginx -s reload

CDN Considerations

If you use a CDN like Cloudflare, KeyCDN, or Bunny.net in front of your PrestaShop store, WebP delivery requires additional attention.

Cloudflare

Cloudflare offers built-in WebP conversion through its Polish feature (available on Pro plans and above). When Polish is enabled with WebP conversion, Cloudflare automatically converts images to WebP at the edge—meaning you do not need to generate WebP files on your server at all. However, be aware of these caveats:

  • Polish only works for images served through Cloudflare's proxy (orange cloud enabled).
  • It does not convert images larger than 10 MB or images with certain color profiles.
  • The initial conversion adds latency on the first request; subsequent requests are served from cache.
  • If you also generate WebP locally, you may end up double-converting, which can slightly degrade quality.

If you prefer to serve your own WebP files through Cloudflare, make sure the Vary: Accept header is handled correctly. By default, Cloudflare strips the Vary header. You may need to create a Cache Rule or use a Worker to ensure proper content negotiation.

Other CDNs

Most modern CDNs support content negotiation based on the Accept header, but you must explicitly enable it. Check your CDN's documentation for "Vary header support" or "content negotiation." Some CDNs require you to enable "Cache by Accept header" in your caching rules. Without this, the CDN may cache the first version it sees (JPEG or WebP) and serve it to all visitors regardless of browser support.

Image Quality Settings

Choosing the right WebP quality setting is crucial. Too high, and you lose the file-size benefits; too low, and product images look blurry or show compression artifacts—a deal-breaker for e-commerce.

Here are recommended quality settings by image type:

  • Product images (large/detail views): Quality 82-88. Product photos need to look sharp, especially for items where texture and detail matter (fashion, jewelry, electronics). At quality 85, a typical 800x800 product image compresses from ~120 KB (JPEG) to ~80 KB (WebP) with no visible quality loss.
  • Category banners and hero images: Quality 78-82. These are typically viewed at larger sizes but with less scrutiny of fine detail.
  • Thumbnails and listing images: Quality 75-80. At small display sizes, lower quality is less noticeable. A thumbnail at quality 75 can be 50-60% smaller than its JPEG equivalent.
  • Logos and graphics with sharp edges: Use lossless WebP or keep as PNG. Lossy compression creates visible artifacts around text and hard-edged graphics.

PrestaShop applies a single quality setting globally. If you need different quality levels for different image types, you would need to modify the ImageManager class or use a third-party module that provides more granular control.

Fallback Strategies

While browser support for WebP is near-universal in 2026, implementing a fallback strategy is still considered best practice, especially if your store serves customers using older devices or restricted corporate environments.

Server-Side Content Negotiation

The .htaccess and Nginx rules described above implement server-side content negotiation. This is the recommended approach because it is transparent to the application layer. The browser requests the original URL, and the server decides which format to deliver based on the Accept header. No changes to templates or front-end code are required.

The HTML Picture Element

An alternative approach uses the <picture> element to let the browser choose the best format:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Product name">
</picture>

This requires modifying PrestaShop templates (Smarty or Twig depending on your version). While it gives you explicit control, it is more invasive and harder to maintain across theme updates. Server-side negotiation is generally preferred for PrestaShop deployments.

PrestaShop's Built-In Fallback

When you select the "JPEG/PNG + WebP" option in PrestaShop's image settings, the system generates both formats. PrestaShop 8.x handles the fallback automatically in its core templates, checking whether the WebP file exists before referencing it. If you use a custom theme, verify that the theme's product image templates support this dual-format approach.

Common Pitfalls and How to Fix Them

1. Broken Images After Enabling WebP

The most common issue after enabling WebP is broken images across the store. This usually happens because:

  • WebP files were not generated. Enabling the setting only affects newly uploaded images. You must click "Regenerate thumbnails" to create WebP versions of existing images. For large catalogs, use the CLI command.
  • File permissions are wrong. The web server user (typically www-data) must have write permissions to the img/ directory tree. After regeneration, verify permissions: find img/ -name "*.webp" -exec ls -la {} \;
  • .htaccess rules conflict. PrestaShop's default .htaccess contains rewrite rules that may conflict with WebP rewrite rules. Place WebP rules before PrestaShop's default rewrite block to ensure they are evaluated first.

2. Missing GD or Imagick Extensions

WebP generation requires PHP to have either the GD library or ImageMagick extension compiled with WebP support. To check:

php -r "echo gd_info()['WebP Support'] ? 'GD WebP OK' : 'GD WebP MISSING';"

Or for ImageMagick:

php -r "echo in_array('WEBP', Imagick::queryFormats()) ? 'Imagick WebP OK' : 'Imagick WebP MISSING';"

If WebP support is missing, you need to recompile PHP with the appropriate flags or install the correct packages. On Debian/Ubuntu: apt-get install libwebp-dev followed by recompiling the GD extension, or install a PHP version that includes WebP support (PHP 7.4+ typically includes it by default).

On shared hosting, if your PHP build lacks WebP support, contact your hosting provider. Most modern hosting environments include WebP support in PHP 8.x installations.

3. Cache Issues

Cache-related problems are among the most frustrating WebP issues:

  • Browser cache: After enabling WebP, browsers may continue showing cached JPEG/PNG versions. Advise users to hard-refresh (Ctrl+Shift+R), but this resolves itself as cached images expire.
  • Server-side cache: If you use Varnish, Redis, or any full-page caching, the cache must be purged after enabling WebP. Otherwise, cached pages will reference old image URLs or MIME types.
  • CDN cache: Purge your CDN cache completely after enabling WebP. Pay special attention to CDN cache keys—if the CDN does not vary caching by Accept header, it may serve WebP to browsers that do not support it (or vice versa).
  • OPcache: If you modified PHP files as part of enabling WebP (for example, custom ImageManager overrides), reset OPcache to ensure the new code takes effect.
  • PrestaShop Smarty cache: Clear the Smarty cache from the back office (Advanced Parameters > Performance) or delete the var/cache/ directory contents.

4. Incorrect MIME Types

If your server does not recognize the .webp extension, browsers will fail to render the images even though the files are valid. Ensure your server configuration includes the correct MIME type mapping: image/webp for .webp files. The AddType directive in the Apache section above handles this.

5. Image Upload Issues in the Back Office

PrestaShop's back office validates uploaded image formats. In some versions, uploading a WebP image directly through the product editor may fail with a validation error. This is because the upload validator whitelist may not include WebP. Check the allowed extensions in Advanced Parameters > Administration or the relevant configuration.

6. Third-Party Module Incompatibility

Some third-party modules (especially sliders, gallery modules, and product image zoom modules) hardcode image file extensions or do not support WebP. After enabling WebP, test all modules that display images. Common symptoms include missing thumbnails in slider modules or broken zoom functionality. Contact the module developer for updates, or ensure your server-side content negotiation handles the fallback correctly.

Testing WebP Delivery

After configuration, verify that WebP images are actually being served. Here are several methods:

Browser Developer Tools

  1. Open your store in Chrome or Firefox.
  2. Open DevTools (F12) and go to the Network tab.
  3. Filter by Img type.
  4. Reload the page.
  5. Click on any image request and check the Response Headers. The Content-Type should be image/webp.
  6. Also check the Type column in the network list—it should show "webp" for converted images.

Command-Line Testing

Use curl to verify content negotiation works correctly:

# Request with WebP support
curl -s -I -H "Accept: image/webp,image/*" https://yourstore.com/img/p/1/2/3/456-home_default.jpg | grep Content-Type
# Expected: Content-Type: image/webp

# Request without WebP support
curl -s -I -H "Accept: image/jpeg" https://yourstore.com/img/p/1/2/3/456-home_default.jpg | grep Content-Type
# Expected: Content-Type: image/jpeg

Online Tools

Google PageSpeed Insights and Lighthouse both flag images that are not served in next-gen formats. Run a Lighthouse audit on your product pages—if WebP is properly configured, you should not see the "Serve images in next-gen formats" recommendation.

Performance Impact

The real-world performance impact of WebP on a PrestaShop store depends on the catalog size and page composition, but typical improvements include:

  • Total page weight reduction: 15-30% on product listing pages and 10-20% on product detail pages, where images make up the majority of downloaded bytes.
  • Largest Contentful Paint (LCP): Improvement of 200-600ms on average, as the hero product image loads faster. This is one of the three Core Web Vitals and directly affects search rankings.
  • Time to Interactive (TTI): Marginal improvement, since image loading competes with JavaScript execution for bandwidth but not for CPU.
  • Server bandwidth savings: For a store serving 100,000 pageviews per month, WebP can reduce monthly bandwidth usage by 20-50 GB, potentially lowering hosting costs.
  • Mobile performance: The most significant gains are on mobile connections, where reduced image sizes translate directly to faster load times on 4G/5G networks. Google's mobile-first indexing makes this especially important.

Keep in mind that WebP generation adds CPU load during image processing (uploads and regeneration). On underpowered shared hosting, regenerating thumbnails for a large catalog can temporarily slow down the server. Schedule regeneration during low-traffic periods.

Summary Checklist

To successfully deploy WebP on your PrestaShop store, follow this checklist:

  1. Verify PHP has GD or ImageMagick with WebP support.
  2. Enable WebP generation in PrestaShop image settings (use JPEG/PNG + WebP for safety).
  3. Set quality to 82-85 for optimal balance.
  4. Regenerate all thumbnails (use CLI for large catalogs).
  5. Add server-side content negotiation rules (.htaccess or Nginx config).
  6. Configure your CDN to vary cache by Accept header.
  7. Purge all caches (browser, server, CDN, Smarty, OPcache).
  8. Test delivery using browser DevTools and curl.
  9. Verify third-party modules display images correctly.
  10. Run a Lighthouse audit to confirm no "next-gen formats" warnings remain.

WebP is no longer optional for competitive e-commerce. With PrestaShop's built-in support and straightforward server configuration, there is no reason to continue serving oversized JPEG and PNG files. The setup takes under an hour, and the performance benefits are immediate and measurable.

For more details, read our guides: Image Optimization for PrestaShop: Faster Loading Without Losing Quality and PrestaShop Image Optimization: Alt Tags, Lazy Loading and Page Speed.

Was this answer helpful?

Related questions

Still have questions?

Can't find what you're looking for? Send us your question and we'll get back to you quickly.

Back to top