Si vous avez un blog ou un site e-commerce, il affiche forcément un certain nombre d’images. Ceci est essentiel pour plusieurs raisons. D’une part, vous devez illustrer votre thème ou vos produits. Alors, ne nous cachons pas, votre site devient encore plus beau. En revanche, l’image permet d’attirer l’attention de vos visiteurs sur votre plateforme ou vos réseaux sociaux. Enfin, les photographies et les illustrations sont également devenues d’importants vecteurs de référence naturelle.
Cependant, l’accumulation d’images peut vite devenir un frein à la performance de votre site internet… Faites le test sur une plateforme comme Pingdom Tools pour le comprendre ! Non seulement ils peuvent représenter jusqu’à 80 % de l’espace de votre site, mais ils représentent également 50 % des scripts créés. Le temps de chargement de votre page augmente… Si rien n’est fait, ce n’est bon ni pour votre référencement Google ni pour l’expérience utilisateur.
Voyons comment réduire l’impact négatif de vos photos et illustrations et rendez votre site plus efficace !
sommaire
Pour les images, c’est la taille qui compte
Ce problème, WPformation l’a déjà abordé, me direz-vous. Oui, notamment pour présenter un très bon outil sur lequel nous reviendrons sûrement. Cependant, l’optimisation des images passe inévitablement par la gestion de leur taille. On parle ici de dimension et non de poids. Car cet aspect affecte à la fois les performances et l’esthétique. Tout en affectant directement ce problème de poids, exactement. De plus, si vous ne disposez pas d’un espace de stockage limité sur votre serveur, vous vous rendrez vite compte que le poids est un facteur secondaire (mais à ne pas négliger). Alors que la taille peut vite entraver les performances de votre site avec les conséquences évoqué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 CSS. Sachez-le, en faisant cela, vous vous causez doublement. D’une part, cela n’empêche pas le chargement de l’image originale, qui est trop volumineuse. Mais en plus, la taille doit être modifiée dans le format commandé par CSS. Par conséquent, une opération est effectuée qui peut être optimisée et une autre qui peut être évitée. Idée de mauvais choix Idéalement, la bonne taille de l’image affichée correspond à ce que vous avez téléchargé. Pour cela, on peut redimensionner une image directement dans WordPress !
Redimensionner des images directement dans WordPress : un outil à usage de masse
Bien sûr, mais l’effet est le même tant que la manipulation est toujours basée sur le contenu original. De plus, vous devrez le faire pour chaque image téléchargée. Une tâche qui va vite s’avérer effrayante…
Générez vos propres tailles d’image !
Lorsque vous téléchargez une image sur votre WordPress, via votre administration ou directement via FTP, le CMS populaire en générera. L’image originale, bien sûr. Mais aussi trois qui lui sont spécifiques, puis d’autres selon le thème que vous avez choisi et vos potentiels constructeurs de sites.
Cependant, il est possible que ces dimensions créées ne correspondent toujours pas à celles affichées sur votre site Web. En effet, pour diverses raisons, vous devez afficher des tailles personnalisées. Comment résoudre ce problème à l’heure où ces dimensions se multiplient avec la multiplication des plateformes responsives et des pratiques multi-écrans ?
Méthode 1 : utiliser les tailles WorPress par défaut
Première méthode (mais limitée) : modifiez les trois tailles créées par WordPress. Pour cela, rendez-vous dans votre administration WordPress dans l’onglet Paramètres → Média. Ensuite, il vous suffit de saisir les nouvelles dimensions souhaitées. Cette façon de faire a au moins le mérite de ne pas attraper le code. Mais cela vous limite à trois tailles et peut entrer en conflit avec les préréglages de votre thème.
Vignettes WordPress : l’un des paramètres de base de la gestion des images
Méthode 2 : ajoutez des tailles d’image à votre thème
Mais vous pouvez avoir plus de contrôle ! Seulement, pour cela, vous devrez extraire le code. C’est pourquoi il est fortement recommandé d’avoir un thème pour enfants. Sinon, vous trouverez comment créer facilement le vôtre ici. Allez à la racine de votre thème enfant, ouvrez le fichier functions.php et ajoutez cette ligne à la fin :
add_image_size( 'nom-de-taille-photo', 1080, 720, false) ;
Entre parenthèses, le texte entre guillemets simples est le nom que vous donnez à votre nouvelle taille. En termes de nombres, le premier correspond à la largeur tandis que le second constitue la hauteur. Le tout en pixels, bien sûr. Enfin, l’attribut « false » indique que cette nouvelle image ne doit pas être attendue de l’originale. Pour l’activer, vous devrez plutôt taper « true ». Ajoutez une ligne pour chaque nouvelle taille à générer.
Nous pouvons générer des tailles d’image personnalisées dans WordPress avec une seule ligne de code en PHP
Cette manipulation effectuée, ces nouveaux formats seront générés pour chaque nouvelle image téléchargée sur votre WordPress. Si vous touchez un peu le code PHP, vous pouvez également insérer le nom de vos nouvelles tailles au lieu des anciens directement dans le code modèle de vos pages, comme les catégories ou les archives. Attention à bien le faire sur le thème des enfants !
Cependant, les fichiers déjà présents sur votre serveur ne se voient pas attribuer une nouvelle taille… CATASTROPHE ! Heureusement, il existe une solution : régénérer les photos !
Méthode 3 : un attachement magique à vos images
Alors, que permet la régénération miniature ? Eh bien, ce plugin redimensionne toutes les images existantes dans votre WordPress pour les régénérer dans de nouvelles images. Croyez-moi, si vous avez plusieurs milliers de photos et d’illustrations collectées au fil des ans, ce supplément vous sera utile.
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 allez dans Outils → Régénérer les photos. Vous aurez alors la possibilité de régénérer toutes vos images déjà présentes. Enfin, vous pouvez également supprimer les tailles qui ne sont plus répertoriées sur votre site.
La régénération des vignettes vous permet de redimensionner toutes ses images dans de nouveaux formats créés dans votre code WordPress
Par conséquent, créer de nouvelles tailles est intéressant à plus d’un titre. En effet, cette méthode permet de faire correspondre le fichier appelé avec celui affiché sur votre site. Cela évite le travail de redimensionnement et favorise donc un affichage plus rapide pour vos visiteurs. C’est un plus important pour votre référence naturelle et l’expérience utilisateur de votre site Web.
C’est une bonne première étape pour faciliter le téléchargement d’images sur votre WordPress même s’il existe d’autres solutions via d’autres outils. Quoi qu’il en soit, c’est un bon point de départ pour sortir du cauchemar de la création d’images sur des blogs et des sites de commerce électronique.
Partager la publication « 3 façons d’optimiser la taille de vos images dans WordPress »
- Tweeter
Articles similaires:
