Définissez ce que chaque photo doit expliquer
Imaginons un atelier de céramique préparant un catalogue de tasses artisanales. Une vignette permet de reconnaître une forme ; la page produit montre l’anse, le bord et l’émail. Inscrivez ces objectifs dans les consignes photographiques. Une mise en scène spectaculaire sur une table peut convenir à la collection sans permettre d’évaluer chaque tasse.
MDN distingue le changement de résolution d’une image du choix d’un cadrage adapté à la présentation. Validez celui de la tasse à chaque emplacement. Vérifiez que l’anse reste visible et qu’un cadrage serré ne laisse pas croire que l’objet apparaît en entier. Des photos de détail peuvent répondre à d’autres questions qu’un simple recadrage.
Prévoyez comment décliner un original en fichiers utiles
Web.dev explique comment srcset et sizes aident les navigateurs à sélectionner les fichiers selon leur affichage. Demandez au développeur quel fichier une vignette télécharge réellement sur téléphone. Une image paraissant petite ne prouve pas que le fichier transmis est correctement dimensionné.
Conservez l’original validé et documentez la production des versions web. Le redimensionnement automatique réduit les tâches répétitives ; les exports manuels donnent un contrôle direct au responsable éditorial, mais ajoutent des étapes à chaque changement. Désignez qui vérifie les détails de l’émail après traitement. Comparez les versions à leur taille d’affichage prévue avant publication.
Stabilisez le catalogue pendant son ouverture
Web.dev recommande de préciser les dimensions des images ou de réserver un espace respectant leurs proportions pour éviter les déplacements de contenu. Observez une rangée de vignettes du catalogue pendant le chargement des photos. Noms et liens des produits doivent rester faciles à suivre, sans changer brusquement de position.
Un format uniforme facilite les comparaisons, mais nécessite une règle éditoriale pour les pièces particulièrement hautes ou larges. Décidez entre montrer l’objet entier avec de l’espace autour et préparer une autre composition. Testez l’ajout d’un grand vase parmi les tasses avant de valider le modèle réutilisable.
Choisissez les images qui peuvent attendre
Les recommandations de web.dev sur le chargement différé préconisent de reporter les images hors écran et de charger immédiatement celles visibles au départ. Appliquez ce choix à la présentation réelle du catalogue. La première vue produit et une longue galerie en bas de page interviennent à différents moments de la décision.
Faites défiler la galerie avec une connexion plus lente. Signalez à l’équipe tout espace vide gênant une comparaison utile, pour investigation. Supprimer toutes les photos supplémentaires peut alléger la page tout en privant le client des détails nécessaires pour se renseigner. Gardez celles qui répondent à une question distincte.
Répétez la prochaine mise à jour du catalogue
Faites remplacer une photo de tasse par le responsable éditorial habituel, avec les consignes de livraison. Examinez ensemble la page obtenue et corrigez la méthode avant la prochaine collection. Gardez une courte liste de contrôle avec les exemples validés.
- Vérifiez l’objet entier et les détails importants dans les vignettes et pages produit.
- Contrôlez fichiers et volumes transférés sur des présentations représentatives pour téléphone et ordinateur.
- Observez le chargement du catalogue et l’ajout d’un objet de forme inhabituelle.
- Parcourez la galerie et vérifiez l’apport d’information de chaque photo.
- Désignez qui valide les exports, les cadrages et les remplacements ultérieurs.