Optimisez vos images pour WordPress !

Vous avez sans doute déjà connu cette frustration sur votre site web : vos images prennent une éternité à se charger, et lorsqu’elles sont légères, c’est leur qualité qui laisse à désirer. Vous consacrez un temps précieux à tenter de résoudre ces problèmes, sans réellement comprendre comment optimiser vos images pour WordPress.

Rassurez-vous, le traitement des images pour WordPress est assez simple, pour un résultat garanti. En appliquant quelques bonnes pratiques, vous maîtriserez le processus de traitement des images de bout en bout. Nous examinerons de près les méthodes pour optimiser vos images pour un impact positif à la fois sur la performance de votre site web et sur votre référencement SEO.

Les choix de formats d’image recommandés

Le choix du format de vos images influence directement leur taille. Il est donc important de s’y arrêter. JPEG, PNG, GIF, et maintenant WEBP : chaque option a ses implications, et il n’est pas toujours facile de prendre la bonne décision. Vous souhaitez améliorer la qualité visuelle de vos images sans ralentir votre site web ? Voici quelques recommandations pour vous guider :

  • JPEG/JPG est idéal pour les photographies et les images complexes.
  • PNG est préférable pour les illustrations et les images avec un fond transparent.
  • GIF est approprié pour les images animées.
  • Le format WEBP gagne en popularité en raison grâce à sa capacité à compresser les images efficacement tout en préservant leur qualité. Les moteurs de recherche vous indiqueront de nombreux outils en ligne pour optimiser votre image WordPress en la convertissant au format WEBP.

Respecter le droit d’auteur et trouver des ressources gratuites

Une graphiste optimisant une image pour un site web
Crédits : Matthew Henry (Burst)

Lorsque vous recherchez des images, icônes ou vidéos pour votre site, il est essentiel de vous protéger légalement en respectant le droit d’auteur. Ne vous exposez pas à des litiges et à une déterioration de votre image en utilisant des contenus protégés récupérés sur Google !

Pour que votre site internet reste conforme aux lois et aux valeurs éthiques, ce qui est essentiel pour sa pérennité à long terme, voici quelques banques de ressources gratuites que vous pouvez utiliser en toute légalité :

Les banques d’images gratuites

