Alléger ses photos pour le site sans perdre en qualité

Les photos font vivre un site : vos plats, votre boutique, vos réalisations. Mais ce sont aussi, très souvent, ce qui le rend lent. Une photo prise avec un téléphone récent est faite pour être imprimée en grand, pas pour s'afficher sur un écran de quelques centimètres. Bonne nouvelle : on peut l'alléger énormément sans que l'œil voie la différence.

Pourquoi une photo est trop lourde

Une photo a deux caractéristiques qui comptent :

• ses dimensions, en pixels : la largeur et la hauteur de l'image ;
• son poids, en kilo-octets ou méga-octets : la place qu'elle occupe, et donc le temps de téléchargement.

Les téléphones produisent des images très grandes. Or un écran de téléphone, et même d'ordinateur, n'a pas besoin d'autant de détails. Afficher une photo géante pour la montrer en petit, c'est faire télécharger au client des données inutiles, souvent en 4G.

Les trois gestes qui font la différence

1. Redimensionner

Réduisez la photo à la taille dont le site a vraiment besoin. Une image en pleine largeur n'a pas besoin des mêmes dimensions qu'une vignette. La personne qui gère votre site peut vous indiquer les tailles à respecter, ou le site peut s'en charger automatiquement s'il est bien construit.

2. Compresser

La compression réduit le poids du fichier en supprimant des détails invisibles à l'œil. Des outils gratuits existent, en ligne ou sur ordinateur. Faites un essai : comparez l'image avant et après à taille normale. Si vous ne voyez pas de différence, c'est gagné.

3. Choisir le bon format

• Le JPEG reste courant pour les photos.
• Le WebP et l'AVIF, des formats plus récents, permettent en général des fichiers nettement plus légers à qualité égale, et sont lus par les navigateurs actuels.
• Le PNG convient aux logos et dessins avec peu de couleurs, mais il est souvent très lourd pour une photo.

Les autres bonnes pratiques

• Le chargement différé : les photos situées plus bas dans la page ne se chargent que lorsque le client s'en approche. La page apparaît plus vite. C'est un réglage technique à demander à votre prestataire.
• Des dimensions prévues à l'avance : quand le site connaît la taille de l'image avant qu'elle arrive, la page ne « saute » pas pendant le chargement (voir les Core Web Vitals).
• Pas de galerie interminable sur la page d'accueil : mieux vaut quelques belles photos et un lien vers une galerie complète.
• Une description pour chaque image (le « texte alternatif ») : elle aide les personnes malvoyantes et permet à Google de comprendre la photo.
• Des noms de fichiers parlants : gateau-anniversaire-chocolat.webp plutôt que IMG_4587.jpg.

Une petite routine avant d'ajouter une photo

1. Choisissez la meilleure photo, nette, prise à la lumière du jour.
2. Recadrez-la sur l'essentiel.
3. Redimensionnez-la à la taille prévue sur le site.
4. Compressez-la, et vérifiez à l'œil que la qualité reste bonne.
5. Donnez-lui un nom clair et une courte description.

Si c'est votre prestataire qui ajoute les photos, envoyez-lui les originaux : c'est à lui de les préparer correctement. Mais vérifiez de temps en temps le résultat avec PageSpeed Insights.

Et les vidéos ?

Une vidéo pèse en général beaucoup plus lourd qu'une photo. Pour ne pas pénaliser le site :

• évitez les vidéos qui se lancent seules en haut de la page ;
• préférez héberger la vidéo sur une plateforme spécialisée et l'afficher sur le site, ou mettre un simple lien ;
• affichez d'abord une image, et chargez la vidéo seulement quand le client appuie sur lecture.

Vérifier le résultat

Après avoir allégé vos photos, refaites un test sur PageSpeed Insights et ouvrez le site sur votre téléphone, wifi coupé. La différence est souvent nette, surtout pour la page d'accueil.

En résumé

• Les photos trop grandes sont la première cause de lenteur d'un site de commerce.
• Redimensionner, compresser et choisir un format moderne suffisent souvent.
• Chargement différé et dimensions prévues rendent la page plus rapide et plus stable.
• Une routine simple avant chaque nouvelle photo évite que le site s'alourdisse.

Besoin d'un coup de main pour optimiser les images de votre site ? Esteban DC accompagne les commerces de La Réunion : demandez à être rappelé.