3 façons d’optimiser la taille de vos images sur WordPress

Si vous avez un blog ou un site internet ecommerce, celui-ci affiche forcément une certaine quantité d’images. C’est indispensable et ce pour plusieurs raisons. D’une part, vous avez besoin d’illustrer votre sujet ou vos produits. Puis, ne nous le cachons pas, votre site n’en devient que plus joli. D’autre part, l’image permet de capter l’attention de vos visiteurs sur votre plateforme ou les réseaux sociaux. Enfin, les photos et illustrations sont aussi devenues des vecteurs importants de référencement naturel.

Cependant, l’accumulation d’images peut vite devenir un frein à la performance de votre site web… Faîtes le test sur une plateforme comme Pingdom Tools pour vous en rendre compte ! Non seulement, elles peuvent constituer jusqu’à 80% de l’espace de votre site mais aussi représenter 50% des scripts générés. Le temps de chargement de vos pages se rallonge… Si on ne fait rien, ce n’est bon ni pour votre référencement sur Google ni pour l’expérience utilisateur.

Voyons comment réduire l’impact négatif de vos photos et illustrations et rendre votre site internet plus efficace !

 

Pour les images, c’est bien la taille qui importe

Cette problématique, WPformation l’a déjà traitée, me direz-vous. Oui, pour présenter notamment un très bon outil sur lequel nous reviendrons très certainement. Toutefois, l’optimisation des images passe inévitablement par la gestion de leur taille. On parle bien ici de dimension et non de poids. Car cet aspect touche aussi bien à la performance qu’à l’esthétique. Tout en influant directement sur cette question de poids, justement. D’ailleurs, à moins d’avoir un espace de stockage limité sur votre serveur, vous vous rendrez vite compte que le poids est une donnée secondaire (mais à ne pas ignorer). Alors que la taille peut vite entraver la performance de votre site avec les conséquences énoncées plus haut… Mais attention aux bonnes pratiques en la matière !

L’erreur la plus courante est de réduire la taille de ses images via le CSS. Sachez-le, en faisant ça, vous vous infligez une double peine. D’une part, cela n’empêche pas le chargement de l’image d’origine beaucoup trop grande. Mais en plus, celle-ci doit être redimensionnée au format commandé par le CSS. On réalise donc une opération pouvant être optimisée et une autre évitable. Mauvaise pioche… L’idéal est que la taille d’image exacte affichée corresponde à celle que vous avez uploadée. Pour cela, on peut modifier la taille d’une image directement dans WordPress !

Certes, mais l’effet est le même dans la mesure où la manipulation se base toujours sur le contenu original. De plus, il vous faudrait le faire pour chaque image uploadée. Une tâche qui va vite s’avérer rébarbative…

Générez vos propres tailles d’image !

Quand vous téléchargez une image sur votre WordPress, via votre administration ou directement en FTP, le célèbre CMS va en générer plusieurs. L’image originale, bien sûr. Mais aussi trois qui lui sont propres puis d’autres selon le thème que vous avez choisi et votre éventuel constructeur de pages.

Pourtant, il est possible que ces tailles générées ne correspondent toujours pas à celle(s) affichées sur votre site web. Ceci parce que, pour diverses raisons, vous avez besoin d’afficher des tailles personnalisées. Comment remédier à ce problème à l’heure où ces dimensions se multiplient avec la multiplication des plateformes responsive et des pratiques multi-écrans ?

Méthode 1 : utiliser les tailles WorPress par défaut

Première méthode (mais limitée) : modifier les trois tailles générées par WordPress. Pour cela, il faut vous rendre dans votre administration WordPress sur l’onglet Réglages → Médias. Ensuite, vous n’avez plus qu’à entrer les nouvelles dimensions souhaitées. Cette façon de faire a au moins le mérite de ne pas mettre les mains dans le code. Mais elle vous limite à trois tailles et peut entrer en conflit avec les préconfigurations de votre thème.

Méthode 2 : ajouter des tailles d’image dans votre thème

Mais vous pouvez avoir plus de contrôle ! Seulement, pour cela, il vous faudra bidouiller le code. C’est pourquoi il est fortement conseillé d’avoir un thème enfant. Si ce n’est pas le cas, vous trouverez comment faire le vôtre facilement ici. Rendez-vous à la racine de votre thème enfant, ouvrez le fichier functions.php et ajoutez-y cette ligne à la fin :

add_image_size( 'nom-de-taille-photo', 1080, 720, false) ;

À l’intérieur de la parenthèse, le texte entre les guillemets simples correspond au nom que vous donnez à votre nouvelle taille générée. Quant aux nombres, le premier correspond à la largeur tandis que le deuxième constitue la hauteur. Le tout en pixels, bien sûr. Enfin, l’attribut « false » indique que cette nouvelle image ne doit pas être rognée par rapport à l’originale. Pour le permettre, il vous faudra entrer « true » à la place. Ajoutez une ligne par nouvelle taille à générer.

Cette manipulation faite, ces nouveaux formats seront générés pour chaque nouvel image chargée sur votre WordPress. Si vous touchez un peu au code PHP, vous pouvez même entrer le nom de vos nouvelles tailles à la place des anciennes directement dans le code de vos templates de page comme celui des catégories ou des archives. Attention à bien le faire dans le thème enfant !

Cependant, les fichiers déjà présents sur votre serveur ne se voient pas dotés d’une nouvelle taille… CATASTROPHE ! Heureusement, il existe une solution : Regenerate Thumbnails !

 

Méthode 3 : un plugin magique pour vos images

Que permet donc Regenerate Thumbnails ? Eh bien, cette extension redimensionne toutes les images existantes sur votre WordPress pour les régénérer aux nouvelles définies. Croyez-moi, si vous avez un petit millier de photos et illustrations qui se sont accumulées au fil des années, ce plugin va s’avérer très pratique.

Son utilisation est très simple. Il vous suffit de le télécharger depuis le répertoire officiel. Une fois l’extension activée, deux solutions s’offrent à vous. Vous pouvez régénérer chaque image une par une en les sélectionnant dans l’onglet “Médias” de votre administration WordPress. Ou alors, rendez-vous dans Outils → Régénérer les miniatures. Vous aurez alors la possibilité de régénérer toutes vos images déjà présentes. Enfin, vous pourrez aussi supprimer les tailles qui ne sont plus répertoriées sur votre site.

 

Générer de nouvelles tailles est donc intéressant à plus d’un titre. En effet, cette méthode permet d’adapter le fichier appelé à celui affiché sur votre site. Ceci évite un travail de redimensionnement et favorise donc un affichage plus rapide pour vos visiteurs. Ceci constitue un plus non négligeable pour votre référencement naturel et l’expérience utilisateur de votre site internet.

C’est un bon premier pas pour alléger les images uploadées sur votre WordPress même si d’autres solutions existent via d’autres biais. Quoiqu’il en soit, il s’agit là d’un bon point de départ pour sortir du cauchemar que constitue l’accumulation d’image sur les blogs et sites web ecommerce.