Optimiser les images pour le web en 5 étapes

Tutoriel : comment optimiser ses images web avant de les intégrer dans son site WordPress ?

ajouter article wordpressVoici un tutoriel vous expliquant comment préparer vos images avant de les intégrer dans une page web. Cette étape essentielle est bien souvent mal réalisée, ce qui peut pénaliser de manière significative le référencement et l’utilisation d’un site. Apprenez à optimiser vos images web.

NOTE : Ce tutoriel a été mis à jour pour la sortir de WordPress 5


ÉTAPE 1 – Avant de choisir une image, penser à Repérer les contraintes de taille et de format en fonction de la zone d’intégration

L’image que vous allez devoir intégrer doit respecter des règles en fonction de son utilisation (vignette, photo de diaporama, picto…)

  1. Repérer le style de l’image recherchée de manière à ce qu’elle respecte la charte graphique de votre site (couleur, zoom, thématique…)
  2. Noter le format dont vous avez besoin (Portrait, paysage, Diaporama, vignette carrée…)
  3. Relever la taille dont vous avez besoin (si vous remplacez une image pensez à vérifier la taille de l’ancienne image en retrouvant l’image dans vos médias – voir copie écran ci-dessous)

Optimiser images web

Maintenant que vous connaissez le style, la taille et le format de l’image que vous devez intégrer, vous pouvez choisir vos images. Si possible, choisissez des images personnelles pour vous démarquer mais aussi pour éviter les problèmes de Copyright

 

ÉTAPE 2 – Bien nommer les fichiers images pour éviter les problèmes d’affichage et améliorer son référencement

Pourquoi bien nommer les images (et ses vidéos) avant de les importer dans votre WordPress

  • Pour éviter les erreurs 404 liées aux caractères spéciaux non lus par certains navigateurs
  • Afin d’optimiser le référencement avec des mots clés
  • Pour le confort de vos visiteurs qui auront une information précise
  • Pour vous aider à la gestion de vos images en les identifiant facilement

Comment renommer ses fichiers médias image ?

  • La règle la plus importante est de ne jamais utilisez d’espaces, d’accents ou de caractères spéciaux. Il est nécessaire de respecter cette règle pour tous les types de fichier utilisés sur le web : PDF, vidéo, ZIP… Le non respect de cette consigne peut provoquer des problèmes d’affichage de votre site sur certains navigateurs.
  • Il est préconisé de n’utiliser que des minuscules lorsque vous nommez vos fichiers afin d’avoir des url (adresse de l’image) propre mais aussi pour palier à certains problème que peuvent entrainer les majuscules lors des sauvegardes de votre site (perte de données).
  • Vos noms de fichiers ne doivent pas contenir d’espace, il est conseillé de les remplacer les espace par des tirets hauts (-). Le fait de séparer vos mots plutôt que de les coller permet une meilleure identification des mots par les moteurs de recherche ce qui est un atout pour votre référencement.
  • Nommez vos images en fonction de leur contenu pour améliorer votre référencent et vous aider lors de la manipulation de vos fichiers ; en lisant le nom du fichier, vous devez savoir de quelle image il s’agit.

ÉTAPE 3 – Optimiser le format de vos images dans un logiciel spécialisé afin d’ajuster leur taille et optimiser leur résolution

Le poids des images se mesure en Ko. Vos images pour le web devraient avoir un poids inférieur à 300ko excepté pour quelques cas. Les grandes images de fond ou vos larges diaporama peuvent avoir des images plus lourde à cause de leur taille. Dans la pratique la plus part des images sont au dessous de 150 Ko si elles ont été correctement optimisées pour le web.

L’idée est de réduire au maximum le poids de vos fichiers images tout en conservant la meilleure qualité possible.

Pourquoi réduire le poids de vos images ?

  • Pour accélérer le temps de chargement de vos pages et ainsi améliorer l’expérience de navigation de l’internaute
  • Afin de booster votre trafic en évitant la fuite des internautes impatients ou ayant une connexion limitée (via le mobile en particulier)
  • Pour faciliter la gestion de votre site (sauvegardes plus simples et plus rapides, réduction des générations automatiques des formats images inutiles…)

Comment réduire le poids de vos images ?

  1. La première étape pour optimiser une image sera de la réduire et/ou de la recadrer pour que sa taille soit la même que le format final dans lequel elle apparaitra sur votre site. Il est inutile de mettre une images plus grande que son format d’affichage final.
  2. La deuxième étape, un peu plus compliquée à appréhender, consiste à bien compresser votre image en choisissant le bon format (jpg, png, gif..) et la bonne compression. Cette étape fera vraiment la différence entre un site « amateur » et un site « pro ». C’est pourquoi, si vous voulez que votre projet web évolue dans la cours des grands, vous n’y échapperez pas !.

Quels logiciels utiliser pour redimensionner vos images ?

Je vous mets ci-dessous quelques logiciels en ligne facile à utiliser ainsi qu’un tutoriel avec le logiciel Gimp et Photoshop.

Logiciel gratuit optimisation image web

WordPress possède un outil basique interne pour retoucher vos images mais celui-ci n’est pas du tout en capacité d’optimiser une image correctement. Il est maintenant temps d’adopter un vrai logiciel pour préparer vos images avant de les envoyer sur votre WordPress.

ÉTAPE 4 – Intégrer vos images sur votre WordPress

Maintenant que vous avez des images au bon format, en accord avec votre charte graphique, nommées judicieusement en respectant les normes, compressées habilement pour être légère, il vous reste à les intégrer dans vos pages WordPress.
Un tutoriel complémentaire vous aidera à intégrer vos images dans WordPress sans faire d’erreur – Comment intégrer un média dans une page WordPress ?

Pensez à supprimer les images que vous remplacez dans vos médias et toutes celles que vous n’utilisez pas. Ceci évitera de surcharger inutilement votre serveur et ainsi de faciliter la gestion de vos données.

ÉTAPE 5 – Comment optimiser les images déjà intégrées sur un site internet

Vous vous êtes peut-être rendu compte après la lecture de ce tutoriel que cela fait des mois que vous intégrez de « mauvaises » images sur votre WordPress. Cette pratique risque de poser de sérieux problèmes d’affichage, de référencement ou de gestion de votre site. Comment pouvez-vous remédier à cela ?

Une technique fastidieuse consiste à reprendre toutes vos images, les effacer du serveur et les réintégrer sur les pages concernées une fois optimisées.

Une autre technique consiste à utiliser le plugin EWWW Image Optimizer. Il est limité dans sa version gratuite mais efficace pour recalibrer vos images et nettoyer vos medias. L’utilisation de l’outil est un peu sensible n’hésitez pas à demander conseil à votre Webmaster.


Pour voir des exemples de blog WordPress rendez-vous sur la page des créations de la bécane WEB – voir des exemples

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *