Guides pratiques
Choisir et optimiser des photos pour un site web
Une photographie doit aider à comprendre un sujet ou reconnaître un objet. Sa taille et son poids doivent correspondre à son emplacement. Un beau visuel sans provenance, mal recadré ou téléchargé en pleine résolution peut dégrader la confiance et la lecture.
Résultat
À la fin de ce guide, vous saurez
- Choisir un sujet photographique qui sert le contenu.
- Conserver source, auteur, licence et limites d’usage.
- Préparer des variantes et contrôler leur rendu sur plusieurs écrans.
Étapes
La méthode pas à pas
Définissez la fonction de l’image avant de chercher une photo : expliquer, documenter, identifier ou simplement décorer.
1. Écrire un besoin précis
Décrivez le sujet, l’information utile et l’emplacement. Une photo d’objet réel peut expliquer une fiche ; une photo générique d’équipe ne doit pas faire croire qu’elle montre vos collaborateurs.
Préférez un sujet reconnaissable à une accumulation d’accessoires. Vérifiez que le sens reste clair dans une petite vignette.
2. Vérifier provenance et droits
Conservez la page source, l’auteur, la licence et la date de consultation. Vérifiez les conditions exactes du fichier sélectionné : une banque peut mélanger images gratuites et offres payantes.
La licence du photographe ne règle pas automatiquement tous les droits liés aux personnes, marques ou œuvres représentées. Adaptez le choix à l’usage réel et aux éventuelles autorisations requises.
3. Préparer le cadrage pour le composant
Testez le format de la carte et du bandeau séparément. Placez le point important dans une zone qui reste visible lorsque le conteneur utilise un recadrage de type cover.
Si un détail change l’interprétation, évitez de le couper. Une légende doit expliquer le contexte documentaire ou signaler que l’image est une simple illustration.
4. Exporter pour les tailles réellement affichées
Produisez plusieurs largeurs et un format adapté aux navigateurs ciblés, par exemple WebP avec une solution de repli si nécessaire. Comparez qualité visible et poids ; gardez l’original hors du chargement courant de la page.
Déclarez dimensions, variantes srcset et tailles sizes cohérentes avec les colonnes CSS. Chargez les images hors écran à la demande ; privilégiez l’image principale visible au premier écran.
5. Contrôler lecture et accessibilité
Rédigez l’alternative selon la fonction de l’image, sans répéter une liste de mots clés. Une image purement décorative peut avoir une alternative vide ; une image informative doit transmettre l’information essentielle.
Vérifiez à petite largeur, sur grand écran et avec zoom. Contrôlez le recadrage, l’absence de saut de mise en page, le contraste des textes superposés et le fichier réellement téléchargé.
Application
Exemple concret
Demande trop vague
Ajoute de belles photos partout.
Demande améliorée
Pour cette catégorie sur le jardinage, cherche une photo réelle de plantation montrant mains, plant et terre. Conserve source, auteur et licence. Prépare une vignette 16:9 et un visuel 3:2 sans couper le plant, puis vérifie le poids et le cadrage sur mobile et desktop.
Le besoin éditorial, le contexte de droits et les contraintes de diffusion sont contrôlables.
Avant de continuer
Liste de contrôle
- Le sujet apporte une information utile.
- La source et la licence du fichier sont conservées.
- La photo ne suggère pas une identité fictive.
- Les recadrages préservent les détails essentiels.
- Les variantes correspondent aux tailles affichées.
- La légende et l’alternative remplissent des fonctions distinctes.
Le livrable à obtenir et son contrôle
Résultat concret
Un lot de variantes d’images avec source, licence, légende et alternative.
Comment décider s’il est utilisable
Contrôlez la petite vignette, le grand écran, le recadrage et le fichier réellement chargé par le navigateur.
Vigilance
Erreurs fréquentes à éviter
Télécharger une image au hasard
Sa présence sur un moteur de recherche n’autorise pas son utilisation.
Servir la pleine résolution partout
Un grand fichier peut être inutile pour une vignette de quelques centaines de pixels.
Décrire le style plutôt que le contenu
« Belle image » ne transmet pas l’information visible à la personne qui ne la voit pas.
FAQ
Questions fréquentes
Une photo de banque d’images peut-elle illustrer une activité ?
Oui si le contexte reste clair et si l’usage respecte ses conditions. Ne l’attribuez pas à votre équipe ou à votre établissement.
Faut-il un texte alternatif pour chaque image ?
Le choix dépend de sa fonction. Les images décoratives n’ont pas besoin de description, les images informatives oui.
Existe-t-il un poids idéal universel ?
Non. Fixez un budget selon emplacement, dimensions et qualité utile, puis mesurez sur les appareils ciblés.
Sources pour approfondir et vérifier
Ces ressources indépendantes aident à retrouver une référence. Leur langue et leur périmètre sont indiqués : une ressource française ne décrit pas nécessairement les règles d’un autre pays. Elles ne sont pas les sources automatiquement consultées pour les réponses générées.
- W3C WAI — Accessibility tutorialsLangue: en · Périmètre: International
- W3C WAI — An alt decision treeLangue: en · Périmètre: International
- Creative Commons — LicensesLangue: en · Périmètre: International
Répertoire de liens vérifié le 2026-10-03 ; vérifiez la date du document consulté.
Guides