Compresser ses images WordPress avec ShortPixel

Lorsque l’on parle de performance web et de temps de chargement, dans bien des cas, la faute revient à des images trop lourdes.

Les images sont souvent les fichiers les plus volumineux d’un site. Mal optimisées, elles peuvent saboter vos temps de chargement, nuire à l’expérience utilisateur sur mobile et plomber vos scores dans les Core Web Vitals – ces fameux critères que Google adore surveiller de près.

Vous aviez peut-être découvert la compression d’images avec Smush dans un autre article, aujourd’hui, je vous présente ShortPixel, un plugin WordPress efficace en la matière, qui automatise la compression de vos images sans compromis sur la qualité.

👉 Prêt à alléger votre site sans prise de tête ? Suivez le guide.

Installation et inscription à ShortPixel

Pour commencer, comme pour chaque plugin WordPress, il nous faut d’abord procéder à son installation.

Depuis votre administration, allez à Extensions > Ajouter une extension, puis rechercher « shortpixel » dans le champ de recherche.

Cliquez ensuite sur le bouton « Installer maintenant », puis « Activer ».

Rendez-vous ensuite dans Réglages > ShortPixel.

Une fois dans l’extension, vous pouvez créer votre compte (Create account) en y renseignant votre adresse de messagerie (et en acceptant leurs conditions d’utilisations).

Si vous avez déjà un compte, vous pouvez directement renseigner votre clé API à droite (Login) ; vous pouvez créer une clé API dans votre compte sur le site shortpixel.com.

Configurer l’extension ShortPixel

Une fois votre clé API validée, vous vous retrouverez sur le tableau de bord (Overview) de l’extension avec les informations générale.

Vous y avez la possibilité de fixer quelques réglages recommandé par l’outil (Fix now), mais nous allons voir tout ça dans l’ordre.

Optimisation d’image

Dans l’onglet Image Optimization nous retrouvons les réglages principaux de l’extension.

Voici ce que je configure pour mes sites, généralement, et ce que je vous recommanderais (avant d’aller un peu plus dans le détail ensuite) :

Mes Options recommandées dans ShortPixel

Pour la plupart des sites que je gère, je vous recommanderais les réglages suivants :

• Type de compression : Avec perte (par défaut) ;
• ✅ Optimize Thumbnails : compresse les miniatures des images générées par WordPress ;
• ✅ Optimiser les PDF ;
• ✅ Optimiser les images Retina ;
• ✅ Conversion CMJN en RVB (pour les images provenant de logiciels d’impression) ;
• ✅ Supprimer EXIF (sauf pour les photographes ou ceux pour qui ces données sont importantes) : supprime les données cachées (date, lieu, appareil photo utilisé, etc.) ;
• ✅ Enable SmartCrop (recadrage intelligent avec IA) ;
• ✅ Redimensionner de grandes images (je mets personnellement une largeur et une hauteur à 2048 ou 1920 pixels avec Contenir) : permet de limiter la taille des images importées (TRÈS UTILE).

N’oubliez pas d’enregistrer (Save).

Choix du type de compression

Trois modes de compression sont proposés :

• ✅ Avec perte (Lossy), recommandé par l’outil et moi-même : excellent compromis entre poids réduit et bonne qualité visuelle.
• Brillant (Glossy) : meilleure qualité visuelle, mais fichiers un peu plus lourds. Utile pour les portfolios ou sites de photographes, où l’image à le rôle principal.
• Sans perte (Lossless) : compression sans perte de qualité, mais réduction de poids minime. Très peu utile sauf dans des cas très spécifiques (dessins techniques…).

Conversions

A priori inutile de convertir vos PNG en JPEG. Vous devriez déjà avoir le bon format (JPEG pour les photographies, images complexes) et le PNG pour les images simples et avec transparence (captures d’écrans, logos…).

À moins que vous aillez beaucoup de photos en PNG que vous voulez convertir (elles seront bien plus légères après dans ce cas). Désactivez l’option ensuite.

Redimensionnement – SmartCrop & Resize

Activez surtout « Redimensionner de grandes images » ce qui éliminera toutes les images énormes qui ne servent à rien dans WordPress.

Moi je mets 2048 en largeur comme en hauteur et largeur afin de ne jamais avoir d’images plus grande que ça.

WebP/AVIF & CDN

Concernant les nouveaux formats d’images, je laisse tout désactivé.

Si vous voulez profiter des nouveaux formats d’images, comme le WebP ou AVIF), vous pouvez l’activer et je vous conseille alors à servir ces fichiers avec la seconde méthode, en local (pour ne pas créer d’éventuels problèmes sur le site) : Serve WebP/AVIF images from locally hosted files (without using a CDN)

Je ne pense pas qu’il soit nécessaire d’activer les 2, et le WebP me semble plus répandu. Le format AVIF est encore plus léger, mais vous ne devriez pas être à ça près.

---

Mode avancé de ShortPixel

Et dans votre menu de gauche ShortPixel, vous pouvez afficher d’autres onglets en cochant le mode avancé (Advanced Mode).

Exclusion

Exclure les tailles de miniatures

Puisque ShortPixel se distingue par son système de crédits, vous pouvez optimiser les crédits utilisés en excluant certains fichier de l’optimisation, car chaque fichier optimisé décomptera un crédit.

Par exemple, vous pourriez décider de retirer les miniatures (Thumbnail), car même sans être optimisées elles ne pèseront pas lourd, puis les images en 1536×1536 que vous n’utilisez pas, par exemple :

Exclure des modèles

Et vous pouvez utiliser des « modèles » pour cibler des fichiers selon des conditions précises (images comprises dans certaines tailles, ou avec des URL spécifiques / Path).

