PrestaShop Image Optimization: Alt Tags, Lazy Loading and Page Speed

Images are the heaviest payload on almost every PrestaShop store I have worked with. Product photography, category banners, promotional graphics — on a typical product listing page, images account for 50-70% of the total page weight. According to HTTP Archive data, median image bytes on mobile pages have increased more than tenfold between 2011 and 2025 (source: NitroPack). That is not a trend — that is an arms race against page speed.

And page speed is not just about user experience anymore. Images are responsible for the Largest Contentful Paint (LCP) element on 85% of desktop pages and 76% of mobile pages (source: MDN). Your product hero image is almost certainly your LCP element, which means your image optimization strategy directly determines whether Google considers your Core Web Vitals "good," "needs improvement," or "poor."

This guide covers everything I have learned optimizing images across dozens of PrestaShop stores: format selection with real file size data, compression quality settings, native lazy loading implementation, the fetchpriority attribute most stores still do not use, Core Web Vitals impact, PrestaShop image regeneration, and actual before-and-after numbers from production stores.

Image Formats: JPEG vs. WebP vs. AVIF — With Real Numbers

Let me cut through the format debate with actual data. I ran the same 800x800 product photo (a leather wallet on white background — typical e-commerce shot) through each format at comparable visual quality:

The numbers speak for themselves. But format selection is not just about compression ratios — it is about knowing which format to use where.

JPEG: The Baseline

JPEG remains the safe default. Universal browser support, predictable rendering, and well-understood compression behavior. For stores that cannot implement format negotiation (serving different formats to different browsers), JPEG at quality 80-85 is perfectly acceptable. Above 85, file size increases dramatically with nearly invisible quality gains — most humans cannot distinguish JPEG 85 from JPEG 100 on a product photo.

WebP: The Practical Winner

WebP delivers 25-35% file size reduction over JPEG at equivalent visual quality. With 97% browser support in 2026 — every modern browser including Safari — there is no longer a meaningful reason to avoid WebP as your primary format. The optimal quality setting for WebP is 75-85, where you get the best balance of compression and visual fidelity.

For PrestaShop stores, WebP is the format I recommend as the standard production format today. The browser support gap is negligible, and the savings are substantial.

AVIF: The Performance Leader

AVIF delivers up to 50% smaller files than JPEG — roughly double the savings of WebP. At low bitrates (highly compressed images), AVIF maintains significantly better quality than both JPEG and WebP, producing fewer compression artifacts. The recommended quality setting is 60-70, which typically looks equivalent to JPEG 85 (source: Two Row Studio).

The catch: browser support sits at approximately 92% in 2026. That means roughly 1 in 12 visitors may not support AVIF. The solution is the <picture> element with format fallbacks:

<picture>
  <source srcset="product-image.avif" type="image/avif">
  <source srcset="product-image.webp" type="image/webp">
  <img src="product-image.jpg" alt="Blue leather wallet - front view with card slots"
       width="800" height="800" loading="lazy">
</picture>

The browser selects the first format it supports. AVIF-capable browsers get the smallest file. WebP-capable browsers get the next best option. Everyone else falls back to JPEG. Zero compatibility issues, maximum compression for each visitor.

PNG: Only for Graphics

PNG uses lossless compression and produces dramatically larger files for photographs. Never use PNG for product photos — it is 3-5x larger than JPEG for no visible quality benefit. PNG is correct for logos, icons, and graphics with text, sharp edges, or transparent backgrounds. For everything else, use WebP or AVIF.

Compression in Practice: Before and After

Here is what image optimization looks like on a real PrestaShop category page displaying 20 products:

Before Optimization

• 20 product images as PNG (original uploads): 11.6 MB total
• Category banner: 1.8 MB (4000x1000 PNG)
• Total image payload: 13.4 MB
• Page load time: 6.2 seconds (4G mobile)
• LCP: 4.8 seconds

After Optimization

• 20 product images as WebP (quality 80, resized to 600x600): 1.4 MB total
• Category banner as WebP (resized to 1920x480): 95 KB
• Total image payload: 1.5 MB
• Page load time: 1.8 seconds (4G mobile)
• LCP: 1.6 seconds

That is an 89% reduction in image payload and a 67% improvement in LCP — from "poor" to "good" on Google's Core Web Vitals scale, from images alone.

The two biggest wins were not exotic: resize to actual display dimensions (nobody needs a 4000px image displayed at 600px), and convert from PNG to WebP. Compression reduces file sizes by 50-80% through lossy optimization (source: NitroPack).

