Améliorer · Guide pratique
Photos pour le web : qualité, poids et contexte
Préparez des photos web légères : choix du sujet, dimensions, WebP, variantes responsive, texte alternatif et contrôle visuel sur mobile.
Réponse directe
À retenir avant de commencer
Une photo web utile illustre une information précise, possède une taille adaptée à son affichage et conserve une qualité suffisante après compression. Son contexte et son texte alternatif aident à comprendre son rôle dans la page.
Choisir un sujet qui apporte quelque chose
Une photo peut montrer un produit, un geste, un lieu ou une étape du travail. Définissez ce qu’elle doit rendre compréhensible avant de la choisir. Si elle ne fait que répéter l’ambiance d’une autre image, elle ajoute du poids sans nécessairement enrichir la visite.
Distinguez les images d’illustration des preuves de réalisation. Un visuel généré ne représente pas une équipe ou un client réel. Pour les projets et lieux présentés comme des références, utilisez des documents authentiques et autorisés, accompagnés d’un contexte exact.
Adapter les dimensions au composant
Préparez une image selon la largeur et le ratio du bloc qui l’affichera. Les variantes responsive permettent au navigateur de choisir un fichier adapté à l’écran. Vérifiez le cadrage sur téléphone : un sujet placé à l’extrémité d’une photographie large peut disparaître dans un bloc plus vertical.
Renseignez les dimensions pour réserver l’espace et limiter les sauts de page. Chargez les images plus bas dans la page à la demande, tout en permettant au visuel principal de démarrer rapidement. Une simple réduction visuelle en CSS ne réduit pas le poids du fichier téléchargé.
Compresser et comparer visuellement
Le format WebP est adapté à de nombreuses photographies. Le réglage de qualité doit être comparé sur les détails importants : visages, textures, produits et aplats. Évitez d’appliquer une limite de poids unique à toutes les images, car les sujets et les usages diffèrent.
Dans notre méthode, le contrôle se fait au format d’affichage réel, puis sur un écran plus dense. La netteté doit soutenir la lecture, pas multiplier les pixels sans besoin. Conservez la source de travail séparément des fichiers destinés à la publication.
Décrire l’image et documenter son usage
Le texte alternatif décrit l’information visuelle utile dans le contexte. Il ne sert pas à accumuler des mots-clés. Une légende peut préciser le sujet, l’étape ou le statut d’illustration. Les recommandations Google insistent sur des images accessibles dans des éléments HTML adaptés et un contexte textuel pertinent.
Tenez un registre avec la source, les droits, la page d’utilisation et les versions. Sur ce site, la règle éditoriale est une photo par emplacement, avec des variantes techniques du même visuel pour les écrans. Cette règle de cohérence n’est pas une exigence de classement des moteurs.
Votre tableau pratique
| Contrôle | À vérifier | Effet recherché |
|---|---|---|
| Sujet | Lien direct avec le contenu | Compréhension |
| Dimensions | Largeur et ratio du bloc | Cadrage stable |
| Compression | Poids et détails visibles | Chargement confortable |
| Alternative | Description utile et concise | Accessibilité |
| Usage | Source et emplacement documentés | Traçabilité éditoriale |
Avant de passer à l’action
Cochez les points vérifiés pendant votre lecture. Les cases restent locales à cette page et ne sont pas enregistrées.
Sources et vérification
Documentation consultée le 15 septembre 2026. Les méthodes et exemples complémentaires sont des propositions éditoriales de l’agence.