Gérez au mieux le poids de vos images sur WordPress

Il y a quelque temps, nous nous sommes attardés sur l’importance des tailles d’images sur votre WordPress. Cependant, cette mensuration n’est pas la seule à prendre en compte. Du moins, si vous avez en tête une performance optimale de votre site web. En effet, le poids est aussi à considérer.

Et, contrairement à ce que l’on pourrait croire, l’un n’est pas nécessairement lié à l’autre. Certes, une image plus petite sera forcément plus légère. Toutefois, d’autres facteurs entrent en ligne de compte comme la qualité et le format.

Bien choisir le format de ses images

Du point de vue des formats d’images, le choix est encore assez restreint. Ce n’est pas plus mal puisque cela nous facilite la tâche ! Alors, PNG ou JPEG ? Il y est déjà question de poids. En effet, un média PNG peut très vite peser deux à trois fois plus lourd qu’un contenu JPEG. C’est pourquoi il est recommandé d’opter pour ce format si vous possédez un blog ou une boutique e-commerce. Non seulement il est idéal pour les grosses médiathèques WordPress. Mais il l’est aussi pour rendre au mieux les photos qui contiennent naturellement beaucoup de couleurs.

Cependant, ne jetez pas le PNG trop vite à la poubelle ! Car il a aussi ses atouts. Le principal étant de gérer la transparence. Atout que ne propose pas le JPEG, sachez-le. Le PNG est donc tout indiqué pour les objets graphiques ou les logos à intégrer ici ou là sur votre site WordPress. Surtout qu’il est possible d’agir sur le poids… Mais nous y reviendrons un peu plus tard.

La tentation du SVG

Certes, vous pouvez me contredire au sujet de l’utilisation des PNG. Car rien de tel pour travailler sur un logo ou une icône qu’un format SVG. Celui-ci est très en vogue à l’heure où il faut penser responsive et imaginer un site web transposable sur ordinateur, tablette et téléphone. En effet, il a l’avantage de s’agrandir et se rétrécir quasiment à l’infini sans perte de qualité. De plus, pour les types d’éléments définis plus haut, le fichier peut se révéler jusqu’à dix fois plus léger qu’un PNG ou JPEG. Seulement, si vous avez déjà essayé de téléverser un fichier SVG sur votre WordPress, vous avez sûrement eu ce message.

Effectivement, WordPress ne prend pas nativement en charge ce type de fichier. Notamment pour des raisons de sécurité parce qu’il est très facile d’injecter du code dans les SVG. Et ainsi infecter votre site…

Certes, il est possible de forcer WordPress à accepter le transfert de fichiers SVG avec quelques lignes de code dans le functions.php de votre thème. Cependant, ceci est déconseillé, toujours pour des raisons de sécurité. Vous devrez vérifier manuellement le code de chaque fichier avant de les envoyer. Cette tâche peut être configurée via PHP. Mais le plus simple reste tout de même de déléguer toutes ces opérations par le plugin de référence en la matière : Safe SVG. Toutefois, est-ce que l’ajout d’un plugin pour afficher des icônes se justifie ? Surtout à l’heure où une bibliothèque comme Font Awesome en propose de nombreuses gratuitement. Ceci en plus d’être très facile à installer. Mais je vous laisse vous faire votre opinion !

Quant aux images plus complexes, le SVG est plutôt à oublier. En effet, l’ajout de détails augmente considérablement le poids de l’image au poids bien au-delà des formats PNG et JPEG.

Céder à la mode du GIF ?

Autre format très fun et ayant son intérêt : le gif ! Mais oui, ces petites images animées popularisées par Giphy et devenues incontournables sur les réseaux sociaux ! D’ailleurs, depuis quelques années, leur poids a été fortement optimisé pour s’intégrer partout malgré leur animation. Problème : l’animation qui peut rajouter du temps de chargement à votre site. Surtout si le gif est natif, c’est à dire récupéré depuis votre médiathèque WordPress. Le premier conseil sera donc de limiter le nombre de gifs sur une même page. D’autre part, à moins de proposer des gifs faits maison (faites bien attention à leur taille), optez pour les options d’intégration proposées par les bibliothèques existantes. Comme ça :

