Optimiser les images sur wordpress

Optimiser les images sur wordpress

À mesure que le Web devient plus visuel, les images et autres médias enrichis sont devenus un facteur majeur du temps de chargement des pages. Selon HTTPArchive, en 2020, les images représentaient jusqu’à 50 % des octets moyens téléchargés par les visiteurs Web. Par conséquent, optimiser les images sur WordPress pour réduire leur taille de fichier est une stratégie clé.

Pour réduire les temps de chargement des pages et améliorer l’expérience utilisateur, des optimisations simples, telles que le redimensionnement des images à la taille réelle à laquelle elles sont affichées sur la page, ou la conversion dans un format d’image plus efficace, peuvent entraîner une amélioration spectaculaire du chargement de la page.

Les avantages de l’optimisation d’image sur WordPress incluent :

  • Taux de rebond réduits – les utilisateurs sont plus susceptibles de rester sur la page si elle se charge rapidement
  • Amélioration de l’engagement client – les images sont un élément central de l’expérience utilisateur dans un site Web moderne. Si les images se chargent lentement (même si le reste du contenu est visible), les visiteurs Web sont moins susceptibles d’interagir avec le site Web et éventuellement de se convertir.
  • Économies de coûts – la bande passante coûte de l’argent, et en optimisant les images, les sites Web en utilisent moins et économisent sur les coûts d’hébergement et de diffusion de contenu.
  • Amélioration des classements de recherche – car le temps de chargement et les performances des pages sont un facteur de classement sur Google et d’autres moteurs de recherche. L’optimisation des images peut directement conduire à un meilleur classement et à plus de trafic.

Optimisation des images

Voici plusieurs stratégies clés que vous pouvez utiliser pour optimiser les fichiers image, réduire le temps de chargement des pages et améliorer l’expérience utilisateur.

Choisissez le bon format de fichier

Assurez-vous de sélectionner le meilleur type de fichier avant de commencer à modifier votre image. Les types de fichiers les plus courants sont :

  • PNG , qui produit des images de haute qualité, mais augmente également la taille du fichier. PNG est sans perte, mais vous pouvez également le configurer pour activer la compression avec perte.
  • JPEG – vous pouvez équilibrer la qualité et la taille du fichier en ajustant le niveau de qualité JPEG, entre 1 et 100 %.
  • GIF – ne prend en charge que 256 couleurs et fournit une compression sans perte. Rarement utilisé pour les images statiques, mais de plus en plus populaire pour les animations.

Nommez vos images de manière descriptive et en langage clair

Il est très facile de charger des centaines de photos de produits sur votre site et de conserver les noms de fichier par défaut attribués par votre appareil photo.

En matière de référencement d’image, il est important d’utiliser des mots-clés pertinents pour aider votre page Web à se positionner sur les moteurs de recherche. La création de noms de fichiers descriptifs et riches en mots-clés est cruciale pour l’optimisation d’image. Les moteurs de recherche non seulement analysent le texte de votre page Web, mais également les noms de vos images. 

Réfléchissez à la manière dont vos clients recherchent des produits sur votre site Web. Quels modèles de dénomination utilisent-ils lorsqu’ils effectuent une recherche ? Examinez les données de votre site Web pour connaître les modèles de mots-clés suivis par vos clients. Déterminez les modèles de dénomination les plus courants qu’ils utilisent et appliquez cette formule à votre processus de dénomination de fichiers.

Si vous n’avez pas encore de données statistiques de votre site Web, veillez simplement à utiliser des mots-clés pertinents et utiles lorsque vous nommez vos images.

Changer la taille d’une image avec Photoshop et Lightroom

Si vous disposez de Photoshop ou de Lightroom, sachez que ces deux logiciels permettent également le redimensionnement sans perte de qualité de votre image. Formidable, non ?

Cependant, ils sont payants et les licences d’exploitations sont plutôt chères (145 €/an), ne les achetez pas uniquement pour redimensionner des photos, mais plutôt si vous souhaitez faire des retouches photo plus avancées.

Redimensionner une image avec Photoshop

Pour modifier la taille des images sous Photoshop, quelques étapes très simples suffisent :

  • Tout d’abord, ouvrez la photo voulue dans le logiciel de retouches, et cliquez sur le menu « image »,
  • Cliquez sur « taille de l’image »,
  • Indiquez le nombre de pixels que vous souhaitez en hauteur puis en largeur, avec une résolution de 72 DPI,
  • Cochez « conserver les proportions » et « rééchantillonnage » pour que la photo soit plus nette et non déformée,
  • Cliquez sur « fichier », « enregistrer sous », et l’affaire est dans le sac !