Honnêtement ça devient assez compliqué après, et moi je ne m’en occupe pas.

Traitement / Processing

Ici vous pouvez désactiver la sauvegarde des fichiers originaux (conserver ces fichiers quelque part) et ne pas toucher au reste.

• ✅ Optimiser les médias lors du téléchargement (évidemment) ;
• ❌ Background mode ;
• ❌ Backup Originals : pour ne pas importer des fichiers énormes sur votre serveur à plusieurs Go, si jamais vous importer directement depuis un appareil photo (mais conserver une copie ailleurs) ;
• ❌ Custom Media folders : si vous avez des dossiers spécifiques sur le serveur contenant des images (ne vous embêtez pas avec ça). Vous aurez un sous-onglet Médias > Custom Media pour gérer ça si vous l’activez.

Intégrations

Ne faites rien ici.

Cette partie concerne uniquement les sites qui ne seraient pas accessible publiquement, nécessitant des identifiants de connexion. C’est ici que vous renseignerez ces accès pour que ShortPixel puisse s’y connecter.

Elle permet aussi de rentrer vos informations relatives à votre système Cloudflare, si vous en utilisez un, de manière à ce que ShortPixel puisse travailler avec correctement.
Je vous déconseille d’utiliser Cloudflare, qui vous posera plus de problèmes qu’autre chose. Pas besoin de vous prendre la tête avec ça, vraiment.

ShortPixel Bulk – Optimisation en masse

Vous avez installé ShortPixel, mais pour les images qui étaient déjà là ?

C’est ce que vous permet ShortPixel Bulk, l’optimisation en masse ou en vrac (ou « En Bloc » si on en croit leur traduction 😳).

Vous pouvez vous rendre dans Médias > ShortPixel En Bloc pour lancer une optimisation de toutes vos images de la médiathèques qui n’auraient pas encore été optimisées.

Choisissez d’abord votre configuration. Par défaut les images et leurs miniatures présentes dans votre médiathèques.

Vous pourrez y ajouter la génération des version WebP ou AVIF.

Il vous indique le nombre total de fichiers pouvant être optimisé.

Passez à l’étape suivant pour voir le nombre de crédits qui vous sera décompter (ici 235 sur 99 disponibles), si vous êtes en version gratuite ou que vous avez pris un pack de crédits.

Avec un abonnement ShortPixel vous n’êtes limité en nombre de crédits.

Une fois lancé, le traitement s’exécute.

Laissez la fenêtre ouverte afin de ne pas couper le traitement en cours.

S’il se met en pause vous pouvez le remettre en route en cliquant sur le message de pause :

Ayant utilisé tous mes crédits avec ma version gratuite le traitement en masse s’est arrêté :

Vous pourrez dan ce cas continuer au moment du renouvellement de vos crédits (100/mois en gratuit).

Dans la médiathèque

ShortPixel ajoute ses données dans votre médiathèques pour chaque image individuellement.

Pour une visualisation plus rapide et plus simple je vous conseille d’activer le mode liste :

Ainsi vous verrez la colonne ShortPixel Compression pour chaque image :

Le petit menu vous permet de voir le résultat (compare les 2 image), de relancer une optimisation avec ou sans recadrage (Crop) ou de restaurer la sauvegarde (si elle est activée).

Comment ShortPixel se distingue

Contrairement à d’autres plugins de compression d’images, ShortPixel propose toutes ses fonctionnalités (compression, WebP, redimensionnement intelligent, CDN, etc.) dès la version gratuite. La seule différence entre la version gratuite et les payantes est le nombre de crédits disponibles par mois (100 crédits gratuits/mois).

C’est un vrai plus pour les petits sites vitrine ou blogs professionnels qui souhaitent améliorer leurs performances sans abonnement payant sans grande quantité d’images.

À part cela la compression de ShortPixel est vraiment pas mal.

L’extension est assez simple à configurer et possède les options qu’il faut pour ça, du moins celle que j’attends pour ce genre d’outils.

Ensuite son avantage est aussi son inconvénient : vous avez effectivement accès à toutes les options avec la version gratuite, vous êtes simplement limité en nombre de crédits par mois.

Combien de crédits par image compressée ?

Pour donner un ordre d’idée, si 1 image à 5 miniatures générées par WordPress et disons que vous n’activez pas les formats nouvelle génération (WebP, AVIF), chaque optimisation vous décomptera donc 6 crédits (1+5). Soit l’équivalent grosso modo d’une quinzaine d’images par mois sans problème.

Si vous avez un petit site classique (blog, site vitrine), cela peut suffire.
Si vous gérer un site qui publie régulièrement plusieurs contenus par mois avec plusieurs images par articles, vous dépasserez largement le quota mensuel.

Et si vous activez le ou les formats WebP et AVIF vous passerez donc à 12 ou 18 crédits par image (car oui, un crédit est aussi décompté par image et par format), soit dans notre exemple 6 crédits supplémentaires pour le WebP et 6 autres pour l’AVIF.

Il faudra alors passer par un abonnement avec crédits illimités, surtout si vous utiliser ces nouveaux formats et le CDN (plutôt pour des gros sites déjà).
Ou éventuellement vous pourriez opter pour un pack de crédits pour optimiser toutes les images d’un site vitrine existant, que vous êtes en train de refaire par exemple, et qui n’a pas vocation à changer souvent.

• La version gratuite du plugin vous offre donc 100 crédits par mois ;
• Leur abonnement illimité pour $100/an ou $10/mois ;
• Et leurs 4 packs :
  • $20/30 000 crédits
  • $30/50 000 cr.
  • $50/100 000 cr.
  • $100/250 000 cr.