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 !

L'outil de redimensionnement des images WordPress

Le redimensionnement des images directement dans WordPress : un outil à utliser avec parcimonie

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.

Réglage des images miniatures WordPress

Les miniatures WordPress : l’un des réglages de base de l’administration pour les images

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.

Code PHP pour générer de nouvelles tailles d'images dans WordPress

On peut générer des tailles d’images personnalisées dans WordPress grâce à une seule ligne de code en PHP

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.

Regenerate Thumbnails : une deuxième vie pour vos images

Regenerate Thumbnails permet de redimensionner toutes ses images aux nouveaux formats créés dans le code de votre WordPress

 

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.

A propos de l'auteur...

Maxime Malfoy

Journaliste de formation, j'ai créé mon propre média en 2017. J'ai donc dû me former et me perfectionner à la création de sites web et de contenus. Si l'expérience ne s'est pas avérée concluante, j'ai tout de même énormément appris au point d'être aujourd'hui développeur WordPress et content manager freelance.

4 commentaires pertinents à ce jour ;)

  • serge dit :

    bonjour

    Vous ne dérogez pas à la régle à savoir:
    Toujours du contenu de qualité
    j’aime

  • Maxime Malfoy dit :

    Merci beaucoup ! Très heureux d’apporter des solutions :-)

  • corinne dit :

    Bonjour, est ce que le plugin Regenerate Thumbnails est compatible avec WP Rocket ? Merci pour cet article pertinent.

  • Maxime Malfoy dit :

    Bonjour Corinne,
    A priori, rien n’indique un conflit entre les deux. Après, je vous avoue que je ne les ai jamais testés ensemble…

Vous pouvez laisser votre commentaire ci-dessous et même vous abonner aux commentaires de l'article.
Nota: pour le champ "Site Web", seuls les liens vers vos réseaux sociaux sont autorisés.

Likez, Tweetez, Commentez, Partagez !