Plutôt simple non ?

Vous pouvez aussi en profiter pour recadrer la photo si vous souhaitez obtenir une taille carrée ou supprimer quelque chose à l’image.

Redimensionner une image avec Lightroom

Si vous avez Lightroom, la manipulation d’optimisation des images n’est pas beaucoup plus compliquée :

  • Ouvrez votre image ou plusieurs images,
  • Cliquez sur « fichier », puis « exporter »,
  • Dans l’onglet d’export, définissez les paramètres d’emplacement d’exportation, de titre du fichier, de format (format png, jpeg, pdf, etc.),
  • Choisissez la taille dans le dimensionnement de l’image,
  • Comme pour Paint, définissez la largeur et la hauteur, cochez bien « ne pas agrandir »,
  • Optez pour une résolution de 72 pixels par pouce, de sorte à avoir la meilleure qualité possible en fonction de la taille sans pour autant que l’image soit trop lourde,

Et voilà !

Vous pouvez également utiliser les fonctions de base comme rogner, pivoter ou recadrer.

Redimensionner une image en ligne

Parfois un logiciel de retouche photo n’est pas installé sur notre ordinateur, ou tout simplement, on décide de favoriser les outils en ligne. Aucun problème, puisque bon nombre de sites de redimensionnement de photos existent !

Il vous suffira de chercher quelques mots-clés du type « redimensionner image » ou « modifier la taille d’une image » et Google vous les offrira sur un plateau d’argent. Reste à cliquer sur celui que vous jugez le plus ergonomique, le plus pratique et de se laisser guider.

Les étapes sont concrètement les mêmes que sur les logiciels photo. Vous choisissez le nombre de pixels, la hauteur, et même le format et vous validez !

En choisissant le dossier de destination sur votre ordinateur, vous est assuré de retrouver une photo dpi à la bonne taille et de manière organisée, le tout sans plugin. Le seul problème, c’est que ce genre d’outils en ligne vous demande généralement de vous inscrire pour récupérer votre photo ou alors, vous êtes limité dans le nombre de photos à redimensionner par jour…

Qu’il s’agisse d’une image JPEG ou de pièces jointes, vous voilà paré à télécharger une même image en différents formats, en haute définition, mais surtout, à redimensionner les fichiers images.

Mais qu’en est-il du poids des photos ? Un logiciel de retouche photo permet-il d’alléger un cliché ? La réponse est oui !

Vous pouvez également prendre des cours de photographie pour travailler le post-traitement.

L’utilisation du lazy loading

Qu’est ce que le lazy loading ou le chargement progressif ?

Le chargement progressif d’images signifie charger des images sur votre site WordPress de manière asynchrone. En d’autres termes, le chargement d’images et d’autres contenus sur votre page Web à des moments différents.

En un mot, voici comment fonctionne le lazy loading : lorsque quelqu’un visite votre site Web, les images se chargent dès l’entrée sur le site, mais les images restantes sur la page ne se téléchargent que lorsqu’elles apparaissent sur l’écran de l’utilisateur. En d’autres termes, le chargement différé signifie charger les images hors écran, en arrière-plan.

De nombreux sites Web riches en images utilisent cette technique. Lorsque vous faites défiler la page, vous verrez des images d’espace réservé qui se remplissent rapidement d’images réelles.

Le lazy loading fonctionne sur mobile comme il fonctionne sur le bureau – et il en va de même pour la façon dont le chargement progressif doit être implémenté. 

De plus, le lazy loading mobile offre aux utilisateurs un avantage plus important, car ils n’ont pas à consommer de données mobiles pour charger des images vers lesquelles ils ne défilent pas.

Le lazy load est une technique utilisée pour améliorer la vitesse de chargement des pages et augmenter l’expérience utilisateur des sites Web WordPress. Il retarde le chargement des images sur un site WordPress jusqu’à ce qu’elles deviennent visibles à l’écran. Nous avons plusieurs plugins qui nous permettent d’appliquer la fonctionnalité lazy load sur les images du site Web. Cela signifie que les images qui ne sont pas initialement visibles lorsqu’un utilisateur visite un site Web ne seront chargées que lorsqu’elles défilent vers le bas. lazy load peut considérablement améliorer la vitesse de chargement des pages, en particulier lorsque nous avons de nombreuses images et articles sur des sites Web WordPress. 

