Images adaptatives dans PrestaShop : srcset, lazy loading et performances

Pourquoi les images adaptatives sont indispensables sur PrestaShop

Sur une boutique e-commerce, les images représentent souvent 60 à 80 % du poids total d'une page. Charger une image de 800×800 pixels sur un smartphone avec un viewport de 375 pixels est un gaspillage pur de bande passante — et un facteur direct de dégradation du Largest Contentful Paint (LCP), l'un des trois Core Web Vitals de Google.

Les images adaptatives (responsive images) permettent au navigateur de sélectionner automatiquement le format le plus approprié selon la taille de l'écran, la densité de pixels et la connexion réseau. PrestaShop génère déjà plusieurs déclinaisons d'images (cart_default, small_default, home_default, large_default…), mais le thème par défaut ne les exploite pas toujours de manière optimale.

L'attribut srcset : le fondement des images responsive

Principe de fonctionnement

L'attribut srcset permet de déclarer plusieurs sources d'image avec leurs dimensions ou leur densité de pixels. Le navigateur choisit ensuite la meilleure option.

Deux syntaxes existent :

• **Par densité de pixels** (`1x`, `2x`, `3x`) — utile quand l'image a une taille CSS fixe
• **Par largeur réelle** (`300w`, `600w`, `1200w`) — plus flexible, à combiner avec l'attribut `sizes`

Implémentation dans les templates Smarty de PrestaShop

Voici une implémentation complète dans un template de listing produit (page catégorie) :

<img
  src="{Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'cart_default')}"
  srcset="
    {Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'small_default')} 98w,
    {Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'cart_default')} 125w,
    {Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'home_default')} 250w,
    {Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'medium_default')} 452w,
    {Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'large_default')} 800w
  "
  sizes="(max-width: 576px) 50vw, (max-width: 992px) 33vw, 250px"
  alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
  width="250"
  height="250"
  loading="lazy"
/>

Points clés de ce code :

• `src` contient un fallback léger (`cart_default`) pour les navigateurs anciens
• `srcset` déclare toutes les déclinaisons générées par PrestaShop avec leur largeur réelle en pixels
• `sizes` indique au navigateur quelle taille l'image occupera réellement selon le viewport
• `width` et `height` sont déclarés pour éviter le **Cumulative Layout Shift (CLS)**

Syntaxe par densité de pixels (cas simple)

Si vos images ont toujours la même taille CSS, la syntaxe par densité est plus lisible :

<img
  src="{Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'home_default')}"
  srcset="{Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'home_default')} 1x,
          {Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'large_default')} 2x"
  alt="{$product.name}"
  width="302"
  height="302"
/>

Cette approche est idéale pour les écrans Retina (2x) et permet de servir une image plus nette sans impacter les écrans standard.

Lazy loading : ne charger que ce qui est visible

Le lazy loading natif du navigateur

Depuis 2020, tous les navigateurs modernes supportent l'attribut loading="lazy" :

<img src="mon-image.jpg" loading="lazy" alt="Description" />

C'est la méthode la plus simple et elle ne nécessite aucune librairie JavaScript. Attention cependant : ne mettez jamais loading="lazy" sur les images au-dessus de la ligne de flottaison (hero, logo, première image produit visible), car cela retarderait le LCP.

LazySizes : une solution plus complète

Pour un contrôle plus fin, la librairie LazySizes offre des fonctionnalités supplémentaires :

• Support du `srcset` en mode lazy (via `data-srcset`)
• Chargement progressif avec placeholder basse résolution
• Support des iframes et des vidéos
• Plugins pour le blur-up, le LQIP et le responsive images avancé

#### Installation dans PrestaShop

1. Téléchargez LazySizes depuis le dépôt GitHub officiel
2. Placez le fichier `lazysizes.min.js` dans le dossier `assets/js/` de votre thème
3. Incluez-le dans votre `theme.yml` ou directement dans le `` :

# themes/votre-theme/config/theme.yml
assets:
  js:
    all:
      - id: lazysizes
        uri: assets/js/lazysizes.min.js
        priority: 100

#### Utilisation dans les templates

<img
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3C/svg%3E"
  data-src="{Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'home_default')}"
  data-srcset="
    {Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'small_default')} 98w,
    {Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'home_default')} 250w,
    {Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'large_default')} 800w
  "
  data-sizes="auto"
  class="lazyload"
  alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
  width="250"
  height="250"
/>

Ce qui change par rapport au srcset natif :

• `src` contient un SVG transparent inline (placeholder sans requête HTTP)
• Les vrais attributs sont préfixés par `data-` (`data-src`, `data-srcset`)
• `data-sizes="auto"` laisse LazySizes calculer automatiquement la taille
• La classe `lazyload` active le comportement de chargement différé

Configuration des formats d'image dans PrestaShop 8.x

Avant d'implémenter le responsive, assurez-vous que vos formats d'image sont correctement configurés.

Vérifier les types d'images existants

Dans le back-office : Design > Images (ou Apparence > Images selon la version).

Les formats par défaut de PrestaShop :

NomLargeurHauteurUtilisé pour cart_default125125Panier small_default9898Miniatures home_default250250Listing catégorie medium_default452452Fiche produit secondaire large_default800800Fiche produit principale

Régénérer les miniatures

Après toute modification des dimensions, régénérez via le back-office ou en CLI :

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

Sur PrestaShop 8.x, cette commande Symfony remplace l'ancien script images.php.

Format WebP : le gain de performance majeur

PrestaShop 8.x supporte nativement la génération d'images WebP, un format qui offre une réduction de 25 à 35 % par rapport au JPEG à qualité visuelle équivalente.

Activation dans le back-office : Design > Images > Générer les images au format WebP.

Pour exploiter le WebP avec un fallback, utilisez la balise :

<picture>
  <source
    type="image/webp"
    srcset="{Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'home_default', 'webp')} 1x,
            {Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'large_default', 'webp')} 2x"
  />
  <img
    src="{Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'home_default')}"
    srcset="{Link::getImageLink($product.link_rewrite, $img_cover.id_image, 'large_default')} 2x"
    alt="{$product.name}"
    width="250"
    height="250"
    loading="lazy"
  />
</picture>

Checklist d'optimisation complète

Pour tirer le maximum de vos images PrestaShop :

1. **Déclarez `width` et `height`** sur chaque balise `` pour éviter le CLS
2. **Utilisez `srcset` + `sizes`** sur toutes les images de listing et de fiche produit
3. **Activez `loading="lazy"`** sur toutes les images sous la ligne de flottaison
4. **Ne lazy-loadez jamais** l'image hero ou la première image visible (impact LCP)
5. **Activez le WebP** dans le back-office PrestaShop 8.x
6. **Compressez vos originaux** avant upload (TinyPNG, Squoosh, ou un module dédié)
7. **Ajoutez un CDN** si votre catalogue dépasse 500 produits
8. **Testez avec Lighthouse** et visez un score Performance > 90

Erreurs fréquentes à éviter

• **Oublier l'attribut `alt`** : impact SEO et accessibilité. Utilisez le nom du produit et la marque, jamais un texte générique
• **Mettre le même `src` et `data-src`** : provoque un double chargement avec LazySizes
• **Utiliser `srcset` sans `sizes`** en mode largeur (`w`) : le navigateur suppose `sizes="100vw"` et charge toujours l'image la plus grande
• **Lazy-loader les images above-the-fold** : dégrade le LCP au lieu de l'améliorer