Unsplash (https://unsplash.com)

Pexels (https://www.pexels.com)

Pixabay (https://pixabay.com)

Freepik (https://www.freepik.com)

Burst by Shopify (https://burst.shopify.com)

Les banques d’icônes gratuites

Flaticon (https://www.flaticon.com)

Font Awesome (https://fontawesome.com)

Material Icons (https://material.io/resources/icons)

Les banques de vidéos gratuites

Pexels Videos (https://www.pexels.com/videos)

Videvo (https://www.videvo.net)

Pixabay (https://pixabay.com/videos)

Coverr (https://coverr.co)

Comment réduire la taille de vos images ?

Vous avez déniché une superbe image gratuite pour renforcer votre contenu ? Il est compréhensible de vouloir l’utiliser telle quelle sur votre site. Cependant, avant de la télécharger, prenez l’habitude de vérifier son poids. Pour maximiser les performances de votre site, assurez-vous que l’image reste en dessous de 100 Ko.

Pour réduire le poids de votre image, vous pouvez utiliser des logiciels de traitement d’images plébiscités par les professionnels, tels que Photoshop, Illustrator ou GIMP. Si toutefois vous préférez une solution plus simple, optez sans hésiter pour Paint.

Redimensionner votre image avec Paint

Cet outil installé par défaut sur Windows permet d’ajuster les dimensions de votre image pour en alléger le poids. Voici les étapes à suivre :

Pour ouvrir l’Image dans Paint, faites un clic droit sur la miniature de l’image, puis sélectionnez Ouvrir avec, et ensuite sur Paint.

Capture d'écran montrant l'ouverture d'une image avec Paint

Cliquer ensuite sur Redimensionner pour accéder à l’outil de Redimensionnement.

Capture d'écran avec Paint, pour optimiser ses images pour WordPress

Une boîte de dialogue Redimensionner et incliner s’ouvre alors. Vous aurez deux options :

  • Redimensionner par pour ajuster en pourcentage.
  • Modifier la taille pour spécifier les dimensions en pixels.

Pour un ajustement en pourcentage, entrez la valeur souhaitée (par exemple, 50% pour réduire de moitié). Pour une taille spécifique, choisissez Pixels et entrez les dimensions horizontales et verticales. Cliquez sur OK pour voir le résultat. Si les proportions ne sont pas correctes, répétez les étapes.

Enregistrez l’image modifiée en cliquant sur Fichier > Enregistrer sous. Sélectionnez un emplacement, nommez l’image et choisissez le format (JPEG, PNG, etc.). Cliquez sur Enregistrer.

Assurez-vous de conserver les proportions originales de l’image pour éviter toute distorsion. Envisagez aussi de sauvegarder l’image redimensionnée sous un nouveau nom pour conserver l’original.

Réussir vos captures d’écran

Parce qu’une image vaut mille mots, les captures d’écran donnent vie à vos idées en illustrant concrètement à vos visiteurs ce que vous voulez dire (un peu comme notre image précédente). Pour capturer l’écran de votre ordinateur, tant sur Windows que sur Mac, vous avez à votre disposition différentes méthodes couramment employées.

Photo des touches d'écran, dont "Print screen"

Faire une capture d’écran sur Windows :

Capturer l’intégralité de l’écran

  • Appuyez sur la touche Impr écran (ou Print Screen).
  • Ouvrez l’application Paint et appuyez sur Ctrl + V pour coller la capture.
  • Cliquez sur Fichier > Enregistrer sous, choisissez un format (PNG, JPEG) et enregistrez.

Si vous préférez saisir une fenêtre active

  • Mettez la fenêtre souhaitée en premier plan.
  • Appuyez sur Alt + Impr écran.
  • Ouvrez Paint, collez avec Ctrl + V, puis sauvegardez comme décrit ci-dessus.

Capture d’une portion de l’écran

  • Appuyez sur Windows + Maj + S et sélectionnez la zone à capturer.
  • Ouvrez un éditeur d’image, collez avec Ctrl + V et enregistrez.

Pour des fonctionnalités plus avancées, utilisez des outils tiers comme Snipping Tool ou Snip & Sketch.

Faire une capture d’écran sur Mac

Ecran Mac

Capturer l’intégralité de l’écran

  • Appuyez simultanément sur Shift + Command + 3.
  • La capture est enregistrée sur le bureau au format PNG.

Faire la capture d’une fenêtre

  • Appuyez sur Shift + Command + 4 pour transformer le curseur en croix.
  • Pour une fenêtre, appuyez sur la barre d’espace puis cliquez sur la fenêtre.

Si vous souhaitez capturer une portion de l’écran

  • Faites glisser la croix et relâchez le bouton de la souris.
  • La capture est enregistrée sur le bureau.

Sur Mac : capture d’écran d’une fenêtre spécifique avec l’utilitaire Capture d’écran :

  • Ouvrez l’application Capture d’écran (Command + Barre d’espace, recherchez Capture d’écran).
  • Sélectionnez Fenêtre sélectionnée et cliquez sur la fenêtre à capturer.
  • Cliquez sur Capture pour enregistrer.

Astuce : utilisez Control + Command + Shift + 3 (totalité de l’écran) ou 4 (une partie de la fenêtre) pour copier la capture d’écran dans le presse-papiers au lieu de l’enregistrer.

Nommez vos images de manière descriptive

Pour améliorer le référencement et la gestion de vos images, donnez-leur des noms significatifs. Évitez les noms génériques comme image1.jpg au profit de noms tels que logo-votre-site.png ou banniere-accueil.jpg qui identifient et décrivent l’image.

Niveau de complexité supérieure pour optimiser vos images WordPress : la compression des images

Vous l’aurez compris, optimiser les images ne se résume pas à réduire leur taille. Il faut trouver l’équilibre entre des images légères et le maintien d’une qualité visuelle satisfaisante.

Pour ceux désireux d’approfondir le traitement optimal des images sur WordPress, sans pour autant se perdre dans la complexité technique, voici des méthodes accessibles :

Photofiltre et GIMP

Logos de Photofiltre et de GIMP, logiciels pour optimiser ses images sur WordPress

Ces logiciels de retouche d’image offrent une solution pratique pour ajuster la qualité et la taille des images sans compétences particulières dans le maniement d’outils de graphisme. Photofiltre est parfait pour les ajustements rapides et simples, tandis que GIMP convient mieux aux modifications plus poussées et précises.

Avec Photofiltre, réduisez la taille des fichiers JPEG en ajustant le niveau de compression. GIMP est idéal pour compresser les images PNG sans perte. Parfait pour préserver la qualité des images avec beaucoup de détails ou de texte.

Les compresseurs en ligne

TinyPNG ou Compressor.io sont des outils en ligne qui permettent de compresser les images (PNG et JPEG) sans trop perdre en qualité. Très simples d’utilisation, ils ne requièrent aucune compétence technique : uploadez votre image, laissez l’outil réduire intelligemment votre image, et téléchargez l’image compressée !

Les plugins WordPress pour optimiser vos images WordPress

Intégrez l’usage de plugins comme WP Smush, Imagify ou encore EWWW Image Optimizer pour automatiser la compression des images au moment de les télécharger sur votre site. Ces outils simplifient le processus et garantissent des images optimisées en un clic.

Intégration de médias sur WordPress

Vous avez préparé votre média, qu’il s’agisse d’une vidéo ou d’une image, pour être partagé sur votre site WordPress. Comment les intégrer facilement ? WordPress, avec son interface intuitive vous simplifie la tâche.

Intégrer vos images

  • Dans l’éditeur de contenu WordPress, cliquez sur le bouton Ajouter un média.
  • Sélectionnez une image depuis votre bibliothèque en cliquant sur Mediathèque, ou téléchargez-en une nouvelle en cliquant sur Téléverser.
  • Une fois l’image choisie, insérez-la directement dans votre article ou votre page.
  • Renseignez la balise alt pour chaque image. Rédigez pour cela une description textuelle pour favoriser l’accessibilité et le référencement. La balise title peut également être utilisée pour ajouter un titre supplémentaire à l’image, améliorant ainsi le contexte.

Intégrer vos vidéos

  • Utilisez le bloc de contenu vidéo intégré à WordPress.
  • Ou, si vous préférez, copiez simplement le lien de la vidéo depuis des services externes comme YouTube ou Vimeo, et collez-le dans l’éditeur. WordPress s’occupera du reste.

Intégration de PDF

Si vous images sont en format PDF, vous pouvez utiliser des plugins spécifiques tels que PDF Embedder ou Embed Any Document.

Optimiser les images pour WordPress : à vous de jouer !

Vous disposez maintenant des bases pour traiter vos images afin qu’elles accomplissent leur mission essentielle : magnifier votre message et devenir les pièces maîtresses de votre communication. Rappelons les différentes facettes de cette étape essentielle pour la vitesse de chargement de votre site et l’expérience utilisateur :

  • Choisir des formats d’image adaptés à chaque situation.
  • Respecter le droit d’auteur en utilisant des ressources gratuites et légales.
  • Réduire la taille des images pour accélérer le chargement de votre site.
  • Créer des captures d’écran pour illustrer vos idées de manière unique.
  • Nommer vos images de manière descriptive pour améliorer le référencement.
  • Optimiser vos images WordPress en appliquant des astuces avancées comme la compression d’images.

Un dernier petit conseil : vérifiez régulièrement le poids et la qualité de vos images pour maintenir la performance de votre site. Pour aller au-delà de ces fondamentaux, l’agence Subotaï vous propose son expertise complète en matière de qualité visuelle et de performance de votre site internet. Nous pouvons enrichir vos compétences et donner une nouvelle dimension à votre présence en ligne. Visitez notre page sur la création d’identité visuelle et découvrez comment nous pouvons vous accompagner pour que votre site web se démarque.

Plus d'articles