Un site riche en visuels n’est pas forcément lent. Le problème vient souvent moins du nombre de belles photographies que de leur préparation et de leur chargement. Envoyer un grand original à un téléphone pour une petite carte consomme des données sans bénéfice visible. Une compression excessive peut toutefois détruire les textures et donner aux images un aspect négligé. L’objectif n’est pas un minimum arbitraire de kilo-octets, mais un équilibre raisonnable selon le rôle de chaque image.
Définissez d’abord le rôle
Classez les images selon leur fonction : visuel principal, information ou décoration. Une photographie principale peut façonner la première impression, ce qui rend sa qualité importante. Un schéma doit rester lisible, tandis qu’une miniature n’a pas besoin du niveau de détail d’une grande affiche. Pour chaque type, notez le rapport de dimensions et la plus grande taille d’affichage prévue. Cela aide les rédacteurs à préparer les contenus de manière cohérente plutôt qu’à expérimenter des cadrages sans règles claires à chaque fois.
Préparez plusieurs tailles
Les images adaptatives permettent au navigateur de choisir une ressource appropriée aux conditions d’affichage. La documentation web.dev explique les mécanismes de fourniture de ces variantes. En pratique, vérifiez que les visiteurs mobiles ne téléchargent pas inutilement le même gros fichier que sur ordinateur. Réduire une image uniquement par les styles ne réduit pas la quantité de données transférées. Les variantes doivent exister comme ressources préparées séparément ou être générées par un système de traitement adapté.
Comparez les formats sur des contenus réels
Une photographie, une illustration contenant du texte et un signe transparent réagissent différemment à la compression. Testez des formats modernes appropriés et une solution de repli si votre réalisation l’exige. Ne choisissez pas les réglages uniquement selon le poids du fichier : examinez le résultat sur l’écran cible, en observant les dégradés, les contours et les petits détails. Il vaut mieux conserver les formulations importantes comme vrai texte de page plutôt que les intégrer à une image, où elles sont plus difficiles à lire, copier et adapter.
Pensez à l’ordre de chargement
Les images situées bien en dessous du premier écran peuvent souvent se charger plus tard. Le visuel principal ne devrait toutefois pas être automatiquement différé avec tout le reste. Prenez la décision finale après avoir testé la page plutôt qu’en suivant une règle universelle unique. Réservez aussi un espace prévisible aux images dans la mise en page, pour que leur arrivée ne fasse pas sauter le texte et les boutons. Les visiteurs doivent conserver leurs repères pendant le chargement.
Ajoutez des descriptions pertinentes
Le texte alternatif doit transmettre le sens de l’image dans son contexte précis, pas répéter mécaniquement des mots-clés. Si une photographie démontre une caractéristique importante du travail, expliquez-la brièvement. Un élément décoratif ne doit pas créer de bruit inutile pour les technologies d’assistance. Organiser les noms de fichiers et les descriptions pendant la préparation est également plus simple que corriger des centaines de noms arbitraires après la mise en ligne d’un catalogue.
Après optimisation, testez à nouveau la page avec une connexion plus lente et un vrai téléphone. Comparez la vitesse d’apparition du contenu principal, la stabilité de la composition et l’apparence des photographies. L’objectif n’est pas un chiffre séduisant dans un rapport. Il s’agit d’aider chacun à voir rapidement ce dont il a besoin sans perdre les détails importants.