En janvier 2019, il y avait plus de 1,94 milliard de sites Web. C’est beaucoup de concurrence. Quelle est la meilleure façon de se démarquer ? Belles images. En fait, la vision domine tous les autres sens lorsqu’il s’agit d’interagir et d’absorber des informations.
Voici trois faits rapides pour vous aider à comprendre à quel point les images sont critiques pour les gens (et pour le référencement) :
- 90% de toutes les données transmises par le cerveau sont visuelles.
- Le cerveau humain traite une image dans le même temps qu’il faudrait pour lire 1000 mots. (Oui, il s’avère que le vieil adage est enraciné dans des faits scientifiques.)
- La valeur de rappel du contenu visuel même après trois jours est de 65 %, tandis que la valeur de rappel du texte écrit n’est que de 10 %.
Étant donné que la majeure partie du volume de recherche provient des téléphones et que la durée d’attention des personnes a été réduite à huit secondes, il est essentiel que les sites Web soient en mesure d’offrir une expérience utilisateur rapide, sans friction et agréable.
L’optimisation de l’image est une partie importante de ce puzzle.
Que peut faire l’optimisation d’image pour mes utilisateurs (et pour le référencement) ?
- En ralentissant votre site en quelques secondes, vous pouvez réduire votre taux de rebond et améliorer la rétention du site.
- Cela aide à améliorer la vitesse de chargement des pages, ce qui est un facteur de classement important de Google.
- Cela peut aider à améliorer la proéminence de vos mots-clés. En savoir plus à ce sujet ici.
- Il aide à la recherche d’images inversée, ce qui peut être une grande valeur ajoutée, surtout si votre entreprise est basée sur les produits.
- De nombreux appareils et ordinateurs de bureau utilisent des écrans haute résolution, ce qui augmente le besoin d’images de bonne qualité.
Conseils d’optimisation d’image de base
Voici quelques conseils que n’importe qui peut appliquer à n’importe quel type de site (même WordPress), vous n’êtes donc pas uniquement à la merci de ses développeurs et concepteurs.
1. Choisissez le bon type d’image : vectorielle ou raster ?
- Images vectorielles Ils sont simples, créés en utilisant des lignes, des points et des polygones. Les images vectorielles sont mieux appliquées aux formes, aux logos, aux icônes et aux images plates. Ils n’ont pas de pixellisation lors d’un zoom avant, ce qui les rend adaptés aux appareils haute résolution. En outre, vous pouvez utiliser le même fichier image sur plusieurs plates-formes (ainsi que pour la conception de sites Web réactifs) sans avoir à utiliser plusieurs variantes.
- Images raster, d’autre part, sont des images composées de grilles rectangulaires, chacune contenant plusieurs valeurs de couleur (pixels). Les images raster donnent de la profondeur aux images que vous souhaitez transmettre, leur donnant un attrait émotionnel et psychologique car ces images semblent réelles. Cependant, s’ils ne sont pas bien gérés, ceux-ci peuvent grandement entraver la vitesse de chargement de votre site ! En outre, vous devrez peut-être enregistrer plusieurs variantes de fichiers pour vous assurer qu’ils sont compatibles avec plusieurs plates-formes et qu’ils s’adaptent à des mises en page réactives.
Voici un tableau que Google a partagé pour aider à comprendre la relation pixel à octet. Bref, vous aurez une idée du poids d’une image en fonction de ses dimensions.
Source : Google.
Google a également mentionné qu’il faut quatre octets de mémoire pour fournir un pixel. Imaginez si vous aviez plusieurs images sur un seul site avec 800 X 800 pixels. notre site prendrait au moins quelque chose autour de 625 kBps. Ou en termes plus simples, imaginez un éléphant participant à une course de lapins.
En bout de ligne
Je suggérerais d’utiliser une combinaison des deux à bon escient. Un ratio idéal serait de 40% d’images vectorielles et 60% d’images raster.
2. Choisir le meilleur format d’image : SVG, JPG, PNG ou GIF ?
Meilleur format pour les images vectorielles :
SVG est la seule et la meilleure option pour les images vectorielles. Grâce à ses images plates, vous bénéficiez également d’une haute qualité facilement évolutive.
Les meilleurs formats pour les images raster :
- PNG : Produit des images de haute qualité avec des fichiers volumineux. Il ne peut être suggéré que pour les occasions où vous souhaitez enregistrer tous les détails de l’image.
- JPG : Il produit des images de bonne qualité qui ne sont pas lourdes en termes de taille de fichier. Cependant, ce sont des images avec perte, ce qui signifie que vous perdrez définitivement certains détails mineurs de l’image. JPG est sans aucun doute le format d’image préféré, vous offrant la possibilité de télécharger et de télécharger des images de manière transparente. Pour cette raison, ils sont les plus utilisés : environ 72,3% des sites Web utilisent des formats d’image JPG et la plupart des téléphones enregistrent les images sous forme de fichiers “.JPG”. Ils sont particulièrement recommandés pour les sites de commerce électronique et de médias sociaux.
- GIF : Si vous recherchez une animation, GIF est un choix idéal car il prend en charge 256 couleurs différentes choisies dans l’espace colorimétrique RVB 24 bits. À l’heure actuelle, seulement 26,6 % des sites Web utilisent des formats GIF.
Voici un tableau qui pourrait vous aider à déterminer quel format d’image est le meilleur à utiliser.
Source : W3Techs
Remarque : Les données du graphique ci-dessus datent du 15 mai 2019.
3. Redimensionner les images
Avec un nuage plein d’appareils, il est évident que les gens se méprennent sur les tailles d’image idéales.
Veuillez noter que la taille de l’image et la taille du fichier image sont deux choses différentes. Ici, nous expliquerons comment vous pouvez obtenir la taille d’image idéale (également appelée dimensions d’image).
Dans le cadre des dimensions de l’image, nous examinerons également les proportions.
Qu’est-ce qu’un rapport hauteur/largeur ?
Les proportions indiquent la largeur et la hauteur d’une image et sont écrites au format « x : y ».
Parce que c’est important?
Vous vous souvenez de la fois où vous avez essayé de redimensionner une image et de la disproportionner littéralement ? C’est exactement de cela qu’il vous sauve. Le référencement du rapport hauteur/largeur d’une image lors du recadrage ou du redimensionnement des images vous aide à maintenir la viabilité et la beauté des dimensions de l’image.
Vous pouvez vous référer à cette image créée par Shutterstock pour répertorier certains rapports d’aspect couramment utilisés.
Source de l’image et données du tableau : Shutterstock
| Ratio d’aspect | Dimensions typiques (pouces) | Dimensions typiques (pixels) | Idéal pour |
| Onze | 8×8 | 1080×1080 | Photos de profil de réseaux sociaux et écrans d’appareils mobiles |
| 3: 2 | 6×4 | 1080×720 | Photographie et impression |
| 4: 3 | 8×6 | 1024 x 768 pixels | Téléviseurs, moniteurs et appareils photo numériques. |
| 16 : 9 | 1920 x 1080 et 1280 x 720 | Présentations, moniteurs et téléviseurs grand écran |
En référence au tableau ci-dessus, il est préférable de se concentrer sur les ratios d’image 1: 1 et 4: 3 qui conviennent aux médias sociaux, aux écrans mobiles, à la photographie et à l’impression.
Vous pouvez avoir vos propres modèles de dimension basés sur le système de gestion de contenu (CMS) que vous utilisez.
Selon Squarespace, la taille la plus idéale pour l’optimisation d’image sur un CMS est de 1500 et 2500 pixels.
Voici une réponse rapide et facile pour identifier les tailles d’images les plus courantes sur le Web.
Source : Shutterstock
En bout de ligne
Par observation personnelle, je peux suggérer d’utiliser 1080 X 1080 pixels et 1500 X 2500 pixels.
Si vous êtes trop paresseux pour revoir tous ces détails, vous pouvez également essayer de redimensionner l’image à partir de la flèche dans le coin tout en appuyant sur la touche “Shift”. Cela fonctionne pour certaines plateformes.
4. Nommer les images : les bonnes pratiques
Les moteurs de recherche ont un cerveau sans yeux, donc à moins que vous ne nommiez vos images correctement, ils ne pourront pas « lire » vos images ou vous classer en conséquence. C’est là que vos mots-clés entrent en jeu. Comme je l’ai mentionné plus tôt, si vous nommez bien vos images, vous pouvez améliorer la densité des mots clés et les chances de classement.
Expliquons cela avec un exemple :
- Comment les gens enregistrent généralement les images : « Numéros et alphabets aléatoires / aléatoires », « Les fleurs peuvent danser » et « À quoi pensais-je ? »
- Comment les gens devraient enregistrer des images – “Cinq-conseils-pour-l’optimisation-des-images” et “la-méthode-idéale-pour-nommer-les-images-en-2019”
Nommez vos images en minuscules avec des tirets au milieu et ne laissez pas d’espaces. Comme vous l’avez vu, j’ai utilisé le mot-clé « optimisation d’image » dans l’exemple de « cinq conseils pour l’optimisation d’image ». Vous serez surpris de voir à quel point cela aide à se qualifier.
Cousine
Vous pouvez également utiliser les éléments suivants pour améliorer l’utilisation des mots-clés dans le contenu de votre site :
- Texte alternatif (si votre image se charge lentement, ce texte apparaît à la place de l’image afin que les utilisateurs puissent avoir une idée de ce qui devrait s’y trouver).
- Légendes (texte qui fournit une brève description, aidant les utilisateurs à en savoir plus sur l’image).
De plus, si vous avez un site de commerce électronique, vous pouvez même faire bon usage des données structurées pour donner au moteur de recherche des détails plus précis sur la couleur, le type, la taille et bien plus encore de vos produits.
5. Compresser la taille en octets des fichiers image
La compression d’un fichier est peut-être la partie la plus simple mais la plus cruciale de l’optimisation d’image, car elle est directement liée au temps de chargement du site Web. Les points un à quatre vous préparent à cette dernière étape d’optimisation de l’image.
Deux exemples en direct du temps de chargement que votre résultat peut coûter :
- Amazon.com a enregistré une baisse de 1% des ventes pour chaque augmentation de 100 ms du temps de chargement des pages.
- Google a enregistré une baisse de 20 % de ses revenus pour chaque augmentation de 500 ms du temps d’affichage des résultats de recherche.
Quelle est la taille de fichier image idéale ?
Une taille de fichier inférieure à 70 Ko est ce que vous devriez viser. Pour les gros fichiers de près de 300 Ko, le mieux que vous puissiez obtenir est une taille de fichier de 100 Ko. Cela évite que vos images ne prennent des millisecondes supplémentaires à charger, tout en vous offrant des images compressées avec perte qui ne compromettent pas la qualité visuelle.
Comment réduire la taille du fichier d’une image ?
Tout ce que vous avez à faire est de placer ces fichiers sur un site de compression de fichiers et le tour est joué. Voici quelques bons et gratuits outils en ligne pour la compression de fichiers image :
- TinyPNG / TinyJPG – (Compresser les fichiers .png et .jpg – 135 ko réduits à 43,9 ko – Crée jusqu’à 20 images à la fois – Prend en charge le dropbox)
- Optimiseur d’image – (Compresser les fichiers .png et .jpg – 135 ko réduits à 49 ko – Ne faire qu’1 fichier à la fois)
- WeCompress – (Compresse les fichiers .png, .jpg et autres – 135 ko réduit à 48 ko – Ne crée qu’un seul fichier à la fois)
- EzGif – (Compresse les fichiers .gif et autres – 2 Mio réduits à 1,77 Mio – Il ne fait qu’un seul fichier à la fois. Il vous permet également d’éditer le gif avant de le compresser).
Conseils bonus
- Utilisez des polices Web au lieu d’images avec du texte car elles sont plus belles, n’ont pas besoin de s’adapter à l’image, prennent moins de place et économisent du temps de chargement.
- Veuillez utiliser une résolution de 72 dpi pour vos images.
Notes de clôture
Vous pourriez utiliser tous ces conseils d’optimisation d’image et rester bloqué avec un site se chargeant en 13 secondes ou même pire. C’est à ce moment-là que vous voudrez peut-être vous demander :
- Ai-je besoin de toutes ces images ?
- Quelles images sont redondantes ?
- Quel est le meilleur endroit pour mettre des images sur le site ?
Le contenu du site Web, à la fois visuel et écrit, entretient une relation entrelacée qui stimule les émotions et incite les gens à s’engager davantage avec votre produit ou service. Les gens (ou du moins moi) jugent une entreprise à travers son site Web, alors n’hésitez pas à nous dire quel était le dernier site Web génial que vous avez visité. Ou qu’avez-vous fait pour optimiser l’image ?
