/ Gestion du site
Comment préparer les photos de son site vitrine sans ralentir la page ?
Remettez à votre prestataire les meilleurs fichiers d’origine dont vous disposez, avec le rôle prévu pour chaque photo. Demandez ensuite des versions adaptées à la taille d’affichage et au mobile. Cette méthode conserve de la marge pour le recadrage et évite de télécharger un fichier de pleine définition pour une petite vignette.
Une bonne préparation commence par l’usage de la photo. L’image principale doit permettre de comprendre le sujet dès l’arrivée sur la page. Dans une galerie, chaque vue peut montrer un détail que le client a besoin de comparer. Ces emplacements demandent des choix différents de cadrage, de poids et de chargement.
Décider ce que chaque photo doit montrer
Imaginez un atelier fictif qui fabrique des luminaires. Sur l’accueil, une vue d’un luminaire en situation donne une idée du résultat et de l’échelle. Dans les réalisations, une vue rapprochée du matériau montre la finition. Une troisième photo peut expliquer comment la pièce se fixe, si c’est une question que les clients posent avant de demander un devis.
| Emplacement | Fichier à préparer | Point à convenir avec le prestataire |
|---|---|---|
| Image principale de l’accueil | Une vue d’ensemble nette avec de l’espace autour du sujet | Ce qui doit rester visible quand le cadrage se resserre sur mobile |
| Carte de prestation ou vignette | Une image qui reste compréhensible en petit | La taille réellement téléchargée pour cet emplacement |
| Galerie de réalisations | Une sélection de vues qui montrent des différences utiles | Les images visibles au départ et celles chargées plus bas |
| Vue de détail | Une photo assez nette pour distinguer la matière ou le geste | La nécessité d’un agrandissement sur demande |
Ouvrez vos photos en grand avant de les transmettre. Écartez les doublons et indiquez les éventuelles limites d’utilisation ou de cadrage. Si vous débutez avec peu d’images, partez des éléments que vous pouvez déjà photographier ou présenter. Que montrer sur un site d’artisan quand on débute ?
Distinguer les pixels et le poids du fichier
Les pixels décrivent les dimensions de l’image. Les kilo-octets et mégaoctets décrivent la quantité de données à transférer. Deux fichiers de mêmes dimensions peuvent avoir des poids différents selon le contenu, le format et le réglage de compression. Une vue détaillée de l’atelier peut être plus difficile à alléger qu’un produit photographié sur un fond uni. web.dev, « Image performance »
Choisir la taille selon la place à l’écran
Une image qui occupe 400 pixels de mise en page peut bénéficier d’un fichier de 800 pixels de large sur un écran qui utilise deux pixels physiques pour un pixel de mise en page. C’est un exemple de calcul, pas une dimension à appliquer à toutes les photos. Si la même image prend toute la largeur sur ordinateur, une version plus large peut être pertinente.
Le prestataire peut proposer plusieurs tailles d’un même visuel. Le navigateur choisit alors une version en fonction des informations fournies par la page et des conditions d’affichage. Un simple rétrécissement visuel dans la mise en page laisse le navigateur télécharger le fichier qui lui a été indiqué. web.dev, « Responsive images »
Compresser en regardant le résultat
Pour une photographie, comparez le JPEG et le WebP. L’AVIF peut aussi produire un fichier plus léger, selon l’image et les réglages. Demandez de comparer les fichiers à la taille où les visiteurs les verront. Sur un luminaire, regardez les contours, le grain du métal et les dégradés de lumière. Une compression trop forte peut effacer précisément les détails que la photo doit montrer. web.dev, « Image performance »
Un seuil unique en kilo-octets aurait peu de sens pour des images aussi différentes qu’un portrait, une petite vignette et une photo panoramique. Fixez un budget de poids pour les images chargées à l’ouverture, puis répartissez-le selon leur rôle.
Simulation de poids, avec des valeurs choisies pour le calcul. Si six photos de 1,8 Mo chacune sont toutes téléchargées à l’ouverture, elles représentent 10,8 Mo. Si les six versions optimisées pèsent chacune 250 Ko, elles représentent 1,5 Mo, en unités décimales. L’écart est de 9,3 Mo. Cette comparaison suppose que les six fichiers sont téléchargés dans les deux cas et exclut le reste de la page. Elle ne mesure ni un gain de temps ni un réglage de compression à reproduire.
Donner la priorité à la photo principale
Si la grande photo est visible dès l’arrivée, elle peut être l’élément qui détermine quand le contenu principal semble affiché. Dans ce cas, faites en sorte que le navigateur puisse la trouver rapidement. Une grande image ajoutée tard par un script, ou différée comme les images situées loin sous le premier écran, peut attendre avant de commencer à se charger. web.dev, « Optimize Largest Contentful Paint »
Dans une galerie longue, les images situées plus bas peuvent être téléchargées quand le lecteur s’en approche. Si certains détails nécessitent un fichier plus grand, réservez cette version à l’agrandissement sur demande. Prévoyez aussi les proportions des images dans la mise en page. Le navigateur peut ainsi réserver leur place et limiter les déplacements du texte pendant le chargement. web.dev, « Image performance »
Donner une description utile aux images
Le texte alternatif rend l’information portée par une image accessible lorsque celle-ci ne peut pas être vue. Pour la photo d’un projet, décrivez le détail qui compte dans le contexte. « Applique murale en laiton brossé, avec fixation dissimulée » peut être utile dans une fiche qui explique la pose. Une image purement décorative peut avoir un texte alternatif vide. Pour une image utilisée comme lien, le texte doit aider à comprendre l’action ou la destination. W3C, tutoriel sur les images
La légende visible a un autre rôle. Elle peut préciser le matériau, l’usage ou le contexte de la prise de vue. Identifiez une image d’illustration lorsque le lecteur pourrait la prendre pour une photo de votre équipe ou d’une réalisation réelle.
Remettre un dossier que le prestataire peut utiliser
Préparez un dossier d’originaux et un court tableau avec le nom du fichier, la page prévue, le sujet à préserver au recadrage et les précisions utiles à la légende. Pour l’atelier fictif, le fichier applique-laiton-fixation.jpg irait dans la page Réalisations. La note préciserait que la fixation doit rester visible et que la photo montre le modèle mural. Si vous mettez ensuite les images à jour vous-même, demandez si l’outil crée automatiquement des tailles adaptées ou si vous devez préparer chaque fichier.
Avec Leero, l’offre consultée le 8 novembre 2026 comprend l’intégration des contenus fournis et l’adaptation aux écrans courants, dans un forfait de 599 € HT pour jusqu’à dix pages définies au devis. Le montant à régler est de 599 € lorsque la franchise de TVA s’applique. La première version est prévue sous 48 heures ouvrées après réception de l’acompte et des éléments nécessaires, puis un aller-retour groupé est inclus. Le domaine reste à la charge du client, avec un repère indicatif d’environ 10 € par an. Le shooting photo est chiffré séparément s’il est demandé. Offre Leero · Conditions générales de vente
Dans le brief, précisez si vous attendez une simple intégration, plusieurs recadrages ou un travail de retouche. Ces opérations représentent des tâches différentes. L’exemple d’un visuel principal et d’une vignette aide à fixer un périmètre concret avant de décliner toute la galerie. Préparer le cahier des charges d’un site vitrine
Sources
Documents consultés le 8 novembre 2026.
- web.dev, « Responsive images ». Sélection de tailles et recadrages selon l’affichage.
- web.dev, « Image performance ». Formats, compression et dimensions d’affichage.
- web.dev, « Optimize Largest Contentful Paint », mis à jour le 31 mars 2025. Découverte et priorité de l’image principale.
- W3C, Web Accessibility Initiative, « Images Tutorial ». Alternatives textuelles selon le rôle de l’image.
- Leero, offre de site vitrine et conditions générales de vente. Prix, contenus fournis, périmètre et délais.
