Table des matières
Pourquoi il faut optimiser les images d’un site
Avant de présenter Shortpixel, il faut d’abord bien comprendre à quoi il sert.
Imaginons qu’une page web affiche 10 images.
Si ces images ne sont pas optimisées et qu’elles pèsent chacune 500 ko, alors la page pèsera 5 mo d’images + quelques centaines de ko de html, de CSS et de code JavaScript à charger par le navigateur.
Sur ordinateur connecté avec la fibre, ce chargement prend peu de temps de sorte que la page sera rapidement affichée. Mais sur ordinateur, tablette ou pire, smartphone en wifi, ces 5 mo imposeront un long temps de chargement d’au moins 10 secondes.
Or vous, en tant qu’internautes, que faites-vous quand une page met 10 secondes à charger ? On connait la réponse : statistiquement, presque tout le monde quitte la page et en cherche une autre, plus rapide.
Autant dire que l’optimisation des images revêt une importance stratégique puisqu’elle impacte fortement votre trafic notamment sur mobile. Quand Google mesure les performances de vos pages avec son outil Google PagesSpeed pour générer ses métriques Core Web Vitals, et s’aperçoit qu’elles sont lentes, il agit de manière préventive, en s’abstenant tout simplement de les présenter dans ses résultats de recherche.
Les conséquences d’une mauvaise optimisation des performances sont donc catastrophiques. Mes tests sur l’impact de l’optimisation sur le référencement montrent que vous perdez une grande partie de votre trafic potentiel. Si vos revenus en dépendent, vous courez droit à la faillite.
En moyenne, l’optimisation des images représente le plus gros gain de vitesse de chargement qu’on puisse réaliser rapidement à l’échelle de tout un site. Le second plus gros gain serait l’optimisation de la taille des fichiers HTML, CSS et JS par compression gz et par minification et concaténation.
Bref, en résumé : l’optimisation des images compte beaucoup, donc prenez ce problème en main !
Les solutions d’optimisation des images
Optimiser les images signifie diminuer fortement leur taille tout en gardant une qualité visuelle acceptable.
Par exemple, une image qui pesait 500ko sera réduite de 95%, et pèsera finalement 25ko : excellente optimisation.
Pour optimiser les images, de nombreuses solutions sont possibles :
- on peut tout optimiser à la main, grâce à des services gratuits comme tinyjpg / tinypng et autres. Le problème : pour des dizaines ou des centaines d’images, c’est très chronophage vu qu’il faut sauvegarder ses images sur son ordi, les envoyer à l’optimiseur, sauvegarder les images optimisées, puis les mettre en ligne sur votre site WordPress.
- on peut tout optimiser automatiquement en téléchargeant des images non-optimisées sur votre site WordPress, puis en laissant tourner un plugin d’optimisation ; parmi ces plugins on compte Shortpixel, mais aussi Optimus, Smushit etc.
Tutoriel Shortpixel
Perso, je gère une quinzaine de sites sur diverses thématiques et la solution que j’utilise, c’est Shortpixel.
Je l’ai choisi après avoir comparé les offres et les qualités d’optimisation de plusieurs extensions concurrentes. D’après mes tests sur divers types d’images, c’est Shortpixel qui génère les images les plus légères, tout en proposant des options efficaces, le tout à un tarif abordable.
Je vais maintenant vous expliquer comment ça marche.
Trois plugins d’optimisation en version gratuite ou pro
Vous devez d’abord comprendre que ShortPixel propose non pas 1, mais 3 plugins WordPress d’optimisation différents. Ce sont 3 approches différentes de l’optimisation, que je vais détailler juste après.
L’optimisation traite les images de ces formats : .jpg, .jpeg, .png, .gif, .pdf ; elle peut aussi créer des versions .webp ou .avif des images.
Egalement, ces services existent en 2 versions :
- gratuite, avec une limite maximum par mois, comptée en nombre d’images optimisées ou en volume de données traitées
- payante, au-delà de ces limites
Donc, si vous vous contentez de la version gratuite du service ShortPixel Image Optimizer par exemple, vous avez droit à 100 « crédits » mensuels. Donc si vous décidez de lui faire optimiser 10 tailles d’images différents pour chaque image, ça ne vous fera que 10 images optimisées par mois. Au-delà, le plugin n’optimisera rien.
Ainsi, si vous avez un site riche en images, vous devriez investir dans une version payante, en cherchant quel abonnement correspond le mieux à vos besoins immédiats et mensuels.
Je vais maintenant vous présenter chaque offre de service de ShortPixel.
ShortPixel Image Optimizer
Le service ShortPixel Image Optimizer fonctionne ainsi :
- vous téléchargez des images dans la médiathèque de votre site WordPress
- ShortPixel les copie vers ses services « cloud », les optimise, puis télécharge ces versions optimisées sur votre site (sans effacer les originaux)
- ShortPixel s’occupe aussi de remplacer les urls vers ces images dans vos pages et articles, automatiquement
ShortPixel Adaptive Images for WordPress
Le service ShortPixel Adaptive Images fait la même opération d’optimisation que le service Image Optimizer, en ajoutant les fonctionnalités suivantes :
- il sert vos images depuis le CDN (content delivery network) de ShortPixel, aux formats WebP et / ou AVIF, ce qui accélère d’autant plus le chargement vos pages puisque votre serveur n’a plus à envoyer les images à vos visiteurs
- de plus, ShortPixel va redimensionner vos images en fonction des besoins – sur mobile notamment, il servira des images plus petites, adaptées à la taille de l’écran, ce qui causera encore un gain de performance
- ShortPixel assure aussi le « lazy load« , le chargement différé de vos images : il ne charge les images progressivement que quand l’internaute scrolle dans la page. Cela évite d’avoir à charger trop de données dès le premier affichage de la page
ShortPixel Website Optimizer
Le service ShortPixel Website Optimizer propose le même service qu’Image Optimizer, mais pour d’autres CMS basés sur PHP que WordPress, par exemple sur Prestahop, Magento, Joomla, Drupal, etc.
Installer et configurer Shortpixel
Installation et activation
Quel que soit le service et l’offre que vous choisissez, l’installation se déroule à peu près de la même manière :
- dans l’admin de votre site WordPress, vous allez sur la page des Extensions
- là, vous cliquez sur le bouton Ajouter une extension
- vous faites une recherche en tapant le nom du service que vous voulez installer
- vous cliquez sur Installer puis, quand il a fini de copier, sur Activer
- ensuite vous allez sur la page de configuration dans Réglages / Shortpixel
- et vous configurez.
Si vous choisissez une version payante, alors vous devez aussi :
- acheter votre abonnement
- puis une fois votre compte créé, aller chercher votre clé d’API, et la recopier dans les réglages de Shortpixel, et valider
Configuration
Sur la page des réglages de Shortpixel, vous avez d’abord les options générales :
- Type de compression. Vous avez le choix entre « avec perte (lossy) », « brillant (glossy) » et « sans perte (lossless) ». Le réglage optimal est « avec perte ».
- Compression des vignettes. Je vous recommande de la cocher, car WordPress génère des vignettes pour adapter l’images à ses différents scénarios d’utilisation. Vous voulez que tous ces formats soient optimisés.
- SmartCrop. Il s’agit du recadrage « intelligent » des images.
- Sauvegarde. Pour conserver vos originaux ; je recommande de cocher cette option.
- Supprimer Exif. Cela consiste à supprimer ces données qui pourraient contenir des données personnelles. A vous de voir si c’est pertinent. Si vous utilisez des images venues du web, elles n’ont pas d’Exif en général donc peu importe. Le problème se pose uniquement si ce sont vos propres images faites avec un appareil photo.
- Redimensionner de grandes images. Vous pouvez demander à ShortPixel de redimensionner toute image dépassant une certaine largeur ou une certaine hauteur.
Ensuite, dans l’onglet Avancé, vous pouvez choisir d’utiliser ou pas les versions WebP et Avif de vos images (recommandé car ces formats modernes sont très légers).
Les autres options avancées semblent évidentes et faciles à comprendre.
Concernant les tailles de miniature, il est conseillé d’utiliser toutes les tailles que votre site utilise réellement, en laissant tomber les autres.
Ensuite, l’onglet API CloudFlare permet de faire fonctionner ensemble Shortpixel et CloudFlare. Je l’utilise sur certains sites, tandis que sur d’autres j’utilise le cache de LiteSpeed avec lequel Shortpixel s’avère également compatible.
Enfin, dans l’onglet Outils / Tools, vous avez diverses options pour faire des opérations de maintenance du traitement de vos images par ShortPixel. A utiliser avec précaution.
Utilisation
Quand tout est correctement configuré, vous pouvez lancer l’optimisation des images existantes – celle des images que vous téléchargerez à l’avenir se fera automatiquement.
Pour optimiser les images existantes, allez dans Médias / ShortPixel En Bloc, et cliquez sur le bouton Start optimizing :
ShortPixel va alors effectuer le traitement configuré sur toutes les images de votre médiathèque. Cela pourrait prendre un certain temps si vous en avez des centaines et si elles sont lourdes.
A noter que l’apti ne devrait pas avoir trop de conséquences sur le référencement de vos images, malgré le changement de version.
Test perso et avis sur Shortpixel
Comme je l’ai dit, j’utilise ShortPixel sur une quinzaine de mes propres sites web actuellement en ligne, j’utilise le service Image Optimizer auquel je suis abonné depuis plus de 2 ans ; j’ai droit à 14 000 crédits par mois, ce qui est amplement suffisant en moyenne.
Pour calculer vos crédits, n’oubliez pas de prendre en compte le fait qu’une même image peut être générée dans des dizaines de tailles et plusieurs formats différents et que chacune coûte 1 crédit.
Donc par exemple, 1 image avec 10 tailles en 2 formats WebP et AVIF, ça coûtera 20 crédits.
J’en suis très satisfait, ça optimise beaucoup, ça fonctionne bien et c’est compatible avec d’autres services qu’utilisent mes sites, comme
- CloudFlare
- LiteSpeed
- Autoptimize
- etc
Je ne note aucune incompatibilité avec les plugins que j’utilise ; et ShortPixel n’est jamais tombé en panne ni n’a connu de souci majeur de mise à jour.
Parfois, suivant les réglages qu’on fait et en fonction de l’hébergeur, il faut faire un peu de configuration sur le serveur ou dans le fichier wp-config.php ; rien de trop technique cependant, et on trouve facilement de la bonne documentation, soit directement sur le site de ShortPixel, soit ailleurs sur le web.
Bref, d’après moi ShortPixel est un service d’optimisation de bonne qualité et à des tarifs abordables, auquel je fais confiance. Et donc, je vous le recommande !
