Comment Optimiser les Images sur Prestashop

Expert Prestashop ⇝ Conseils et accompagnement technique ⇜

Comment Optimiser les Images sur Prestashop

solutions pour optimiser les images sur Prestashop

J’ai dĂ©jĂ  eu l’occasion de parler Optimisation sur ce blog ou sur mon blog personnel, ce soir, je voudrais faire le point sur les moyens d’optimiser les images sur sa boutique Prestashop.

Qu’y a-t-il de plus Ă©nervant qu’une page qui met trop de temps Ă  charger ? En effet des Ă©tudes menĂ©es par Google ont montrĂ© que 57 % des utilisateurs mobiles n’attendent pas plus de trois secondes pour qu’une page s’affiche.

A l’heure oĂč le Smartphone reprĂ©sente 51,3 % des utilisateurs d’internet, il ne fait pas bon d’attendre. En clair, une vitesse de chargement trop lente peut vous faire perdre beaucoup. Les formats classiques d’images sont : JPG, PNG et GIF et reprĂ©sente 96% de tout le trafic image sur internet. Leur rĂ©partition est la suivante : 45% de JPG, 23% GIF et 28% de PNG… le reste c’est pour les formats comme : WebP, SVG…

(les sources de ces statistiques sont présentes ici :  http://httparchive.org/interesting.php#imageformats)

A tout cela, on ajoute qu’un des critĂšres de rĂ©fĂ©rencement de Google est votre temps de chargement, plus celui-ci sera court mieux vous serez notĂ©.

Améliorer le temps de chargement de votre site est indispensable pour votre audience et votre popularité. Mais comment améliorer celui-ci ?

L’optimisation des images :

 

TrĂšs souvent lors des analyses de chargement de page (GtMetrix, Google PageSpeed…), il apparaĂźt que les images du site internet testĂ© peuvent ĂȘtre optimisĂ©es. Les images peuvent trĂšs vite ĂȘtre la ressource la plus lourde dans le chargement des pages. Pour l’optimisation des images, il y a deux points Ă  prendre en compte :

La meilleur compression de l’image rapport qualitĂ©/poids et le moyen de dĂ©livrer l’image Ă  l’utilisateur.

 

Photoshop (ou autre logiciel de retouche) :

GĂ©nĂ©ralement, avant d’importer une image sur notre boutique e-commerce, on passe par un Ă©diteur d’image. L’idĂ©e est d’adapter dans un premier temps la taille de l’image – Il est inutile de charger une image de 2000 pixels pour ne l’afficher que sur 400 pixels sur le site internet.

Ensuite, via le menu « Importer pour le Web » dans Photoshop, il est aussi possible de jouer sur la qualitĂ© de l’image (de 0 Ă  100), plus le ratio est bas, plus la qualitĂ© va ĂȘtre dĂ©gradĂ©e mais le poids va ĂȘtre faible. 80 est la valeur par dĂ©faut, a vous de faire vos propres essais et de trouver le bon compromis entre poids et qualitĂ© de l’image.

Mais disons que si l’image est Ă  la bonne taille, c’est dĂ©jĂ  un bon dĂ©but.

 

Les modules :

Il existe des modules Prestashop pour optimiser les images déjà présentes sur la boutique. Ils peuvent utilisés des API tiers pour compresser les images ou certains utilisent des fonctions PHP sur le serveur pour améliorer les images.

Payant :

Un tas de plugin payant existent (liés à des services comme faster.io)

  • Faster Image (35€ + abonnement) : plugin ici
  • PrestaSpeed (50€ + autres fonctionnalitĂ©s) : ici

Gratuit :

Il n’existe pas Ă©normĂ©ment de plugin pour compresser vos images gratuitement.

 

Le Lazy-Loading :

Je viens de tester pour un client, la solution du « Lazy Loading ». Ce principe permet de ne charger les images qu’au moment ou elles ont besoins d’ĂȘtre affichĂ©es.

La solution consiste à ajouter le script « JavaScript » :

https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js

et d’utiliser les attributs data-original pour toutes les images des catĂ©gories par exemple.

Si vous souhaitez implémenter cette solution sur votre boutique contactez un expert Prestashop

Pour info, cette solution Ă  permis de passer d’un score de 35/100 Ă  73/100 sur PageSpeed. Le sur-poids des images avant l’utilisation du « Lazy-Loading » Ă©tait de 2.Mo.

Les sites internet et applications :

Quelques sites internet et applications pour permettre de compresser vos images manuellement :

 

Le WebP format :

J’avais dĂ©jĂ  Ă©crit un article sur mon blog personnel Ă  son sujet (voir ici : WebP l’avenir de la compression des images), c’est toujours d’actualitĂ© (on peut le voir avec Alibaba qui utilise ce format moderne). Si votre audience utilise en majoritĂ© Google Chrome, il peut ĂȘtre intĂ©ressant de se pencher sur ce genre de format.

Le WebP est un format sans perte, permet un gain entre 25-35% par rapport à une image JPG classique et 26% pour un PNG.

Plus d’informations Ă  son sujet sur le site de Google : https://developers.google.com/speed/webp/

Convert (Logiciel en ligne de commande) :

L’application « convert » est Ă  utiliser en ligne de commande. Il est recommandĂ© par Google pour optimiser ses images au mieux.

Vous pouvez le télécharger ici : https://www.imagemagick.org/script/convert.php

Pour l’utiliser, voici la commande :

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 90 -interlace JPEG puzzle_converted.jpg

Il est possible de jouter sur le paramĂštre -quality : 90 ( 0 : QualitĂ© mauvaise / Poids rĂ©duit – 100 : bonne qualitĂ© / Poids augmentĂ©)

 

La checklist pour l’optimisation des images :

Voici un rappel sur les points important Ă  penser pour le choix du format de l’image ou la maniĂšre de les optimiser.

  • Utiliser un format vectoriel : Les formats vectoriels sont parfaits pour s’adapter Ă  toutes les rĂ©solutions (trĂšs haute dĂ©finition) et tous les devices.
  • Minifier et compresser les SVG : Certaines informations du format SVG (Ă©crites en XML) peuvent ĂȘtre supprimĂ©es car inutiles. VĂ©rifiez que la compression Gzip est bien activĂ©e sur votre serveur
  • Faire diffĂ©rents essais dans les paramĂštres de compression : Essayez diffĂ©rentes configurations pour optimiser vos images pour obtenir de bons rĂ©sultats.
  • Supprimer les donnĂ©es inutiles : Supprimez les donnĂ©es EXIF inutiles, trĂšs souvent les photos contiennent des informations comme l’heure, la date, la position gĂ©ographique, l’appareil utilisĂ©… Elles prennent de la place pour rien autant les supprimer.
  • DĂ©livrer les images Ă  la bonne taille : Retailler les images Ă  la bonne taille. Il faut que la taille soit la plus proche de celle qui est affichĂ©e.
  • Automatiser le processus: Essayez d’automatiser au maximum le processus d’optimisation de vos images, gain de temps et d’argent 😉

Fait appel Ă  mes prestations Prestashop

 

 

Audit de quelques sites internet :

 

Je vais faire un audit rapide sur les images de 3 sites choisis au hasard sur le showcase de Prestashop (https://www.prestashop.com/fr/showcase – d’ailleurs pour les SEO et autres, il est possible de proposer votre boutique et gagner un backlink dofollow)

 

CarrĂ© d’artistes :

 

Le site se charge entre 3 et 5 secondes, au premier chargement sans scroller, il charge 85 images (dont une vingtaine de tracking) pour un poids avoisinant les 550 Ko. Une fois que l’on scrolle jusqu’en bas de la page, ce ne sont pas moins d’une trentaine d’images qui sont chargĂ©es pour atteindre les 3.3 Mo.  Le principe de « lazy loading » est trĂšs bien utilisĂ© ici, car il permet de ne charger les images que si l’utilisateur arrive dans la zone de l’image

Les bonnes pratiques utilisĂ©es par carrĂ© d’artiste:

  • Utilisation d’un CDN cloudflare
  • Images dĂ©livrĂ©es via le protocole HTTP/2
  • Images de taille adaptĂ©e au thĂšme

 

 

Le slip Français :

Pour le chargement du Slip Français, c’est quasi similaire Ă  carrĂ© d’artistes (Nous sommes en moyenne Ă  5 secondes de chargement – sans scroll) pour 88 images chargĂ©es et un poids total de 1 Mo (le double du site prĂ©cĂ©dent)

Une fois scroller jusqu’en bas de la page, seulement 20 images sont de nouveaux chargĂ©es et 1 Mo d’images supplĂ©mentaire.

Les détails :

  • Pas de HTTP/2,
  • Pas de CDN,
  • Les images les plus lourdes (900 Ko pour 2 images) peuvent ĂȘtre optimisĂ©es pour diviser leur poids par 2.

K-Way :

Le site K-Way, lui charge en plus de 5 secondes pour seulement 14 images pour toute la page. Pas de « Lazy loading » ici mais la page d’accueil ne contient pas Ă©normĂ©ment d’image.

K Way Network

Ici, pas de CDN, ni de HTTP/2. Une des images de 350ko mets 1 seconde à se charger de mon cÎté.

 

Alibaba et Amazon : Deux poids lourds du E-commerce

 

Essayons voir ce que vallent 2 trĂšs gros sites dans l’univers du e-commerce.

La page d’accueil du site www.alibaba.com, charge 49 images pour un poids total de 1.2 MB sur les 1.9 MB que fait la page total (HTML / Javascript / CSS…).

Alors que le temps total de chargement est de 3.3 secondes (environ) ce qui est vraiment bien.

Les solutions utilisées par Alibaba pour optimiser ses images.

  • Images compressĂ©s au maximum sans trop perdre de qualitĂ©
    exemple de l’image la plus lourde sur la page d’accueil (env. 360 Ko)

    Exemple d’image d’Alibaba optimisĂ©e

Google PageSpeed considĂšre que l’image peut encore gagner du poids mais il ne faut pas trop pousser l’optimisation au risque de dĂ©grader l’image.

  • Images dĂ©livrĂ©es via un CDN
  • Protocole HTTP/2
  • Format WebP pour les utilisateurs de Google Chrome (pour Alibaba),

 

Conclusions :

 

Avec tous ces Ă©lĂ©ments, on voit qu’il est important d’optimiser ses images mais aussi la façon dont elles sont dĂ©livrĂ©es aux visiteurs. Le protocole HTTP/2, l’utilisation d’un CDN, la compression Gzip sont autant de solutions sur lesquelles il faut se pencher.

Comment Optimiser les Images sur Prestashop
4.8 (96%) 5 votes

Vincent est Expert Prestashop depuis plus de 6 ans. Il est maintenant Freelance dĂ©veloppeur spĂ©cialisĂ© Prestashop. AprĂšs avoir travaillĂ© 3 ans en agence WEB, il est parti dĂ©velopper des modules Prestashop et autres solutions techniques Ă  Brisbane (Australie). Avant de revenir en France et crĂ©er sa sociĂ©tĂ© auto-entrepreneur depuis 2015. SpĂ©cialiste de la solution open-source Prestashop, il mets Ă  disposition sa plume et ses connaissances techniques pour notre plus grand plaisir 😉

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *