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.
- Distinguer une création IA d’une photographie documentaire et conserver sa provenance.
- 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. Documenter la provenance
Pour une illustration générale, générez une image originale avec l’IA et conservez le prompt, l’outil, la date et le fichier maître local. Signalez sa nature générée dans la légende ; elle ne prouve ni un lieu réel ni une identité.
Une photo externe peut servir lorsqu’elle est nécessaire pour représenter le sujet précis d’une fiche d’annuaire. Conservez alors la page source, l’auteur, la licence et la date de consultation, puis vérifiez les conditions applicables.
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, génère une image photoréaliste de plantation montrant mains, plant et terre. Conserve le prompt, l’outil et le fichier maître, puis signale la création IA. 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, la provenance générée et les contraintes de diffusion sont contrôlables.
Avant de continuer
Liste de contrôle
Cochez les contrôles réalisés pendant cette visite. Aucun choix n’est enregistré ; une case cochée ne constitue pas une validation automatique.
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 tutorials
Tutoriels pour comprendre l’accessibilité des images, formulaires, tableaux et structures de page.
Langue: en · Périmètre: International - W3C WAI — An alt decision tree
Arbre de décision pour choisir une alternative textuelle selon la fonction réelle de l’image.
Langue: en · Périmètre: International - Creative Commons — Licenses
Présentation des licences Creative Commons et des conditions qu’elles combinent.
Langue: en · Périmètre: International
Contrôle du lien: 2026-10-06 · Ces liens sont des ressources de lecture. Le service de réponses ne les consulte pas automatiquement. Un lien vérifié ne garantit pas l’actualité de chaque document.
Guides