via GIPHY

 

Les images, un enjeu pour Google…

Ne vous y trompez pas. Le format d’image n’est pas une considération mineure. Surtout quand il s’agit de concevoir un site web. D’ailleurs, elle dépasse la simple problématique de performance pour s’étendre à celle du référencement. En effet, la performance de votre site entre en compte quand l’algorithme de Google calcule son page rank pour son moteur de recherche. Dans quelle proportion ? Je ne saurais vous dire. Mais suffisamment pour que la firme de Mountain View propose un outil spécialement dédié à l’examen des performances de votre site : Google Page Speed.

Une autre preuve, s’il en faut, est que, en 2010, Google a même développé son propre format d’image : WebP. Un format censé battre tous les records en terme d’affichage. Dès 2013, le géant du web annonçait un gain dans ce domaine de 30 % à 80% par rapport à un PNG ou un JPEG. Au bout d’une dizaine d’années de développement et d’utilisation, il semblerait que le gain moyen soit plutôt de 30%. Enfin, 30% sans perte de qualité d’image. Si on se résout à diminuer cette dernière, le gain peut effectivement atteindre le chiffre vertigineux de 80%.

Ensuite, il ne s’agit pas du seul avantage à recourir au format WebP. En effet, celui-ci supporte aussi bien les larges gammes de couleurs (JPEG) que les fonds transparents (PNG) et les animations (gif). Les trois caractéristiques liées aux formats d’images sont ainsi regroupées en un seul. Beaucoup plus simples ! De plus, WebP est dorénavant pris en charge par la plupart des navigateurs. Tous sauf un et pas des moindres puisqu’il s’agit de… Safari. Le navigateur d’Apple. Une donnée importante à prendre en considération au moment d’opter pour ce format sur votre WordPress.
Comment convertir ses images en WebP pour WordPress ?

Justement, c’est un autre inconvénient du format. Il n’est pas pris en charge nativement par WordPress. Et ce pour les mêmes raisons que celles concernant le format SVG. Solution ? Passer par un plugin. Ainsi, on ne saurait que trop vous conseiller WebP express qui fonctionne très simplement tout en proposant moult options pour un contrôle quasi total sur la conversion. En effet, pour peu que vous ayez quelques notions en anglais, le plugin prend en compte les modalités d’enregistrement des images, les réécritures dans le .htaccess et les conditions de conversion (avec ou sans perte de qualité…).

 

Images et web : une histoire de grosso phobie ?

Vous l’aurez compris, qu’il s’agisse d’agir sur la taille de l’image ou son format, la question de son poids est centrale. Et ce, bien qu’elle ne soit pas la seule prise en compte. Quoiqu’il en soit, c’est le vecteur n°1 à prendre en compte quant au chargement des photos sur votre site web.

Vous avez soigneusement choisi la taille de votre image et son format ? Pourtant, elle reste encore trop lourde à votre goût ? Heureusement pour vous, bon nombre d’outils tiers gratuits peuvent régler ce problème avant transfert vers votre WordPress. Petite sélection non-exhaustive ci-dessous.

TinyPNG

Le plus simple mais aussi le plus limité. TinyPNG propose très simplement de glisser-déposer votre fichier PNG ou JPEG. Ensuite, celui-ci est instantanément allégé dans le même format et ce jusqu’à 50% de son poids initial. Le tout sans perte de qualité apparente. Notre ami panda propose ainsi d’alléger jusqu’à 20 photos dans la limite de 5MB. Le paquet est ensuite téléchargeable au format zip.

Shrink me

Sur le même principe, Shrink Me propose aussi de glisser-déposer vos PNG et JPEG mais aussi vos SVG et WebP. Un clic et hop. Voici votre image resservie dans le format d’origine mais délestée jusqu’à 75% de son poids initial. Si l’ajout de deux formats est un plus par rapport à TinyPNG, il n’est possible de convertir qu’une image à la fois.

Compressor.io

