Les images jouent une part importante dans la réussite d’un site web :

• 90 % des informations retenues par le cerveau sont visuelles,
• On est plus susceptible de partager une image/vidéo d’un site web qu’un texte,
• Cela facilite la lecture de l’internaute.

Pourquoi optimiser vos images ?

Les pages d’un site internet sont principalement composées de textes. Or, l’internaute peut très vite se trouver désintéressé par une surabondance de texte. Cela peut être même réfractaire au premier coup d’œil. L’usage d’images ou de vidéos est donc pertinent et pourra aussi apporter une touche d’originalité selon votre approche.

Les médias que vous utilisez ont également un impact sur le référencement SEO de votre site. Cela améliorera votre visibilité sur les moteurs de recherche, à condition de ne pas oublier les balises alternatives pour leur donner du sens.

Enfin, l’optimisation de vos images est nécessaire (voire indispensable) afin de réduire le temps chargement de la page web pour éviter que l’internaute ne patiente trop longtemps et décide de partir avant même d’avoir pu visiter votre site. Cela est aussi vrai pour les robots des moteurs de recherche qui dégraderont votre note s’ils détectent des images trop lourdes.

La société KissMetrics a réalisé une étude montrant que :

• 73% des utilisateurs sur mobile expliquent être déjà allé sur un site internet qui a mis trop de temps à charger,
• 51% des utilisateurs sur mobile ont visité un site qui a provoqué une erreur quand la page chargeait,
• 47% des utilisateurs voudraient que le site qu’ils vont visiter soit accessible en moins de 2 secondes,
• 40% des utilisateurs abandonnent un site qui met plus de 3 secondes à charger,
• 1 seconde de temps de chargement en moins augmente de 7% le taux de conversion de votre site. 

Bien choisir son image

Bien sûr, il vous faudra choisir des images pour illustrer les pages de votre site web. Vous pouvez réaliser vos propres photos, soit avec votre smartphone, soit avec un appareil photo personnel. Pensez à la qualité de la photo : l’éclairage, l’exposition, le lieu, le décors…

L’appel à professionnel est toutefois recommandé pour disposer de photos de qualités. Bien que cela représente un budget complémentaire, les résultats obtenus sont plus professionnels et les visuels souvent plus proches de votre savoir-faire. Chez Netnco, nous aimons dire qu’il faut "faire savoir le savoir-faire" pour être au plus près du geste.

Une autre solution, souvent utilisée, est l’utilisation d’images stockées sur le web. Evidemment, il faut que ces images soient libres de droit ou que vous ayez acquis la licence d’exploitation. Pour les images libres de droit, vous devez citer l’auteur de la photo directement sous cette-dernière ou dans les mentions légales de votre site.

Quel que soit votre manière de procéder, soyez original tout en restant professionnel ! Vous pouvez aussi insérez des animations, des photos "décalés", avec une pointe d’humour. Ceci peut vous démarquer des autres sites concurrents. 

Les différents types d’image

Sur le web, il existe plusieurs formats pour les photos / images, très différents les uns des autres, avec, pour tous, des spécificités particulières. Les plus connus et les plus réputés sont : PNG, JPEG, GIF, SVG, WebP.

En quoi ces formats sont-ils différents ?

• WebP :

Commençons par le petit nouveau, le WebP, sorti en 2010 par Google. Ce format permet la transparence, les images animées mais surtout une compression sans ou avec perte pouvant aller jusqu’à 30% de gain, sans toutefois nuire à la qualité de l’image. Seul bémol, il est, à ce jour, incompatible avec Internet Explorer, et n’est compatible partiellement qu’avec les plus récentes version de Safari. Quant à IOS mobile, il n’est compatible qu’à partir de la version 14. Ces contraintes rendent ce format, pour l’instant, assez limité.

• PNG : 

Le fameux PNG, un des formats les plus connus pour les photos, est à peu près similaire au WebP au niveau des caractéristiques. Il est compatible avec tous les navigateurs mais l’image PNG reste plus lourde qu’une image en WebP et ne permet pas les animations.

