Optimiser les images pour le web
La vitesse de chargement d’un site internet est un facteur crucial dans la qualité de l’expérience offerte à ses utilisateurs, mais c’est également un critère dans l’algorithme de Google. Pour ces raisons, il est important de ne pas négliger cet aspect. Cet article ne traite pas uniquement l’optimisation de l’image d’un point de vue technique, mais également son optimisation au niveau sémantique afin de favoriser un bon référencement de votre site internet.
Sommaire
1 - Choisir le bon format d’image : PNG ou JPEG ?
2 - Optimiser les titres de ses images
3 - Gérer la compression de son image
4 - Optimiser la résolution de l’image
Choisir le bon format d’image : PNG ou JPEG ?
En règle général, vous n’avez besoin que de deux types d’images sur internet : PNG ou JPEG (jpg). Ces formats ont chacun leurs particularités, mais de manière simple, voici quelques critères qui pourront vous guider dans votre choix :
- Le PNG est idéal pour toutes les illustrations vectorielles et s’avère indispensable lorsque la “couche alpha” est nécéssaire, c’est-à-dire, lorsque vous avez besoin de transparence (pour votre logo, par exemple). Contrairement au JPG, le PNG gère très bien les aplats de couleurs et les tracés vectoriels (comme l’image suivante).
- Le JPEG gère de manière très efficace les couleurs d’une photographie.
Pour deux photographies identiques, l’image en JPG sera bien plus légère que l’image en PNG.
Pour résumer : privilégiez JPG pour une photographie et PNG pour une illustration ou si besoin de transparence.
Optimiser les titres de ses images
Un autre facteur important pour le SEO souvent négligé est les titres des images. “Les” titres car il y a le titre du fichier (exemple : “jolie-fleur-bleue.jpg”) ainsi que le titre alternatif (ou attribut alt de celui-ci).
La balise alt ou traducteur d’image pour Google
L'attribut alt ou titre alternatif de l’image est un attribut html à placer sur la balise de cette dernière. Cet attribut est utilisé pour l’accessibilité aux personnes malvoyantes, mais également par Google pour référencer l’image en question. Google ne pouvant pas interpréter la signification d’une image (pour le moment), une image ne comprenant pas de titre alternatif (ni un nom de fichier clair) sera très difficilement indexée dans les moteurs de recherche.
Utiliser cette balise n’est pas uniquement une bonne pratique en terme de SEO : ce message sera également affiché en clair aux utilisateurs pendant le chargement de l’image ou si celle-ci ne s’affiche pas correctement.
Cela permet donc de donner du sens à votre contenu dans le cas où l’image ne serait pas affichée pour une quelconque raison.
Le nommage du fichier
Google recherche des mots-clés que peut contenir le titre du fichier.
Il est donc préférable d’utiliser un titre avec des mots-clés concrets tels que « agence-developpement-web.jpg », plutôt que « agence.jpg », trop générique. Il est également préférable d’utiliser des « - » (tirets) pour séparer les mots, plutôt que des espaces ou encore des underscore. L’idéal est un nom de fichier de 2 à 3 mots-clés*.
Appliquer une politique de bon nommage des fichiers sur son site internet est certes fastidieux, cependant si celle-ci est appliquée dés le départ, l’effort marginal à fournir pour chaque nouvelle photographie est minime. Il est donc fortement conseillé de prendre le temps d’y réfléchir en amont.
Gérer la compression de son image
La compression de l’image est sans aucun doute l’un des critères les plus importants lorsqu’il s’agit d’optimisation d’image pour son site web.
L’objectif de la compression est de réduire la quantité de mémoire nécessaire pour le stockage d’une image ou, de manière équivalente, de réduire le temps de transmission de celle-ci. Cette compression peut soit conserver l’image intacte, on parle alors de compression sans perte, soit autoriser une dégradation de l’image pour diminuer encore l’empreinte mémoire, on parle ici de compression avec perte. **
Pour résumer, la compression permet de réduire le poids d’une image avec ou sans dégradation visible de sa qualité.
Constatez par vous-même ; ci-dessous, une image découpée en deux parties.
À droite, l’image a subit une compression de 60% par rapport à l’image de gauche. La différence est difficilement remarquable, pourtant l’image de droite est presque 3 fois plus légère (15 Ko contre 40 Ko) !
Afin de compresser une image, il existe différents outils (gratuits ou non) :
Logiciels PAO (Photoshop, etc.)
Adobe Photoshop permet de facilement gérer la compression d’une image, pour cela il suffit d’ouvrir celle-ci avec le logiciel, puis aller dans “Enregistrer pour le web”.
Dans cette fenêtre, tout un panel d’éléments vous permet d’optimiser votre image pour le web. Cependant, ici, c’est le paramètre “Qualité” qui nous intéresse. Ce pourcentage à définir vous permet de jouer directement sur la compression de l’image tout ayant un aperçu en temps réel du résultat.
Adobe Photoshop est une solution très puissante mais qui a malheureusement un coût non négligeable (compter environ 20 € par mois). Si vous n’avez pas l’utilité d’un tel logiciel, d’autres solutions gratuites existent pour compresser vos images.
Solutions en ligne
Des outils très simples d’utilisation sont à votre disposition tels que Imagecompressor.com ou encore Compressor.io. Concernant le premier, il suffit d’uploader l’image puis choisir la compression souhaitée et enfin télécharger le résultat. C’est très simple à utiliser.
Solutions natives
Bien entendu, la plupart des systèmes d’exploitation incluent également des solutions embarquées vous permettant de compresser des images. C’est par exemple le cas du logiciel Aperçu sur OS X (Mac) avec lequel il suffit d’ouvrir une image puis de cliquer sur “Fichier” puis “Exporter…” pour obtenir le menu ci-dessous. Il est cependant intéressant de préciser que cet outil est moins pratique que ceux évoqués précédemment car il ne propose pas de visualiser le résultat en temps réel.
Plusieurs options sont à votre disposition pour compresser une image, certaines plus performantes que d’autres, à vous de choisir !
Optimiser la résolution de l’image
Afin que votre image soit parfaitement optimisée non pas pour le Web mais pour votre site web, il reste une dernière étape : l’optimisation de sa résolution ou taille.
En effet, une image possède une longueur et une largeur en pixels. A l’évidence, votre logo dans le header n’aura pas la même dimension qu’une image qui occuperait tout l’écran.
Prenons l’exemple du cas ci-dessus : comme vous pouvez le constater, la taille des images varie en fonction de l’espace qu’elles occupent à l’écran (indiqué ici en superposition de l’image). Cependant, les dimensions indiquées sont celles que l’image occupe à l’écran et non pas les dimensions réelles de l’image. Il est possible de définir les dimensions d’une image en css, sans tenir compte de la taille réelle de celle-ci. Dans le cas où l’image serait trop grande ou trop petite, c’est le navigateur qui s’occupe de la redimensionner. Votre navigateur est obligé de télécharger l’image en entier puis de la redimensionner.
Vous l’avez compris, il s’agit d’un double fardeau ; cela augmente l’utilisation de bande passante, mais également la charge de travail nécéssaire au navigateur et donc de votre ordinateur.
Pour vérifier que les images de votre site internet sont optimisées, plusieurs solutions s’offrent à vous. Vous pouvez le faire de manière spécifique à une image, en utilisant l’inspecteur de Google Chrome. Pour cela, il suffit de faire un clic droit sur l’image en question, puis chercher la balise <img> correspondante dans l’onglet Elements de l’inspecteur. Il faut ensuite survoler l’url de l’image et un petit panneau apparaît, vous donnant un aperçu de l’image et deux dimensions. La première correspond à la dimension de l’image après son retraitement par le navigateur (la taille qu’elle occupe à l’écran), la deuxième correspond à sa taille originale.
L’exemple ci-dessus nous montre un cas d’image surdimensionnée.
En apparence, tout paraît tout à fait normal. Pourtant, le petit logo en haut à gauche est 40 fois trop grand ! L’image originale mesure en effet 2000 x 2000px, alors qu’elle est affichée en seulement 50 x 50px. La différence de poids est également significative, puisque l’image en question pèse environ 150 Ko, contre environ 6 Ko aux bonnes dimensions.
Ajuster les dimensions d’une image est très simple. Comme pour la compression, plusieurs outils sont possibles. Comme toujours, Photoshop est l’un des plus performants pour effectuer cette tâche. La démarche à suivre est assez simple : elle s’effectue dans la même fenêtre que lors de la compression de l’image, dans “Fichier”, “Exportation…” puis “Enregistrer pour le web”. Ici, c’est l’encart “Taille de l’image” qui nous intéresse. Il vous suffit de régler les bonnes dimensions et de cliquer sur “Enregistrer…”.
Une solution pour effectuer cette tâche de manière groupée existe.
En effet, l’outil de test Google Page Speed vous permet de tester très facilement l’optimisation d’une page web d’un site. Si ce test vous intéresse, vous trouverez toutes les informations nécessaires dans cet article :
Évaluer la vitesse de chargement de son site web.
Une fois le test effectué, rendez-vous dans l’onglet “Ordinateur” : vous trouverez en bas de la page de résultat un lien “Télécharger des images, des scripts JavaScript et des ressources CSS optimisés pour cette page”. Ce lien vous permet de télécharger un fichier zip contenant toutes les images qui ont besoin d’être optimisées pour votre page web. Celles-ci vous sont automatiquement fournies à bonne résolution et même compressées !
Cet article vous donne de premières pistes pour optimiser vos images pour le web, que ce soit en termes de sémantique SEO (titre alt, nommage du fichier), ou d’un point de vue technique (format, compression et résolution).
En revanche, votre site web est visité par différents formats d’écran. Au-delà de ces formats d’écrans, certains appareils ont des résolutions plus élevées que d’autres, notamment les écrans Retina d’Apple ou encore les écrans 4K. Vous vous en doutez bien, il est préférable qu’une image soit servie dans une résolution plus élevée sur un écran Retina que sur un écran de basse qualité. De la même manière, si votre site est responsive, suivant la taille de l’écran, vos images seront plus ou moins grandes. Pour répondre à cette problématique, le HTML5 a introduit la balise <picture> qui permet de servir des fichiers différents en fonction du type d’écran (media queries).
La balise <picture> sera traitée dans un nouvel article à paraître prochainement sur le blog de CapSens.
* Selon cet article de TutorialPoint.
** Définition du CNRS, disponible via ce lien.