Le dernier outil de la liste tient la dragée haute aux deux précédents. En effet, Compressor.io propose aussi de glisser-déposer ses PNG, JPEG, SVG et WebP. Vous pouvez ainsi alléger autant de fichiers que vous le souhaitez à la fois dans la limite de 10MB. Petit plus : vous pouvez choisir une conversion avec ou sans perte de qualité. Au passage, la version premium de l’outil permet même de customiser le degré de perte de qualité. Le gain en terme de poids peut aller jusqu’à 50% tandis que les fichiers traités sont ensuite téléchargeables au format zip.

Et si je veux traiter mes images avec un plugin WordPress ?

Mais très certainement ! D’ailleurs, il en existe pléthore qu’on ne présente plus dans la communauté WordPress ! Au premier rang d’entre eux, on retrouve Imagify. Qu’en dire de plus que ce qui a déjà été écrit dans ces lignes ? Peut-être que la version gratuite de Imagify est limitée à 25MB d’allègement par mois. Ceci peut vite s’avérer limité pour un blog ou une boutique e-commerce.

Resmush.it

Si vous cherchez quelque chose de simple et efficace, Resmush.it est sûrement ce qu’il vous faut. En effet, cette extension propose d’alléger vos fichiers PNG ou JPEG individuellement ou en masse. Une option permet même de le faire automatiquement lors du téléversement du fichier. Enfin, il est possible de définir le niveau de perte de qualité lors de l’opération. Sachez que, sans cette dernière, Resmush.it est déjà en mesure d’alléger les images transférées de 40%.

Shortpixel

Là, on monte en gamme puisque Shortpixel est plutôt à classer dans la catégorie d’un Imagify. En effet, comme ce dernier, il faut en passer par une clé API pour lier votre WordPress au serveur du distributeur. Ensuite, il est aussi possible de traiter vos images selon trois niveaux de qualité ou de les convertir en WebP. Le tout manuellement ou automatiquement dès le téléversement. Enfin, Shortpixel est aussi un plugin freemium. C’est à dire que, s’il propose une version gratuite, des plans premiums sont aussi disponibles. Ainsi, dans la même veine que Imagify, ces plans proposent plus de fichiers à traiter. Dans la version gratuite, une trentaine d’images maximum par mois sont disponibles.

Mais c’est au rayon fonctionnalités que Shortpixel tire son épingle du jeu. Ainsi, il est possible de convertir automatiquement les PNG non-transparents en JPEG. Et on a vu plus haut que cela pouvait être utile ! D’autre part, Shortpixel se charge aussi d’optimiser les couleurs CMJN en RVB, les images Retina, les miniatures et même les PDF. Enfin, si vous utilisez Cloudflare, Shortpixel peut s’y connecter pour mieux servir les images passant par le CDN.

EWWW Optimizer

EWWW Optimizer est probablement l’extension qui offre le plus de fonctionnalités. Mais c’est aussi celle qui se révèle la plus efficace. En effet, son pourcentage de conversion atteint 65% d’après les tests. De plus, c’est vraiment la foire à l’optimisation ! Quoique le plugin n’est pas très accessible pour les débutants purs. Là encore, il faudra obtenir une clé API pour accéder aux pleines capacités d’optimisation.

EWWW Optimizer propose la conversion au format WebP et pléthore d’options pour optimiser ce format avec ou sans javascript ! Une conversion qui s’applique aux PNG, JPEG mais aussi aux GIF que le plugin prend en compte. Tout comme les PDF mais ceux-ci ne sont pas convertibles. De plus, l’extension propose aussi de convertir vos PNG en JPEG et vis-versa ou encore l’opération GIF vers PNG. Enfin, elle permet aussi un redimensionnement automatique des images selon des critères définis. La qualité des JPEG est définissable pour gagner en poids tandis que le chargement différé (lazy load) est aussi disponible.

 

Et vous, quels outils utilisez-vous ?
Lesquels ont le mieux servi votre WordPress sur Pingdom Tools et Pages Speed Insight ?
N’hésitez pas à nous le dire en commentaire !