Une image floue, une page qui prend 10 secondes à charger, une bannière coupée au mauvais endroit. Ce sont des problèmes qu'on voit souvent, et la bonne nouvelle, c'est qu'ils se règlent facilement quand on connaît quelques principes de base.
Cet article vous explique comment préparer vos images avant de les mettre en ligne pour que vos pages soient rapides et vos images toujours nettes, que ce soit pour une bannière, une photo dans le corps de vos pages ou une vignette de nouvelle.
Pourquoi une image « trop grosse » pose problème
Quand on parle d'une image trop grosse, on parle de deux choses : ses dimensions (largeur et hauteur en pixels) et son poids (la taille du fichier en kilo-octets).
Une photo prise avec un téléphone récent peut facilement faire 4000 pixels de large et peser 10 Mo. Si vous la téléversez telle quelle sur votre site, elle sera affichée à une fraction de sa taille réelle, mais le navigateur du visiteur devra quand même la télécharger au complet. Résultat : la page est lente, surtout sur un téléphone avec une connexion mobile.
Et ça ne touche pas que l'expérience du visiteur. Un site lent pousse les gens à quitter la page avant même de la lire. Google remarque ce comportement et en tient compte dans son classement.
Les bonnes dimensions selon l'emplacement
Toutes les images de votre site n'ont pas besoin de la même taille. Voici les dimensions généralement recommandées selon l'endroit où l'image sera utilisée.
Bannières pleine largeur
Entre 1920 px et 2560 px de large. C'est le format pour les bannières qui s'étirent d'un bord à l'autre de l'écran.
Bannières demi-largeur
Entre 1280 px et 1440 px de large. Pour les bannières qui n'occupent qu'une partie de la largeur de la page.
Bannières pleine hauteur
Entre 1080 px et 1440 px de hauteur.
Bannières demi-hauteur
Entre 600 px et 900 px de hauteur.
À savoir : les bannières affichent généralement l'image à l'intérieur d'une zone définie. Si votre image est plus haute, certaines parties du haut ou du bas seront masquées. Gardez le sujet principal au centre de l'image pour éviter les mauvaises surprises. Au besoin, notre tutoriel Rogner une image vous montre comment recadrer directement dans Webartchitecte. Pour savoir comment modifier votre bannière, consultez Changer l'image de la bannière d'entête d'une page.
Vignettes de nouvelles
1200 px x 630 px. Ce format s'affiche bien sur votre site et aussi lorsque quelqu'un partage la nouvelle sur Facebook. Notre tutoriel Créer une nouvelle ou un article de blogue vous explique comment ajouter la vignette à votre publication.
Images de partage social des pages
Par défaut, Webartchitecte utilise une image de partage commune pour l'ensemble de votre site. Mais si vous le souhaitez, vous pouvez configurer une image de partage différente pour chacune de vos pages. L'idéal est de viser 1200 px x 630 px, le format recommandé par Facebook. Notre tutoriel Configurer l'image de partage d'une page vous montre comment faire.
Images dans le corps d'une page
Entre 800 px et 1280 px de large. C'est suffisant pour une bonne qualité d'affichage sans alourdir la page. Notre tutoriel Insérer une image explique les étapes pour ajouter une image dans votre contenu.
Le poids : viser sous les 500 Ko
Les dimensions, c'est une chose. Le poids du fichier, c'est l'autre moitié de l'équation.
Un bon repère : visez sous 300 Ko pour la plupart des images, et sous 500 Ko pour les grandes bannières. Si votre image pèse 3 Mo, c'est beaucoup trop lourd.
Comment réduire le poids d'une image :
Commencez par la redimensionner aux bonnes dimensions. Une image de 4000 px de large redimensionnée à 1920 px perdra déjà une bonne partie de son poids. Notre tutoriel Redimensionner une image vous guide pas à pas.
Si le poids est encore trop élevé après le redimensionnement, vous pouvez compresser l'image avant de la téléverser. Des outils gratuits comme Squoosh et Fotor permettent de redimensionner et compresser en une seule étape. TinyJPG est aussi une bonne option mais pour la compression uniquement.
Les formats à privilégier :
- JPG : pour les photos. C'est le format le plus courant et il offre un bon rapport qualité/poids.
- PNG : pour les images avec de la transparence (logos, icônes). Attention, les PNG sont souvent plus lourds que les JPG.
- SVG : pour les logos et les icônes simples. Léger et net à toutes les tailles.
Bonne nouvelle : CMS Webartchitecte génère automatiquement une version WebP de vos images. Le WebP est un format plus léger que le JPG et le PNG. Les navigateurs récents affichent la version WebP, ce qui accélère le chargement sans que vous ayez quoi que ce soit à faire.
Ce que Webartchitecte fait pour vous (et ce qui reste à faire de votre côté)
Webartchitecte s'occupe de plusieurs choses automatiquement :
Ce que le CMS fait : il convertit vos images en WebP et génère des versions adaptées pour les différents formats et résolutions d'écran (mobile, tablette, bureau). Un téléphone avec un petit écran reçoit une image plus légère, tandis qu'un appareil à haute résolution reçoit une image de qualité appropriée. Vous n'avez rien à configurer pour ça.
Ce qui reste de votre côté : téléverser des images aux bonnes dimensions et à un poids raisonnable. Le CMS optimise l'affichage, mais il ne peut pas transformer une photo de 10 Mo en image légère sans perte de qualité. Mieux vaut partir d'une bonne base.
Vous pouvez aussi utiliser les outils intégrés au CMS pour ajuster vos images. Notre tutoriel Rogner une image vous montre comment recadrer directement dans Webartchitecte, sans avoir besoin d'un logiciel externe.
Le texte alternatif : petit détail, gros impact
Chaque image sur votre site devrait avoir un texte alternatif. C'est une courte description de l'image qui sert à deux choses :
L'accessibilité
Les personnes qui utilisent un lecteur d'écran (par exemple, une personne malvoyante) entendent cette description au lieu de voir l'image. Sans texte alternatif, l'image n'existe tout simplement pas pour ces visiteurs.
Le référencement
Google ne « voit » pas les images comme nous. Il lit le texte alternatif pour comprendre ce que l'image représente. Un bon texte alternatif aide votre page à se positionner dans les résultats de recherche, y compris dans Google Images.
Comment écrire un bon texte alternatif :
Décrivez ce que l'image montre, simplement. Par exemple, pour une photo de votre équipe devant vos bureaux, écrivez « L'équipe de [nom de l'entreprise] devant ses bureaux à Matane ». Évitez les descriptions vagues comme « image1 » ou « photo ».
Notre tutoriel Ajouter un texte alternatif (alt) à une image vous montre exactement où et comment l'ajouter dans Webartchitecte.
Organiser sa bibliothèque d'images
Avant de téléverser 50 photos d'un coup, prenez le temps de les nommer de façon claire. « equipe-kaleidos-matane.jpg » est beaucoup plus utile que « IMG_4392.jpg », autant pour vous retrouver dans votre bibliothèque que pour le référencement.
Notre tutoriel Importer vos images dans la bibliothèque explique comment ajouter et organiser vos fichiers dans Webartchitecte.
En résumé
Optimiser ses images, ce n'est pas compliqué. Trois réflexes suffisent :
- Redimensionner aux bonnes dimensions selon l'emplacement sur le site.
- Compresser pour garder un poids sous 300 Ko (sous 500 Ko pour les grandes bannières).
- Ajouter un texte alternatif à chaque image.
Webartchitecte s'occupe du reste : conversion WebP, versions pour chaque taille d'écran, et outils de recadrage intégrés.