L’image sur le web : quand la technique rencontre l’esthétique
En 1907, les frères Lumière mettent au point l’Autochrome, premier procédé photographique couleur viable sur le plan industriel.
Techniquement, il s’agit d’une plaque de verre recouverte d’une mosaïque de microscopiques grains de fécule de pomme de terre teintés en rouge orangé, vert et bleu-violet, jouant le rôle de filtres trichromes. Ces grains sont ensuite fixés par un vernis et surmontés d’une émulsion panchromatique sensible à la lumière.
Lors de la prise de vue, la lumière traverse ces filtres colorés avant d’impressionner la couche sensible. Après développement et inversion du négatif en positif direct, on obtient une image en couleur naturelle, unique et translucide, à observer par transparence.
L’Autochrome demandait des expositions longues — plusieurs secondes, voire minutes — et une grande précision dans le traitement chimique, mais son rendu était d’une douceur chromatique exceptionnelle.
En somme, un chef-d’œuvre d’ingénierie optique et chimique, où la technologie servait déjà l’émotion visuelle.
L’évolution technique des formats d’image
Sur le web, tout a commencé dans les années 90 avec le GIF, limité à 256 couleurs. Léger et adapté aux animations simples, il reste utile pour les icônes et les images sans dégradés.
Puis arrive le JPEG (.jpg), devenu la norme pour les photos : il offre des millions de couleurs et une compression efficace, mais au prix d’une perte de qualité.
Ensuite, le PNG prend le relais pour les images avec transparence et textes nets — idéal pour les logos.
Enfin, les formats modernes comme le WebP (développé par Google) ou le AVIF (encore plus performant et développé par Alliance for Open Media) offrent une compression bien plus efficace sans perte visible, avec un poids parfois réduit de moitié par rapport au JPEG.
Résultat : un site plus rapide, mieux référencé, et plus agréable à consulter.
Trouver l’équilibre entre qualité et performance
Un site performant ne doit pas dépasser 1 à 2 Mo pour sa page d’accueil, images comprises.
Quelques repères :
- Bannières et grandes photos : 1500–2000 px de large, compression à 70–80 %.
- Images de contenu : 1000–1200 px de large, poids idéal entre 150 et 250 Ko.
- Logos et icônes : préférer le SVG, vectoriel et ultra-léger.
- Photos mobiles : prévoir une version adaptée (600–800 px de large).
Pourquoi c’est essentiel
Mon job
Lorsque vous me commandez un site Internet, je m’assure d’optimiser les images que vous me fournissez. Une optimisation au niveau de sa qualité selon l’écran du visiteur, mais aussi une bonne gestion SEO (Search Engine Optimization – référencement naturel pour les moteurs de recherche).
Par exemple, chaque image doit avoir un nom qui parle : creation-site-internet-liege.webp plutôt que IMG_1234.jpg.
Cela ne se voit généralement pas à l’écran, mais toutes les images ont une balise à ne pas négliger : la balise alt. C’est un attribut HTML qui fournit une description textuelle pour une image. Elle est cruciale pour l’accessibilité (lecteurs d’écran pour les personnes malvoyantes) et pour le référencement naturel (SEO), car elle permet aux moteurs de recherche de comprendre le contenu de l’image. De plus, son texte s’affiche si l’image ne peut être chargée.