Alt Tags: More Than an SEO Checkbox

Every image on your store needs a descriptive alt attribute. This is not optional — it serves three distinct functions:

1. Accessibility: Screen readers use alt text to describe images for visually impaired users. In many jurisdictions (EU, US, UK), web accessibility is a legal requirement. An e-commerce store with empty alt tags is potentially non-compliant.
2. SEO: Search engines cannot see images. Alt text is how Google understands what an image depicts, which determines whether it appears in Google Image Search results. For product images, image search can drive 10-15% of total organic traffic.
3. Fallback: When an image fails to load (slow connection, CDN outage, broken path), the alt text displays instead, maintaining context for the user.

Writing Alt Tags That Actually Work

I have audited hundreds of PrestaShop stores, and the same alt tag mistakes appear everywhere:

Bad:

alt=""                          — Empty, provides no information
alt="image1"                    — Meaningless filename
alt="product"                   — Too generic
alt="buy cheap blue leather wallet best price free shipping" — Keyword stuffed

Good:

alt="Blue leather bifold wallet, front view showing card slots"
alt="Hand-stitched leather wallet in navy, open to show 6 card pockets"
alt="Wallet packaging — gift box with magnetic closure"

The formula: product name + distinguishing feature + context. Keep it under 125 characters. Describe what the image actually shows — not what you want to rank for.

For a product with 5 images, each alt tag should be unique, describing that specific angle or view. Not five copies of the product name.

Automating Alt Tags in PrestaShop

Manually writing alt tags for 5,000 products with 3-5 images each is not realistic. That is 15,000-25,000 individual alt tags. Use a module like Automatic SEO Images Alt Tags to generate alt tags from product data — product name, category, key attributes — then manually review and improve the highest-traffic products.

Automated alt tags are not perfect, but they are infinitely better than empty alt attributes across your entire catalog.

Lazy Loading: The Biggest Quick Win for Page Speed

Lazy loading defers the downloading of images until they are about to enter the viewport (the visible area of the screen). On a category page displaying 40 products, only the first 4-8 are visible without scrolling — lazy loading means the other 32-36 images do not consume bandwidth until the user scrolls to them.

Native Lazy Loading: The Modern Approach

Since HTML now supports lazy loading natively, the implementation is one attribute:

<img src="product.webp" alt="Blue leather wallet"
     width="600" height="600" loading="lazy">

That is it. No JavaScript library, no configuration, no polyfill. The loading="lazy" attribute is supported by 95% of browsers as of 2026. Browsers that do not support it simply load the image normally — graceful degradation with zero downside.

The Critical Mistake: Lazy Loading Your LCP Image

This is the single most common performance mistake I see, and the MDN Web Docs team specifically calls it out: 16% of pages lazy-load their LCP image, which is one of the most damaging performance patterns on the web (source: MDN).

Your LCP image — typically the product hero image on a product page, or the first visible product image on a category page — must load as fast as possible. Lazy loading it adds an artificial delay: the browser has to first render the page layout, then calculate that the image is in the viewport, then start downloading it. This adds 200-500ms to your LCP time.

The correct approach for your LCP image:

<img src="hero-product.webp" alt="Blue leather wallet - main product image"
     width="800" height="800"
     loading="eager"
     fetchpriority="high">

The loading="eager" attribute (the browser default) ensures immediate loading. The fetchpriority="high" attribute tells the browser to prioritize this image over other resources like stylesheets and scripts. As of 2026, fetchpriority is supported in all modern browsers, yet only 17% of pages use it on their LCP image (source: Two Row Studio). This is a massive missed optimization.

The Rule: Eager Above the Fold, Lazy Below

• Product page hero image: loading="eager" fetchpriority="high"
• Category page first row of products (typically 3-4 images): loading="eager"
• Everything else: loading="lazy"
• Logo and navigation images: loading="eager" (always visible)

Implementing this pattern across a PrestaShop store typically requires modifying the product template and category listing template. A module like Automatic SEO Images Lazy Tags handles this automatically, applying lazy loading to below-the-fold images while keeping critical images eager.

JavaScript-Based Lazy Loading: When You Need More Control

Native lazy loading covers 95% of use cases. The remaining 5% — cases where you need fade-in animations, progressive loading with blurred placeholders, or specific threshold control — require a JavaScript approach. Libraries like lazysizes or lozad.js provide these features while maintaining good performance.

However, JavaScript-based lazy loading adds its own overhead (script download, parse, and execution time). For most PrestaShop stores, native lazy loading is sufficient and preferred.

Preventing Layout Shift (CLS) with Proper Image Dimensions

Cumulative Layout Shift (CLS) measures how much page content moves unexpectedly during loading. Images without explicit width and height attributes are the primary cause of CLS on e-commerce sites — as each image loads, the browser recalculates the layout, pushing content around.

The fix is simple: always include width and height attributes on every <img> tag:

<img src="product.webp" alt="Blue leather wallet"
     width="600" height="600" loading="lazy">

With CSS, you can still make images responsive while preventing layout shift:

img {
  max-width: 100%;
  height: auto;
}

The browser uses the width and height attributes to calculate the aspect ratio before the image loads, reserving the correct space in the layout. Adding width and height attributes eliminates most CLS issues entirely (source: NitroPack).

Responsive Images: Serve the Right Size to Every Device

A 1200px product image displayed at 300px on a mobile phone wastes 75% of the downloaded bytes. Responsive images solve this by providing multiple sizes and letting the browser choose the most appropriate one:

<img srcset="product-300w.webp 300w,
             product-600w.webp 600w,
             product-900w.webp 900w,
             product-1200w.webp 1200w"
     sizes="(max-width: 576px) 300px,
            (max-width: 768px) 600px,
            900px"
     src="product-900w.webp"
     alt="Blue leather wallet"
     width="900" height="900"
     loading="lazy">

The srcset attribute lists available image files with their widths. The sizes attribute tells the browser what display size to expect at different viewport widths. The browser combines this information with the device pixel ratio to select the optimal file.

PrestaShop generates multiple image sizes through its image type configuration (Back Office → Design → Image Settings). Ensure you have image types configured for the sizes your theme actually uses. Common sizes for product images:

• Small thumbnail: 125x125 (cart, mini-cart)
• Medium: 300x300 (category listings on mobile)
• Large: 600x600 (category listings on desktop)
• Extra large: 1200x1200 (product page hero image, zoom)

PrestaShop Image Regeneration

After changing image type dimensions or adding new image types, you need to regenerate all product images. PrestaShop needs to create new thumbnails at the updated sizes.

Via the Back Office

Navigate to Design → Image Settings and click "Regenerate thumbnails" at the bottom of the page. Select which image types to regenerate (products, categories, brands) and whether to delete old unused thumbnails.

For large catalogs, this process can time out in the browser. The back office approach works for stores with under 2,000 products.

Via Command Line (Large Catalogs)

For stores with thousands of products, use the CLI command which does not have browser timeout limitations:

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

Available options:

• --type=products — regenerate product images only
• --type=categories — regenerate category images
• --type=manufacturers — regenerate brand/manufacturer images
• Omit --type to regenerate all image types

For very large catalogs (10,000+ products with multiple images each), this process can take hours. Run it during off-peak hours and monitor server resources — image processing is CPU-intensive.

Converting to WebP

PrestaShop 1.7.8+ and 8.x support WebP image generation natively. Enable it in Design → Image Settings → Image generation options. When enabled, PrestaShop generates WebP versions alongside JPEG/PNG originals during regeneration.

If your PrestaShop version does not support native WebP generation, server-level solutions like mod_pagespeed (Apache) or image CDNs like Cloudflare's Polish feature can convert images on-the-fly. A dedicated image optimization module like Performance Revolution can handle format conversion, compression, and lazy loading in one package.

Stripping EXIF Metadata

Product photos taken with cameras or smartphones contain EXIF metadata — camera model, GPS coordinates, timestamps, color profiles. This data adds 50-200 KB per image and provides zero value to your store visitors. Stripping EXIF data is a free file size reduction that requires no visible quality change.

Most image compression tools strip EXIF data automatically. If you are processing images manually before upload, tools like ImageOptim (Mac), FileOptimizer (Windows), or the command-line exiftool can batch-strip metadata from your entire image library.

Note: PrestaShop does not strip EXIF data on upload by default. Whatever metadata your original images contain will be preserved in all generated thumbnails.

Core Web Vitals: Understanding the Numbers

Google's Core Web Vitals are the performance metrics that directly impact your search rankings. Image optimization affects two of the three metrics:

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible element to render — almost always an image on e-commerce pages. Google's thresholds:

• Good: Under 2.5 seconds
• Needs Improvement: 2.5 to 4.0 seconds
• Poor: Over 4.0 seconds

Optimizing your LCP image — correct format, appropriate size, fetchpriority="high", no lazy loading, preloading if necessary — is the single most impactful thing you can do for your store's Core Web Vitals. Case studies show dramatic results: NDTV improved LCP by 55%, which led to a 50% decrease in bounce rate (source: NitroPack).

Cumulative Layout Shift (CLS)

CLS measures visual stability. Google's thresholds:

• Good: Under 0.1
• Needs Improvement: 0.1 to 0.25
• Poor: Over 0.25

For images, the fix is always the same: include width and height attributes. With those in place, images contribute essentially zero to CLS.

The Business Impact

If the technical metrics feel abstract, consider the business data:

• Walmart: 1-second load time improvement = 2% increase in conversions
• Zitmaxx Wonen: Perfect PageSpeed score + sub-4-second load time = 50.2% increase in mobile conversions
• Google: Pages meeting all Core Web Vitals thresholds see 24% fewer page abandonments

Image optimization is not just an SEO task — it is a conversion rate optimization task that directly impacts revenue.

Measuring Your Progress with PageSpeed Insights

Before and after any optimization work, run your key pages through Google PageSpeed Insights. Focus on:

1. LCP score — Is your hero image loading fast enough?
2. CLS score — Are images causing layout shifts?
3. "Properly size images" audit — Are you serving oversized images?
4. "Serve images in next-gen formats" audit — Are you using WebP/AVIF?
5. "Efficiently encode images" audit — Are compression levels optimal?
6. "Defer offscreen images" audit — Is lazy loading working correctly?

Run both mobile and desktop tests. Mobile is what matters for rankings (Google uses mobile-first indexing), but desktop results are important for user experience on your actual traffic.

Also check your Core Web Vitals report in Google Search Console (Experience → Core Web Vitals). This shows field data from real users — more accurate than lab tests, but with a 28-day rolling average that means improvements take time to reflect in the report.

Image Sitemap Integration

Image optimization does not stop at compression and loading strategy. Getting your images into Google Image Search requires proper discovery. Include your product images in an image sitemap (or use image extensions in your product sitemap). The Advanced SEO Sitemap Builder can generate image sitemaps automatically from your PrestaShop product catalog.

For details on image sitemap syntax and structure, see our complete guide to XML sitemaps.

The Complete Image Optimization Checklist for PrestaShop

Here is the priority-ordered checklist I follow for every PrestaShop store I optimize:

1. Resize source images to maximum display size — No image should be larger than 1200px on its longest side for product images (2x the 600px display size for retina screens).
2. Convert to WebP — Enable WebP generation in PrestaShop image settings and regenerate all thumbnails.
3. Set compression quality to 80 — For both JPEG and WebP. Quality above 85 adds file size with imperceptible visual benefit.
4. Add width and height to all img tags — Prevents CLS. Your theme templates should include these attributes.
5. Implement lazy loading — loading="lazy" on all images except the first visible row and navigation images.
6. Add fetchpriority="high" to LCP image — Your product hero image and category page first product image.
7. Write descriptive alt tags — Automate with a module, then manually improve the top 100 products by traffic.
8. Strip EXIF metadata — Use a compression tool that removes metadata automatically.
9. Implement responsive images (srcset) — Serve appropriate sizes to mobile, tablet, and desktop.
10. Consider AVIF with fallbacks — For stores where maximum compression matters and the <picture> element implementation is feasible.
11. Include images in sitemap — Generate an image sitemap for Google Image Search discovery.
12. Test with PageSpeed Insights — Verify all image-related audits pass on both mobile and desktop.

Conclusion

Image optimization is the rare SEO task that benefits every stakeholder. Users get faster pages and better accessibility. Google gets clean signals for image search and Core Web Vitals assessment. Your server handles less bandwidth. Your conversion rate improves because pages load faster. And your hosting bill may actually decrease.

Start with the biggest wins: resize oversized images, convert to WebP, and implement lazy loading with the correct eager/lazy split. Those three changes alone can cut your page weight by 70% or more. Then layer on the refinements — fetchpriority, responsive images, AVIF with fallbacks, structured alt tags, image sitemaps.

The stores I see performing best on PageSpeed are not doing anything exotic. They are doing the fundamentals correctly and consistently across every page in the catalog. That is the entire secret.