Optimiser les images : guide rapide en 3 étapes clés

Mélanie Robin
18 janvier 2023
11h58
0 commentaire

Mise à jour le 23 janvier 2024

L'art d'optimiser les images pour le web est devenu crucial dans l'ère numérique d'aujourd'hui. Comme le dit l'adage, une image vaut mille mots, et Google semble en être tout à fait conscient. En effet, selon le géant de la Mountain View, les images sont directement liées à 22,6 % des recherches effectuées sur sa plateforme. Si vous avez pour objectif d'établir une présence en ligne solide et de garantir une expérience utilisateur optimale, l'optimisation de vos visuels demeure une étape essentielle à ne pas négliger. Il est temps de dire adieu aux pages web qui se chargent lentement, perturbent la navigation de vos visiteurs — et qui font râler Google ! Dans cet article, nous allons esquisser le portrait idéal de l'image optimisée.

Que signifie « optimiser une image » ?

Optimiser les images pour le web signifie réduire la taille des fichiers images tout en préservant la qualité visuelle dans le but de ralentir le temps de téléchargement des pages.

Pourquoi optimiser les images ?

Que vous soyez propriétaire d'un site vitrine ou d'un e-commerce, les images font partie intégrante de la conception d'un site internet. En effet, ces dernières relatent des histoires que les mots ne peuvent pas raconter. Il faut savoir que la recherche visuelle est de plus en plus appréciée par les internautes. Voici 5 raisons pour lesquelles vous devriez optimiser les visuels de votre site web :

illustrer vos propos et capter l'attention de façon pertinente ;
rendre l'expérience utilisateur agréable sur votre site ;
réduire le temps de chargement des pages web ;
améliorer votre visibilité organique dans la recherche par image ;
augmenter les visites sur votre site.

De plus, vous réduirez le temps de réponse du serveur et le nombre de requêtes HTTP. Un bon point pour le score SEO global de votre site web. Vous attirerez du trafic qualifié sur votre site depuis Google Images (Bing, etc.). Selon moi, les visuels influencent vraiment la manière dont les internautes interagissent avec votre contenu. Elles détiennent un pouvoir : celui de générer de l'engagement, voire des ventes.

Les étapes de l'optimisation des images

Alors, comment apparaître dans Google Images ? Voici la recette.

# 1 Compresser et redimensionner votre image

La compression réduit le poids du fichier en supprimant les données inutiles et améliore la rapidité d'un site web. Il est aussi possible de modifier les dimensions de l'image si elle est plus grande que la taille requise pour une page web. Vous éviterez de surcharger votre serveur : un geste simple, mais loin d'être anodin pour notre planète. Comment faire ? Il existe des outils en ligne conçus pour compresser et redimensionner vos visuels. J'utilise la plateforme en ligne gratuite Squoosh. Facile à prendre en main, elle est complète et accessible sans inscription. Si votre site de vente en ligne intègre de nombreux visuels, il sera nécessaire de choisir la version premium de cet outil.

Capture d'écran de la page d'accueil de la plateforme Squoosh.

# 2 Nommer votre image

Les noms de vos fichiers ont leur importance ! Bien que cela ne transforme pas radicalement votre image auprès de Google, c'est un facteur essentiel pour améliorer l'expérience utilisateur sur votre site. La raison ? Cela permet aux utilisateurs et aux moteurs de recherche d'identifier rapidement le contenu de vos fichiers sans devoir les ouvrir. C'est quand même très utile d'avoir des noms de fichiers évocateurs pour les retrouver en un coup d'œil. Optez pour des titres de fichiers simples, mais significatifs, en choisissant des termes qui reflètent l'essence de votre image.

➡️ Ex. : un fichier qui s'intitule « P5241684.jpg » ne parle à personne.

Préférez plutôt : « appareil-photo-numerique.jpg ».

# 3 Renseigner l'attribut ALT

Les images jouent un rôle important en SEO (Search Engine Optimization) pour attirer des visiteurs sur votre site web. Cette description de texte alternatif, qui n'apparaît pas à l'écran, fournit des informations aux utilisateurs et aux moteurs de recherche sur le contenu de votre visuel. De plus, la balise ALT rend vos contenus accessibles aux personnes malvoyantes (via des lecteurs d'écran) ou aux internautes qui rencontrent des problèmes d'affichage. Pour bien utiliser l'attribut ALT, voici quelques conseils :

décrivez l'image de façon précise ;
insérez un mot-clé ou une expression clé pertinente ;
évitez la surcharge de mots-clés ;
écrivez une description de 4 à 7 mots.

➡️ Ex. : préférez « cadre-photo-personnalise-en-bois » au lieu de « cadre-photo ».

Il n'est pas nécessaire de remplir cette balise pour les images purement décoratives. Pour illustrer, voici un exemple de l'emplacement de la balise ALT dans WordPress.

Capture d'écran : emplacement du texte alternatif sur le CMS WordPress (depuis la médiathèque).

WordPress et d'autres systèmes de gestion de contenu (CMS) offrent un espace dédié pour la saisie de la description de cette balise. Enfin, n'oubliez pas d'indiquer une légende : ce texte explicatif apparaîtra en dessous de l'image. Il offre aux lecteurs un complément d'information sur le contenu affiché à l'écran.

Ce qu'il ne faut pas faire

Lorsqu'il s'agit d'optimiser les images de son site web, certaines pratiques sont à proscrire si l'on veut bien faire les choses.

Choisir un format d'image inapproprié

Sur le web, vous utilisez différents types de visuels qui nécessitent des formats appropriés. Voici un aperçu des formats courants :

Le format .jpg pour une photographie ;
Le format .png pour une image simple et le fond transparent ;
Le format SVG pour un logo, une illustration ;
Le format GIF pour une image animée ;
Le format WEBP est polyvalent et peut supporter divers types de formats d'images.

Inclure des espaces, des caractères spéciaux et des accents

Restez sage comme une image : évitez d'utiliser des caractères spéciaux tels que &*#%^ dans le nom de vos fichiers et dans le texte alternatif.

1- Ces caractères spéciaux peuvent créer des difficultés avec certains navigateurs et parfois empêcher les utilisateurs d'accéder aux fichiers.

2- Votre balise ALT risque d'être illisible pour les utilisateurs.

Ne pas séparer les mots

En séparant les mots, votre contenu sera plus facilement repérable par les moteurs de recherche et clair pour les internautes. Bien que les opinions divergent à ce sujet, il est conseillé d'utiliser le tiret (situé sur la touche 6 du clavier) pour séparer les termes.

➡️ Exemple : tirage-photo-paris

Votre nom de fichier sera lu comme trois mots distincts par les robots de Google, ce qui s'applique également à l'attribut ALT.

Publier des visuels inutiles à la qualité douteuse

Lorsque l'on affirme qu'une image vaut mille mots, cette expression va bien au-delà d'une simple formule. Pour sortir du lot, soyez créatif dans la présentation de votre message. Optez pour des images ou des photos libres de droits qui sont visuellement captivantes et qui correspondent à vos objectifs. Cependant, l'idéal est d'utiliser vos propres visuels. Si vous gérez un site e-commerce, il est vivement conseillé de réaliser des prises de vue professionnelles de vos produits. Vos images doivent mettre en valeur vos produits et inciter à l'achat, et non l'inverse. Des visuels de haute qualité véhiculent les valeurs de votre marque et établissent un lien entre vous et vos clients. Google favorisera les images personnalisées pour leur caractère unique et original.

Écrire directement sur les visuels

Assurez-vous de toujours publier des images claires et exemptes de tout élément distrayant (comme du texte ou un logo). La raison ? Les algorithmes de recherche et les lecteurs d'écran ne peuvent pas identifier le texte incorporé dans une photo ou une illustration. Cela implique que les mots-clés présents dans votre visuel n'influenceront pas votre positionnement SEO. Si vous avez des informations importantes à faire passer, ajoutez du texte brut dans votre page à des fins d'accessibilité

Oublier d'adapter les visuels pour la version mobile

Aujourd'hui, l'utilisation de téléphones portables et de tablettes pour naviguer sur Internet est universelle. Un site web non adapté aux appareils mobiles entraîne une perte de trafic significative. De plus, Google considère désormais l'optimisation mobile comme un critère important dans le classement des sites. Veillez à ce que vos images soient nettes sur tous les types d'écrans, quelle que soit leur taille.

Quels sont les différents types d'images web ?

Faisons le point sur les divers formats de fichiers dont vous devez tenir compte pour optimiser les images de votre site web.

Les images, les photos et les illustrations

Que ce soit pour les produits de votre boutique en ligne ou de votre site e-commerce, des images bien choisies aident vos clients à visualiser et à s'imaginer avec vos produits. Pour les pages statiques et les articles de blog, les visuels enrichissent vos textes et rendent votre contenu plus attrayant et engageant.

Les infographies

Capture d'écran : exemple d'infographie (source : Rawpixel.com).

Les infographies sont un excellent moyen de présenter des données de manière concise, en mélangeant texte et éléments graphiques. Elles permettent de clarifier des sujets complexes de façon simple et marquante. Vous pouvez utiliser divers types d'infographies, comme :

des infographies informatives ;
des infographies chronologiques ;
des infographies statistiques ;
et d'autres encore.

Leur popularité grandissante est à noter ! Personnellement, je trouve que Piktochart est un outil particulièrement efficace pour créer des infographies en quelques clics.

Les captures d'écran

Également connue sous le terme de « screenshot », une capture d'écran est une image de ce qui apparaît à un moment donné sur l'écran d'un ordinateur ou d'un appareil mobile. Elle est idéale pour illustrer l'utilisation d'une fonction spécifique, fournir des exemples ou aider à résoudre un problème. Actuellement, mon outil préféré pour cela est l'application Chrome Screenshoter.

Les images animées

Cela peut inclure des GIFs ou des petites animations. Elles sont utilisées pour attirer l'attention ou pour expliquer un concept de manière dynamique.

Les bannières

Les bannières web peuvent prendre différentes formes et tailles, mais elles sont souvent rectangulaires. L'objectif principal d'une bannière web est de promouvoir une marque, un produit, un service ou un événement. Elle vise à attirer l'attention des visiteurs du site et à les inciter à cliquer sur la bannière pour en savoir plus ou effectuer une action spécifique.

Les images 3 D

Les images 3D, ou images tridimensionnelles, sont des représentations graphiques qui offrent une perception de profondeur et de volume. Elles sont largement utilisées dans divers domaines, tels que les jeux vidéo, l'animation, l'architecture, le design d'intérieur, la visualisation de produits, les films, etc. L'émergence du Web 3.0, souvent associée à des concepts comme la réalité augmentée (RA) et la réalité virtuelle (RV), est étroitement liée à l'utilisation et au développement des images 3D.

Où télécharger des images libres de droits et gratuites ?

Vous êtes à la recherche de photos pour votre site internet, blog, e-book ou newsletter ? Il existe de nombreuses plateformes offrant des images gratuites et libres de droits pour un usage commercial. Un petit rappel important : assurez-vous de toujours vérifier les conditions d'utilisation pour chaque visuel téléchargé afin de garantir une utilisation légale et conforme à la licence. Pour optimiser les images de manière efficace, privilégiez l'utilisation de visuels uniques, de préférence les vôtres. Voici trois banques d'images que j'apprécie utiliser moi-même pour apporter une touche conviviale et chaleureuse à mes projets !

Pexels

Pexels propose une vaste collection d'images gratuites de haute qualité prises par des photographes professionnels. Tous les fichiers sont sous licence Pexels, ce qui vous permet de les utiliser gratuitement, même à des fins commerciales. Mon conseil : utilisez des mots-clés précis pour dénicher la photo idéale. Alors, êtes-vous prêt à raconter votre histoire en images ?

Unsplash

Unsplash recense des photographes tous plus talentueux les uns que les autres. Là aussi, vous n'avez pas à vous soucier des problèmes de droits d'auteur puisque les clichés sont libres d'utilisation sans aucune attribution requise. Ce ne sont pas moins de 3 millions de visuels et designs pour toutes sortes de projets. Vous n'avez plus d'excuses pour trouver l'image pépite qu'il vous faut.

Capture d'écran de la plateforme Unsplash : exemples de photos pour la requête « décoration ».

Picjumbo

Picjumbo offre des visuels haute définition pris par le photographe professionnel Viktor Hanacek, le fondateur du site. Vous y trouverez une large sélection de belles images pertinentes pour votre projet personnel ou commercial : photos de nature, photos de paysages urbains, portraits humains, photos culinaires, etc. Il y en a pour tous les goûts ! C'est par ici pour découvrir l'une des meilleures banques de photos gratuites.

Comment vérifier le temps de chargement d'une page ?

La rapidité de chargement est un élément clé pour garantir une excellente expérience utilisateur et pour optimiser votre référencement. Si cela semble compliqué, rassurez-vous : des outils en ligne existent pour évaluer la vitesse de votre site web. Dans cet article, je mets en lumière Google PageSpeed Insights. Google PageSpeed Insights est un outil gratuit qui évalue les performances de votre site web sur ordinateurs et appareils mobiles. En entrant l'URL de votre site, vous recevez un score global. L'outil propose des recommandations pour améliorer les temps de chargement de vos pages. Il permet également de consulter des indicateurs spécifiques tels que le temps d'attente avant réception du premier octet, la taille totale de la page, la réactivité du serveur, entre autres. Ces informations sont précieuses pour détecter les aspects à améliorer. C'est facile et direct !

verifier-la-vitesse-de-chargement-site-web

Capture d'écran de l'interface de l'outil Google PageSpeed Insights.

Ce qu'il faut retenir

Optimiser les images, c'est adopter une stratégie gagnante pour votre site web. Chaque image optimisée améliore l'expérience utilisateur pour un chargement plus rapide et fluide. C'est aussi un coup de pouce pour votre SEO : une image bien optimisée, c'est une meilleure visibilité sur les moteurs de recherche. Et n'oublions pas l'impact visuel ! Des images de qualité captent l'attention et transmettent votre message avec clarté et pertinence. Plus qu'une simple formalité technique, c'est devenu un geste écologique significatif. Alors, prenez le temps de peaufiner vos visuels. Cela fera toute la différence, pour vos utilisateurs comme pour votre entreprise :

choisir un visuel approprié et unique ;
compresser et redimensionner l'image ;
nommer votre image ;
renseigner l'attribut ALT.

Partager sur

Besoin d'aide pour optimiser vos images ?

Contacter Mélanie