OPTIMISEZ SES IMAGES

Aurore_Creation_Web — Fri, 17 May 2024 21:02:51 +0000

C’est un peu comme la devanture d’un magasin. Si elle est bien achalandée sans faire fouillis et propre, ça donne davantage envie de rentrer dans la boutique. Pour une photo, c’est le même principe. Nette, de bonne qualité, rapidité d’affichage (taille et poids), bien décrite (nom, alt, titre, légende), à la bonne place dans le contenu, voilà déjà une bonne base pour vos photos.

Quelques chiffres:

une image se rend 60 000 fois plus vite au cerveau
90% des informations retenues par le cerveau sont visuelles
30% des recherches sur Google se font sur Google Image

Un droit d’auteur s’applique à toute image que vous trouvez sur internet. Pensez-y! L’amende est de 2000 euros. Une image sur votre site doit refléter votre activité, votre boutique ou votre commerce. Néanmoins si vous êtes vraiment en manque d’inspiration, voici quelques exemples (entre autres) de banques d’images gratuites et libres de droits comme

https://unsplash.com

https://pixabay.com/fr

https://www.pexels.com/fr-fr

https://www.freepik.com/

Contrairement à un livre, un site internet doit se charger. La connexion est primordiale mais vous ne pouvez rien faire pour augmenter le débit de connexion de vos internautes. En revanche, vous pouvez avoir un site qui se charge plus rapidement et cela va beaucoup se jouer via vos photos.

L’importance du temps de chargement d’un site:

Après 3 secondes de chargement, 57% des internautes abandonnent le site. Sur mobile, c’est 70 à 75%.
Après 5 secondes, c’est 62%.
80% des internautes n’y reviendront pas
(données d’un sondage Imperva incapsula)

La Taille Adaptée

Le poids de l’image

Le nommage ('naming')

La Taille Adaptée

L’idéale est d’avoir une image qui correspond à la taille à laquelle elle doit d’afficher. On exprime généralement une taille d’image en pixels (px) avec une hauteur et une largeur ou seulement une des deux, l’autre étant en auto.

Pour vous donner une idée de la taille d’une image

image en longueur (width) de 50px

image en longueur (width) de 100px

image en longueur (width) de 300px

image en longueur (width) de 500px

image en longueur (width) de 700px

Une image plus grande que nécessaire apporte à votre site un temps de chargement plus long puisqu’elle doit être chargée. De plus, du moment que l image se trouve enregistrée, elle sera chargée, qu’elle soit visible ou non sur le site.

Donc: il faut supprimer une image qui n’a plus d’utilité et qui n ‘apparaît plus sur le site (ex: un produit en rupture de stock et qui ne sera plus visible sur le site).

Adaptez l’image à votre contexte.

Pour redimensionner une image, plusieurs sites gratuits et très simples d’utilisation existent. Quelques exemples entre autres:

Le poids de l’image

C’est une notion très importante à garder à l’esprit dès que vous souhaitez intégrer une image: son poids.
Plus l’image est lourde, plus le temps de chargement de l’image est long et plus il y a d’images sur le site, plus l’internaute doit patienter.

Privilégiez la qualité à la quantité.

Observez le poids des images de la page 2 et 3 en fonction de leur taille:

image en longueur (width) de 50px : 108 Ko(kilo-octets)
image en longueur de 100px : 111 Ko
image en longueur de 300px : 134 Ko
image en longueur de 500px : 168 Ko
image en longueur de 700px : 210 Ko
image en longueur de 1000px : 279 Ko

Petite apparté sur le format:

Le format WEBP est désormais le plus utilisé sur le web, surpassant le JPEG. Développé par Google, WEBP offre une meilleure compression avec une qualité d’image supérieure, supporte la transparence et les animations. Tous les principaux navigateurs le prennent en charge, ce qui en fait le choix idéal pour optimiser les performances et la qualité des images sur les sites web.

Voici une très bonne application avec une version gratuite pour convertir vos images au format WEBP:

https://image.online-convert.com/fr/convertir-en-webp

Vous pouvez compresser ensuite les images pour obtenir un gain en poids. Attention néanmoins à vérifier toujours le rendu avant de le mettre en ligne. Des nombreuses appli simples et gratuites existent. Quelques exemples :

Si vous avez des PDF à convertir en JPG qui est également un format très utilisé car c’est un format d’enregistrement et de compression numérique ( 16 millions de couleurs) pensez à CANVA

https://www.canva.com/fr_fr/outils/convertir-pdf-en-jpg/

Le nommage ('naming')

Malgré les avancées significatives de Google en reconnaissance d’images, il est crucial d’ajouter une description de votre photo avec les mots clés pertinents.

Le nom de l’image

C’est le nom de la photo. Son nom d’origine ne signifie rien pour Google (ex: img-45126847683.jpeg). Il est important de décrire la photo en quelques mots en insérant vos mots clés :

SANS espace
SANS majuscule
SANS caractère spécial
SANS accent (ou cédille, apostrophe, etc.)
SANS article “le, la, des…” (qui n’apportent rien aux robots de Google)
AVEC des traits d’union ou des underscores pour séparer les mots

Exemple de nommage d’une photo:

Ordinateur-creation-site-internet.webp

Le nom de l’image « Ordinateur-creation-site-internet.webp » est un bon nommage d’image parce qu’il :

Est descriptif et pertinent, aidant les moteurs de recherche à comprendre le contenu.
Utilise des traits d’union pour séparer les mots, ce qui améliore la lisibilité.
Inclut des mots-clés pertinents pour le référencement.
Utilise le format WEBP, idéal pour le web en raison de sa compression et qualité.

La balise ALT : c’est le texte alternatif

Il apparaît lorsque l’image ne s’affiche pas.
Il est lu par les lecteurs d’écran des malvoyants et des aveugles (l’accessibilité est un point important pour Google).
Il est lu par les robots de Google également.

Il est important pour le référencement de votre site.

Le titre d’une image

C’est le texte qui s’affiche lorsque vous passez la souris sur l’image. C’est un plus pour vos utilisateurs.

La légende de l’image

C’est le texte affiché sous l’image. Elle est un plus pour l’utilisateur et apporte du contenu textuel à votre site.

Il est recommandé d’atteindre plusieurs centaines de mots par page web (300 à 500 minimum)

Il est important d’avoir un contenu textuel suffisant pour que les moteurs de recherche puissent comprendre le sujet de la page et indexer son contenu de manière appropriée (aidez vous des balises alt également).

Ces quelques conseils vont vous permettre d’alléger votre site et donc d’agir directement sur la vitesse de chargement.

« Le plus beau site du monde ne sert à rien s’il n’est pas regardé! »

J’aurai bien cité quelqu’un de super connu mais ce n’est que de moi.

Merci à FLEEPIK pour ses icônes sympas « flaticon.com«

Merci à Ilan TESSIER pour ses bons conseils sur canva.fr

L’article OPTIMISEZ SES IMAGES est apparu en premier sur Aurore Création Web.