Optimiser toutes les images sous WordPress (gratuit) !
Votes : environ (100%) 2 votes

Aimeriez-vous accélérer le chargement de votre site WordPress ?

Voulez-vous optimiser et compresser les images existantes et celles que vous allez charger dans le future ?

Savez-vous que j’ai pu gagner ~2gB en optimisant les images de Easytutoriel.com ?

C’est facile !

Comme vous le savez, les images seules occupent une grande partie du trafic web, en fait les images représentent les deux tiers (2/3) du trafic internet.

Sans oublier le géant lui-même, Google !

Optimiser ses images a une grande influence sur le temps de chargement de votre site et donc le référencement (SEO).

Dans ce tutoriel vous allez découvrir tout ce qu’il faut savoir et faire afin d’obtenir des images légères et optimisées.

Allons-y !

Optimiser les images WordPress.

Comment ça marche ? La compression ? Quoi ?

« Compression » vs « Optimisation »

Certains préfèrent l’appeler une « Compression« , d’autres utilisent le mot « Optimisation« .

La différence est très large, je m’explique :

  • L’optimisation c’est diminuer le poids de l’image SANS perdre sa qualité, on appelle ça aussi LossLess (sans perte).
  • La compression permet de diminuer de façon exagérée le poids de l’image au détriment de la qualité, on appelle ceci Lossy (avec perte).

Sur votre site il est recommandé d’optimiser les images sur votre site ET les compresser un peu pour ne pas perdre la qualité !

La différence entre JPG, PNG et GIF :

Sur le web on utilise trois principales extensions, ce sont : JPG ou JPEG, PNG et GIF (une nouvelle extension WEBP est en cours de développement)

Chaque extension a sa place sur le web, chacune a ses caractéristiques (avantages & inconvénients) mais utilisent tous un Dpi de 72 ce qui leur permet de se charger rapidement :

  • JPG (compressable) : C’est pour les images riches en détail et de grandes tailles, ça s’optimise facilement à l’aide du module tranJPG sans perdre la qualité et ça se compresse rapidement en diminuant la qualité.
  • PNG (optimisable) : L’avantage majeur c’est la transparence et permet d’afficher les images telles qu’elles sont, idéale pour les impressions d’écran mais peut avoir beaucoup si l’image contient trop de détails.
  • GIF (optimisable) : En plus de l’animation, les images Gifs sont idéales pour les petits fichiers ou les grands images avec peu de couleurs (256 maximum), ce qui rend cette extension limitée.

Bref, pour les photographes utilisez JPG, pour ceux qui veulent afficher des images avec du texte dedans ou des impressions d’écran utilisez PNG et pour ceux qui aiment les animations GIF est votre ami.

Comment compresser les images ?

Afin de compresser les images il faut avoir les bons outils, mais avant de parler des plugins WordPress permettant de faire cela, faites un petit test avec une image de votre choix !

Essayez vous-même, la compression :

Pour voir mon but de ce tutoriel, je vous invite à passer 5 minutes avec cet outil en-ligne : https://compressor.io

Ajoutez une image que vous connaissez déjà son poid, puis compressez-la et comparez !

J’ai ajouté une image JPG d’une taille de ~250kB et j’ai obtenu une image avec une taille de ~38kB (kB = kByte = ko = koctet ≠ kb = kbit)

compressor

Vous l’avez remarqué, cette image a été optimisée avec un ratio de 85% !!!

Imaginez appliquer cela sur la totalité des images de votre site, c’est le paradis n’est-ce pas ?

Optimiser ses images sous WordPress :

La plupart des plugins faisant cela sur WordPress sont payants et comme j’ai testé les versions gratuites de ces plugins j’ai trouvé que l’extension gratuite de EWWW Image Optimizer offre de bons résultats (il y a une version Cloud payante, pour ceux qui n’ont pas un hébergement puissant).

Recherche le mot-clé « EWWW » sur votre administration WordPress puis installez le plugin « EWWW Image Optimizer« .

Voici le lien du plugin : https://fr.wordpress.org/plugins/ewww-image-optimizer/

ewww image optimizer

Une fois installé, ouvrez cette page : « Réglages » > « EWWW Image Optimizer« .

Dans la page principale vous pouvez voir si les modules d’optimisation d’images sont installés ou pas.

statut plugin ewww image optimizer

Si le serveur de votre hébergement ne contient pas de modules de compression, contactez l’hébergeur ou cherchez comment les installer sur Google.

Par exemple, pour installer Imagemagick sur WHM/cPanel utilisez la commande suivante sur le shell (SSH) :

# /scripts/installimagemagick

Allez vers l’onglet « Paramètres simples » puis cochez « Supprimer les méta-données« .

metadatas ewww image optimizer

Sur l’onglet « Paramètres avancés » choisissez un seul optimiseur pour PNG, dans notre cas soit OptiPNG ou pngout.

Pour le OptiPNG ne dépassez pas le Niveau 2, car vous aurez les même résultats, même chose pour pngout, le niveau 2 est suffisant.

pngout ewww image optimizer

Pour plus ne pas autoriser aux autres utilisateurs de changer les paramètres de conversion, allez vers l’onglet « Paramètres de conversion » puis cochez « Cacher la liste de conversion« .

liste conversion ewww image optimizer

Pour faire un test chargez une image dans la Bibliothèque des médias et vous aurez le taux d’optimisation.

ewww resultat compression image jpg