• JPEG :

Aussi connu que le PNG mais toutefois différent, il est le format le plus utilisé dans le monde. Il est moins volumineux que ce dernier mais sa décompression se fait avec pertes, ce qui, possiblement, entachera la qualité de l’image. Le JPEG ne permet pas la transparence sur les images.

• GIF :

Le GIF est assez différent de tous les autres formats que nous avons vus précédemment. Crée en 1987, le GIF permet de regrouper plusieurs images dans un seul fichier permettant de les animer et de le rendre dynamique, ou bien même d’afficher des courts extraits de vidéos. Le format GIF privilégie la forte compression des images aux dépens de leur qualité. Aussi, le GIF ne peut supporter que 256 couleurs. 

• SVG :

Le SVG renvoie à une image sous forme vectorielle. Ce format est très pratique quand on veut changer la taille de l’image. La qualité ne sera pas réduite et restera la même. Autres points forts, Le SVG supporte la transparence, ainsi que les animations et le fichier n’est pas très volumineux.

Et quel format choisir ?

Aujourd’hui, ces 5 formats sont les plus utilisés. Le WebP est celui qui l’est le moins à cause de son apparition récente (2010) ainsi qu’à cause de sa non-compatibilité avec certains navigateurs pour l’instant. Il n’est pas nécessaire de l’utiliser maintenant, mais il sera certainement le format le plus utilisé dans les années à venir.

Le GIF, quant à lui, est plus représenté que ce dernier, mais sa faible qualité le dessert et le rend très peu utilisé. Je vous conseille quand même d’utiliser ce format pour des petites animations ou votre logo, cela fera toujours son effet auprès de l’utilisateur.

Pour les images du site, le PNG est le JPEG sont de très bon choix, mais réfléchissez bien à leur utilisation. Utilisez le PNG lorsque votre image doit avoir de la transparence seulement et le JPEG pour les autres images, ce sera moins volumineux et la qualité sera au rendez-vous.

Enfin, n’hésitez pas à utiliser le SVG qui est extrêmement utile pour les logos, petites illustrations, ou pictogrammes. C’est le format conseillé pour obtenir un meilleur rendu.

Comment optimiser vos images

La compression

Dans la moyenne, les images correspondent à 20% du poids total d’un site internet. Donc, afin d'améliorer l'expérience utilisateur, il est important d'optimiser ces poids pour diminuer les temps de chargement. En téléchargeant (téléversant serait plus juste, mais personne n’utilise ce terme) des images volumineuses sur votre site Web, vous pouvez nuire à la vitesse de navigation sur ce dernier.

Pour vérifier vos performances, vous pouvez vous aider de l’outil LightHouse de Google qui se trouve sur le DevTools du navigateur Chrome. Grace à cet outil, vous pouvez générer un rapport concernant votre votre site web pour analyser ses performances, son accessibilité, le SEO… Ainsi, vous serez en mesure de voir si certaines images posent un problème et diminuent la performance de votre site.

Pour redimensionner vos images, vous pouvez utiliser des logiciels de retouches photos tels que Affinity Photo, Gimp, Photoshop… Vous pouvez également le faire depuis le lecteur d’image de Windows, mais seulement pour le format JPEG. Enfin, il existe des sites internet comme TinyPNG, ImageSmaller, ou encore iLoveImg, qui vous permettront de compresser vos images très rapidement.

L’importance de la balise alt

Les moteurs de recherche ne se focalisent pas seulement sur le poids de l’image pour votre référencement, mais analysent aussi les mots-clés de ces dernières. Ainsi il vous faudra être précis quand vous détaillerez vos images. Utilisez des mots-clés précis et pertinents qui décrivent votre image. Cette description est également utilisée pour l’accessibilité, c’est-à-dire par les outils qui retranscrivent les images pour les malvoyants. Pensez aussi à eux.

Enfin, quand vous nommez vos images, donnez-leur un nom sans accents, sans espaces ni caractères spéciaux. Préférez le "-" au "_" et ne choisissez pas un titre trop long.

Crédit photo : Pascal Brokmeier