Certains des plugins les plus connus pour cette fonctionnalité sont WP Rocket, Smush et Lazy Loader. De plus, les plugins lazy load peuvent également aider à réduire l’utilisation des données pour les utilisateurs qui accèdent à un site Web WordPress sur un appareil mobile. lazy load est une fonctionnalité particulièrement importante pour les sites Web WordPress, car WordPress est souvent utilisé pour créer des sites riches en images tels que des blogs et des portefeuilles. Les propriétaires de sites WordPress peuvent ainsi s’assurer que leur site se charge rapidement et efficacement.

WordPress est maintenu mis à jour par les développeurs et, par conséquent, ils en ont fait la fonctionnalité par défaut après WordPress 5.5. Pourtant, pour nous assurer, nous avons un plugin simple disponible sur WordPress qui nous permet d’appliquer le lazy load et quelques fonctionnalités supplémentaires en quelques clics. Alors comprenons d’abord le plugin, puis comprenons le fonctionnement du plugin étape par étape.

Comment activer la fonction Lazy Load à l’aide du plugin WP Rocket

Étape 1 : Connectez-vous au tableau de bord de la zone d’administration de votre site Web WordPress à l’ aide de votre nom d’utilisateur et de votre mot de passe.

Étape 2 : Maintenant, passez votre curseur sur la section de l’onglet Plugins disponible sur le côté gauche de l’écran. Ensuite, cliquez sur l’option Ajouter nouveau, comme vous pouvez le voir dans l’image ci-dessous.

(Nous allons installer le plugin WP Rocket . Vous devez donc télécharger le plugin depuis le site officiel . Suivez les étapes après avoir téléchargé le plugin.)

Étape 3 : Maintenant, cliquez sur le bouton Upload Plugin. Sélectionnez le WP Rocket sur votre appareil. Vous pouvez directement déposer le plugin dans la boîte blanche.

Étape 4 : Après avoir téléchargé le plugin, cliquez sur le bouton Installer maintenant pour installer les fonctionnalités du plugin sur votre site Web WordPress, comme indiqué dans l’image ci-dessous.

Étape 5 : Une fois l’installation réussie, cliquez sur le bouton Activer le plugin, comme vous pouvez le voir sur l’image ci-dessous.

Étape 6 : Pour appliquer la fonctionnalité de chargement paresseux à ce site Web WordPress, passez votre curseur sur l’option Paramètres disponible dans la section de gauche. Cliquez ensuite sur WP Rocket, qui est disponible en dernière option, comme vous pouvez le voir sur l’image ci-dessous.

Étape 7 : Sur la page des paramètres des plugins, nous devons trouver l’option Paramètres des médias dans les options de l’onglet de gauche. Cliquez sur la section Média qui contient également les paramètres pour lazy load Images.

Étape 8 : Dans cette section, vous pouvez voir des cases à cocher comme l’image ci-dessous. Cliquez sur les cases à cocher et marquez comme vrai pour activer les fonctionnalités lazy load sur les images et les vidéos de votre site Web.

Étape 9 : Pour exclure les images et vidéos sélectionnées afin de ne pas utiliser la fonction lazy load, ajoutez les noms d’image et de vidéo dans la zone de texte blanche. Et cliquez sur la case à cocher des dimensions de l’image pour ajouter automatiquement les dimensions manquantes telles que la hauteur et la largeur de l’image, tout comme l’image ci-dessous.

Étape 10 : Cliquez sur le bouton Enregistrer les modifications pour enregistrer les dernières modifications.

Conclusion

Image Lazy Load et la compression d’image sont deux fonctionnalités intéressantes qui peuvent aider à améliorer les performances de votre site Web WordPress. La compression d’image réduit la taille du fichier des images, ce qui contribue également à accélérer votre site. Ces deux fonctionnalités peuvent contribuer à améliorer l’expérience utilisateur sur votre site et à accélérer son chargement. 

De plus, le lazy load image peut également aider à économiser de la bande passante et à réduire la quantité de données transférées lorsque votre site est chargé. La compression d’image peut également aider à réduire la quantité d’espace de stockage requise pour votre site. Dans l’ensemble, ces deux fonctionnalités peuvent offrir plusieurs avantages pour votre site Web WordPress. Commentez ci-dessous et suggérez les sujets et les informations nécessaires et passez en revue ces informations.