Comment optimiser ses images pour le web ?
Les fichiers image volumineux sont plus longs à télécharger et peuvent nuire aux performances de votre site web. En nuisant aux performances et surtout à la vitesse de chargement d'une page, des images trop lourdes pèsent donc sur le bon référencement d'un site web. C'est même l'un des principaux facteurs d'un temps de chargement excessif sur une page web !
Pourtant, les images sont essentielles sur le web, pour de nombreuses raisons et surtout pour l'expérience utilisateur.
Voici ce que vous pouvez faire pour optimiser vos images et réduire leur impact sur le SEO sans compromettre la qualité.
Pourquoi est-il important d'optimiser les images pour le web ?
Les images sont essentielles pour le design et l'expérience utilisateur d'un site web. Cependant, si elles ne sont pas optimisées, elles peuvent avoir plus de points négatifs que d'avantages.
Pour l'expérience utilisateur du site web
La présence d'images permet de rompre la monotonie d'une page et de retenir l'attention de l'utilisateur. De nombreuses études ont montré qu'une page web contenant des images a plus de chances d'être lue qu'une page sans images, et surtout, qu'elle affiche un meilleur temps de séjour (dwell time).
Les images occupent une place importante dans le design d'un site web. Une image bien choisie peut tout changer et donner à l'internaute un sentiment de proximité ou d'appartenance à une marque.
Les images permettent d'expliquer un concept, une idée ou un produit sans utiliser de texte. Parfois, il est plus facile et plus efficace de montrer que d'expliquer avec des mots. Cela permet de gagner du temps tant pour l'utilisateur que pour le webmaster qui a rédigé le contenu !
Mais trop d'images entraîne un temps de chargement excessif, et l'internaute n'est pas patient. Si elles sont trop lourdes, les images peuvent donc faire augmenter le taux de rebond de la page.
L'importance des images en e-commerce
La présence d'images est encore plus importante sur un site de vente en ligne, où le produit doit être vendu sans être touché ou testé.
En matière d'e-commerce, il est essentiel d'avoir des images de bonne qualité pour convaincre l'utilisateur d'acheter un produit. Il est donc important de soigner la composition, l'éclairage et la retouche de l'image pour le rendre le plus attractif possible et créer un sentiment de confiance avec l'acheteur.
Problème : les images de bonne qualité sont souvent très lourdes, et donc, longues à s'afficher.
Pour la performance du site web
Pour qu'un site soit efficace, il est essentiel que le temps de chargement d'une page soit rapide, même si elle contient de nombreuses images.
Comme on l'a vu dans les modules précédents, le temps de chargement moyen d'une page web doit être inférieur à 2 secondes. Au-delà, l'utilisateur risque de quitter la page (on parle de 80% de perte !).
Pour le référencement sur Google
Un site web qui se charge trop lentement sera pénalisé par Google dans son classement SEO. En effet, les moteurs de recherche prennent en compte le temps de chargement d'une page dans leurs algorithmes. Une page lente sera moins bien positionnée qu'une page rapide.
Le poids d'une image a un impact direct sur le temps de chargement d'une page web. Une image trop lourde peut ralentir l'affichage de tous les autres éléments de la page, voire rendre celle-ci inaccessible !
Pour un bon référencement, Google tient compte de la vitesse des pages lorsqu'il les indexe. Plus elles se chargent rapidement, mieux elles seront référencées.
Le référencement SEO des images sur Google
Les moteurs de recherche comme Google ou Amazon référencent également les images. Optimiser vos images passe donc par quelques conseils SEO.
Renommer les fichiers images
Oui, c'est important. Un fichier qui s'appelle DSC_546468.jpg sera moins bien référencé qu'un fichier qui se nomme coucherdesoleil.jpg ! Même si Google fait beaucoup de progrès en reconnaissance des images, le contenu textuel reste son principal indice.
L'attribut ALT des images
Autre balise essentielle en SEO : l'attribut ALT ou "alternatif". Ce petit texte s'affiche au survol des images par le curseur de la souris, mais aussi quand l'image est "cassée". Il est également lu et vocalisé par les outils d'accessibilité destinés aux malvoyants. Google s'appuie fortement sur cet attribut pour bien référencer votre image dans Google Images.
Vous savez sûrement qu'il est possible d'ajouter un lien sur une image. Mais saviez-vous que si l'image n'a pas d'attribut ALT, l'ancre de lien sera vide ? En clair, si vous voulez qu'un backlink placé sur une image "compte", pensez à renseigner la balise ALT !
Le Title
L'attribut title est le texte qui apparaît lorsque vous passez votre souris sur une image. Comme l'attribut ALT, il est très important pour les outils d'accessibilité et Google.
La légende
La légende est le texte qui accompagne une image, généralement en bas. Elle est moins importante que l'attribut ALT ou le titre, mais elle peut néanmoins aider Google à comprendre le sujet de votre image.
Le contexte sémantique
Lorsque vous ajoutez une image à une page, prenez le temps d'écrire quelques lignes de texte autour de celle-ci. Cela donnera à Google plus d'indices sur le sujet de l'image.
Vous pouvez faire le test : il est possible de référencer une image dans Google Image avec un texte alt, une légende et un contexte qui n'ont rien à voir avec son contenu... Google ne s'appuie donc pas sur l'image elle-même (ou du moins, pas encore) mais sur le texte qui existe autour.
Compresser les images pour le web
Comme nous l'avons vu, les images sont essentielles pour un site web, pour l' expérience utilisateur et pour le référencement sur les moteurs de recherche.
Cependant, une image trop lourde va ralentir le temps de chargement d'une page, ce qui va avoir un impact négatif sur les performances, sur l' expérience utilisateur ainsi que sur le référencement du site.
Pour éviter cela, il est essentiel d'optimiser les images avant de les télécharger sur votre site internet ou votre blog, et cela passe par la compression des images.
Optimiser le poids des images : qu'est-ce que cela signifie exactement ?
Quand on parle de "poids" d'une image, on fait en général référence à la taille d'un fichier, mesurée en kilo-octets (Ko) ou en méga-octets (Mo). Plus le poids est faible, plus l'image se charge rapidement.
Ce n'est pas la même chose que la taille au sens des "dimensions" de l'image.
La compression d'une image consiste à réduire son poids sans nécessairement modifier sa taille à l'écran.
Compression des images : une perte de qualité ?
Lorsqu'une image est compressée sans réduire la taille, certains détails peuvent être perdus. Cependant, l'œil humain n'est pas très sensible à ces changements subtils, et il est souvent possible de compresser une image de manière significative sans perte de qualité notable.
Il existe deux principales méthodes de compression : sans perte et avec perte.
Compression d'image sans perte
Avec cette méthode, il est possible de réduire la taille d'une image sans perte de qualité. Logiquement, la réduction est généralement moins importante que dans la compression avec perte.
Compression d'image avec perte
C'est le type de compression le plus courant. Il permet d'obtenir une réduction très importante du poids d'une image, tout en conservant une qualité acceptable pour la plupart des utilisateurs.
Exporter une image au bon format pour ses pages web
Maintenant que vous savez comment optimiser vos images, vous devez les exporter dans un format adapté à une utilisation sur internet.
Les formats d'images adaptés au web
Un format d'image adapté au web signifie compatible avec les navigateurs web, avec une bonne compression et qui ne pèse pas trop lourd.
Les formats d'image les plus courants pour le web sont JPEG et PNG.
Le format JPEG pour les photographies et images de grande qualité
Le format JPEG (Joint Photographic Experts Group) également appelé JPG est le mieux adapté aux photos ou aux images comportant de nombreuses couleurs. C'est probablement le format d'image le plus courant sur internet. Il est pris en charge par tous les navigateurs web, et son niveau de compression peut être facilement ajusté pour trouver un bon équilibre entre qualité et poids.
Le format PNG pour les besoins de transparence
Le PNG est un format qui utilise une compression sans perte et prend en charge la transparence. Il est donc idéal pour les images telles que les logos, où il est important de préserver la transparence.
Le format GIF pour générer des animations
Le GIF (Graphics Interchange Format) était autrefois le format d'image le plus populaire sur le web. Cependant, il est aujourd'hui largement remplacé par JPEG et PNG pour la plupart des utilisations. Le format GIF est encore utilisé dans un but particulier : générer des animations simples (par exemple, une roue qui tourne pendant le chargement d'une page).
En général, vous devriez utiliser le format JPEG pour toutes vos photos et le format PNG pour tout le reste
Le seul cas où vous devriez utiliser le format GIF, c'est si vous devez créer une toute petite animation (un GIF animé).
Le format WebP, la future norme ?
WebP est un format d'image relativement nouveau développé par Google. Il est basé sur le codec VP8 (initialement développé par On2 Technologies puis racheté par Google) et offre une meilleure compression que JPEG tout en conservant une très bonne qualité
Selon Google, les images WebP sont 26% plus légères que les JPEG à qualité équivalente.
Redimensionner une image pour le web
La taille d'une image correspond à sa largeur et à sa hauteur en pixels. Une image pour le web doit avoir de bonnes dimensions pour s'intégrer parfaitement à votre design sans être trop grande ou trop petite.
Pour connaître les dimensions en pixels d'une image, faites un clic droit et examinez ses propriétés.
Quelle taille d'image pour le web ?
Quand vous créez une image, elle a généralement une résolution beaucoup plus élevée que nécessaire à son utilisation sur le web.
En webdesign, pour éviter les pertes de qualité, il faut travailler du plus grand vers le plus petit : l'image avec la résolution maximale va servir à créer ses déclinaisons. Si vous essayez d'agrandir une petite image, vous allez constater une perte de qualité très visible. C'est dû aux algorithmes de reconstruction d'une image, qui ne peuvent pas extrapoler de manière très fine les pixels manquants dans une image.
La taille d'une image sur un site web dépend du but dans lequel elle est utilisée. Par exemple, une image d'arrière-plan doit être suffisamment grande pour couvrir la totalité de la page, même si elle est affichée à une taille réduite.
Les images pour le responsive design
Attention au responsive design : vous devez partir de la taille d'écran la plus grande ! Une image trop grande sur un téléphone portable sera lente à charger. À l'inverse, une image trop petite sur un ordinateur de bureau apparaîtra pixellisée.
Vous pouvez redimensionner automatiquement l'affichage des images de votre site web avec une règle CSS en fonction de la taille des écrans.
Quelques outils pour optimiser ses images pour le web
Illustrer un article de blog doit pouvoir se faire rapidement. Voici quelques logiciels utiles pour vous aider à optimiser vos images pour le web et le SEO.
Imagify
Imagify est un optimiseur d'images en ligne gratuit qui vous permet de réduire la taille de vos images sans perdre en qualité. Vous pouvez également utiliser cet outil pour convertir une image d'un format à un autre (PNG en JPEG, par exemple).
TinyPNG et TinyJPG
Il offre une bonne compression d'images JPEG et PNG tout en conservant leur qualité. Vous pouvez utiliser cet outil gratuitement pour l'optimisation de 20 images par semaine, puis vous devez payer pour continuer à l'utiliser.
ImageOptim
Cet outil est disponible gratuitement sur Mac et Windows et vous permet d'optimiser vos images sans perdre en qualité. Il offre aussi une option de traitement par lots pour l'optimisation de plusieurs images en même temps, ce qui est pratique quand on gère un site internet.
Adobe Photoshop
Adobe Photoshop est un outil indispensable pour tous ceux qui souhaitent créer ou modifier des images de haute qualité. Il offre de nombreuses options pour optimiser les images pour le web : vous pouvez les redimensionner, les recadrer, changer leur format, les compresser, etc.
En revanche, il est très cher : si vous avez besoin d'optimiser une image, préférez les outils gratuits. Même s'ils peuvent être utilisés pour une optimisation, les logiciels de la suite Adobe sont surtout à réserver aux créateurs d'images.
Adobe Illustrator
Adobe Illustrator est un logiciel de conception graphique vectorielle. Contrairement à Photoshop, qui travaille avec des pixels, il utilise des formules mathématiques pour dessiner des formes : c'est un format vectoriel. Il est ainsi possible de créer des images de toutes tailles sans perdre en qualité.
Conclusion -à suivre
Pour conclure, l'optimisation des images est une étape importante dans la création d'un site internet, la publication de fiches produit et le blogging. En effet, les images représentent une grande partie du poids d'une page web, ce qui peut ralentir son temps de chargement.
En réduisant la taille et le poids de vos images, vous pouvez améliorer le temps de chargement de vos pages web. Cela va améliorer l'expérience utilisateur sur votre site, faire baisser votre taux de rebond et favoriser votre référencement.
Mais les images peuvent aussi être référencées : elles peuvent apparaître dans les résultats de recherche de Google Image, par exemple. C'est une autre bonne raison de les optimiser !