Comme vous pouvez voir dans l’image ci-dessous, l’image a été optimisée de 35.6% ce qui n’est pas mal du tout pour une solution gratuite =)

Cela sans faire la compression par perte de qualité !

Optimiser davantage avec Imsanity :

Pour activer la compression « Lossy » (avec perte) pour les images JPG, vous pouvez soit ajouter ce code sur le fichier functions.php ou installer le plugin Imsanity :

add_filter('jpeg_quality', function($arg){return 80;});

Cherchez le plugin « Imsanity » ou téléchargez-le par ici : https://fr.wordpress.org/plugins/imsanity/

plugin imsanity

L’avantage de Imsanity, c’est qu’il vous offre au plus du choix de qualité des images JPG, la possibilité de limiter/redimensionner les images originaux pour gagner plus d’espace.

Il permet aussi de convertir les formats BMP ou PNG à JPG.

parametres imsanity

En bas de la page, vous pouvez rechercher et redimensionner les images qui dépassent les tailles que vous avez spécifié en haut de page ; enregistrez les modifications avant de rechercher les images.

resize imsanity

Je viens de l’appliquer sur Easytutoriel.com et ça a marché nickel ;)

Comment re-générer les images déjà chargées ?

ATTENTION : Avant de procéder à la re-génération de vos images, faites une sauvegarde (backup) pour le dossier /wp-content/uploads, au cas ou vous avez fait en erreur assurez-vous que vous pouvez récupérer vos images de nouveau, vous êtes responsable.

Méthode navigateur (peu rapide) :

Pour re-générer/optimiser les images existantes sur votre site WordPress il faut avoir un plugin comme Force Regenerate Thumbnails que vous pouvez trouver par ce lien : https://fr.wordpress.org/plugins/force-regenerate-thumbnails/

L’avantage de ce plugin c’est qu’il permet de supprimer les tailles d’images ajoutées par la fonction add_image_size( ‘nom-taille-image’, 200, 200, true ); au cas ou vous l’avez supprimé (la fonction).

force regenerate thumbnails

Une fois installé, ouvrez « Outils » > « Force Regenerate Thumbnails« .

Cliquez sur le bouton « Regenerate ALL thumbnails« .

regenerate all thumbnails force regenerate thumbnails

Puis vous n’avez qu’à laisser la page ouverte jusqu’à ce que la tâche s’accomplie !

force regenerate thumbnails proges

Méthode SSH (wp-cli & très rapide!!!) :

Si vous avez un accès SSH, avec quelques commandes vous pouvez optimiser tous les images de votre site en fermant votre navigateur.

Nous allons utiliser pour cela WP-CLI http://wp-cli.org/

C’est un script permettant de gérer votre site Wordpress à partir des lignes de commandes.

L’avantage que va nous offrir cet outil c’est la re-génération de toutes les images rapidement et sans avoir à laisser votre PC allumé si le nombre d’images est important, je l’ai utilisé pour redimentionner 16.000 images (les thumbnails inclus), 5000 images dans la Bibliothèque du site Easytutoriel.com.

Pour installer WP-CLI sur votre serveur, connectez-vous au root par l’outil PuTTY puis suivez les étapes.

putty

Exécutez cette commande pour télécharger WP-CLI sur le dossier root. Vous pouvez utiliser wget au lieu de curl.

# curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

Puis accordez les permissions nécessaire et ajoutez la commande wp pour une exécution rapide partout dans votre système.

# chmod +x wp-cli.phar

# sudo mv wp-cli.phar /usr/local/bin/wp
putty wp cli installation

Une fois cela est fait, utilisez la commande su – utilisateur pour changer d’utilisateur vers le propriétaire du site (très important).

Une fois cela est fait, utilisez la commande wp –info pour vérifier si WP-CLI marche.

wp cli info

Pour pouvoir lancer l’optimisation sans avoir à laisser la fenêtre ouverte, nous allons utiliser la commande screen.

Pour l’installer sur votre système voici les commandes :

# yum install screen (pour centos & redhat)

# apt-get install screen (pour debian)

Si vous avez déjà la commande screen activée, lancez-la sur votre shell :

Remarque : Si vous n’avez pas les droits pour ouvrir screen en tant qu’utilisateur normal, utilisez su – root pour revenir au root puis retapez screen.

# screen
screen ssh

 

Changer d’utilisateur :

# su - UTILISATEUR
regenerate screen wp cli

Ouvrez le dossier /public_html puis utilisez cette commande pour redimensionner tous vos images.

# wp media regenerate --yes

Pour détacher la fenêtre (le screen actuel), utilisez les touches CTRL+A puis appuyez sur la touche d[/k].

wp media regenerate wp cli
Une fois le screen est détaché, vous pouvez arrêter l’ordinateur sur lequel vous utilisez PuTTY ! Le serveur va continuer à optimiser les images jusqu’à terminer la tâche. Pour se reconnecter au screen, utilisez la commande [c]screen -ls pour afficher la liste et la commande screen -r ID (avec ID = numéro de screen).

 

N’oubliez pas de vérifier le « load » de votre serveur de temps en temps en utilisant la commande top.

top load serveur putty

Et voilà !

Vous avez réussi à libérer votre site et l’accélérer en diminuant le poids des ressources graphiques ;)

Si vous avez aimé cet article n’hésitez pas à laisser vos commentaires =)

Si vous n’avez pas aimé cet article, partagez-le, vos amis peuvent l’aimer :woot:

Soufiane – Easytutoriel.com