Anne Guillard, photographe branding, et Codyweb : comment faire une image de marque forte sans ralentir votre site
La scène est classique.
Vous avez un business qui tourne, une offre claire, des clients satisfaits. Vous refaites votre site (ou une landing), vous investissez dans une séance photo branding, et vous vous dites : « Là, ça va enfin être au niveau. »
Puis, deux semaines après la mise en ligne :
Le site charge lentement (surtout sur mobile). Google PageSpeed vous met une claque. Vos images sont magnifiques… mais pèsent une tonne. Et vous découvrez que qualité visuelle et performance web ne vont pas toujours ensemble “par défaut”.
C’est précisément là que la collaboration Anne Guillard (photographe branding) et Codyweb prend tout son sens : rendre votre image forte, cohérente et exploitable, tout en respectant le web : SEO, poids des images, accessibilité, Core Web Vitals.
Photographe branding : une séance réussie, ce n’est pas “des photos”, c’est un système d’assets
Anne Guillard ne parle pas de “shooting” comme d’une simple production de photos jolies. Sa promesse est plus utile (et plus stratégique) : clarifier ce que vous voulez incarner, traduire votre positionnement en images, livrer une banque d’images branding pensée pour vos usages (site, réseaux, supports) et éviter la galerie de 300 photos “sympas” dont vous n’utilisez finalement que 6.
Cette approche repose aussi sur un travail en amont, centré sur l’humain. Le travail d’Anne Guillard ne consiste pas à produire une série de portraits standardisés, mais à aider les entrepreneurs à clarifier ce qu’ils veulent réellement incarner. Son regard s’appuie à la fois sur une connaissance fine du corps et du mouvement, héritée de son expérience passée de coach sportif de haut niveau, et sur une sensibilité artistique nourrie par un environnement familial créatif.
La séance est pensée comme un espace structuré et rassurant, où l’organisation permet de se concentrer sur l’essentiel : être à l’aise, cohérent avec son positionnement, et aligné avec ce que l’on propose réellement. Cette étape est clé pour obtenir des images qui inspirent confiance, racontent une valeur claire et s’intègrent naturellement dans un site, des réseaux ou des supports professionnels, sans jamais tomber dans une “version marketing” déconnectée de la réalité.
Et côté Codyweb, notre rôle commence souvent là où beaucoup s’arrêtent : transformer ce travail en assets web optimisés, faciles à maintenir et adaptés au numérique responsable : moins de fichiers inutiles, moins de poids, plus d’efficacité.
Photo branding vs SVG : le bon format au bon endroit
La question n’est pas “photo ou SVG ?”. La vraie question, c’est : qu’est-ce que vous voulez communiquer, et où ?
Quand la photo branding est indispensable
La photo branding sert à ce que le SVG ne fera jamais aussi bien : la confiance (visage, regard, présence), la nuance (lumière, matière, texture) et la crédibilité (vous, vos équipes, vos lieux, vos gestes). Sur les pages à enjeu (accueil, à propos, services, pages de conversion), une bonne photo fait souvent la différence entre “c’est joli” et “je vous crois”.
Quand le SVG est plus intelligent qu’une image
Le SVG est imbattable pour les logos, pictos, éléments UI, schémas simples, illustrations vectorielles “flat”, motifs légers répétables et formes décoratives. Pourquoi c’est clé en numérique responsable : un SVG est souvent plus léger, plus net sur tous les écrans, et scalable sans multiplier les fichiers.
Les erreurs fréquentes (et très coûteuses en performance)
- Utiliser une “photo” pour un pictogramme (alors qu’un SVG ferait 2 à 5 ko)
- Exporter un “SVG” qui contient une image intégrée (et qui pèse 800 ko)
- Mettre des photos HD partout, y compris en miniatures, et laisser le navigateur se débrouiller
WebP : le format à connaître pour optimiser les images d’un site web
Si vous devez retenir une règle simple : vos photos web ne devraient presque jamais être en PNG ou en JPG “brut” quand il s’agit de pages publiques.
Pourquoi le WebP est un bon standard pour la photo branding
Le WebP offre une excellente compression (souvent bien plus léger qu’un JPG à rendu équivalent), il est largement supporté sur les navigateurs modernes, et il est parfait pour portrait, ambiance, reportage, photo branding entrepreneur. C’est souvent la première optimisation simple qui fait remonter un score PageSpeed.
WebP vs JPG vs PNG : quand utiliser quoi ?
En pratique, le WebP couvre la majorité des photos (portrait, ambiance, branding). Le JPG peut servir dans certains cas spécifiques ou historiques. Le PNG est utile si vous avez une contrainte (transparence ou visuels très plats), mais dans beaucoup de cas, le SVG fait mieux. Pour de la photo branding : PNG = généralement un mauvais plan (trop lourd).
La méthode Codyweb × Anne Guillard pour une banque d’images branding web-ready
On applique une logique simple : penser usage réel, pas “export au hasard”.
1) Penser la séance en “placements web”, pas en “poses”
Avant même l’export, on décide les usages : hero desktop (accueil), hero mobile (recadrage vertical), portrait équipe (carré / rond), image d’illustration pour section service, miniatures pour blog / témoignages. Résultat : moins de fichiers… mais des fichiers qui servent vraiment.
2) Définir des tailles cibles (sinon vous exportez trop grand)
Quelques repères (à adapter selon votre design) : Hero desktop : 1600 à 2200 px de large ; image pleine largeur section : 1200 à 1600 px ; carte / vignette : 600 à 900 px ; portrait équipe : 600 à 800 px. Le but n’est pas “le plus grand possible”. Le but, c’est “juste assez” pour être net sur l’usage réel.
3) Convertir en WebP et contrôler le poids (sans ruiner le rendu)
Repères pragmatiques : vignette souvent < 80 ko, image de section souvent < 200 ko, hero viser < 300–500 ko si possible. Et oui : une hero à 1,8 Mo, ça arrive souvent… et ça plombe tout.
4) Charger “intelligemment” pour le SEO (Core Web Vitals)
Lazy-load pour les images hors écran, dimensions fixées (width/height) pour éviter les sauts (CLS), priorité sur l’image principale (LCP) : le hero doit être optimisé. Sur Next/Nuxt, les composants Image aident beaucoup… mais seulement si la source est propre.
SVG : ultra léger, mais attention aux “mauvais SVG”
Un SVG propre, c’est magique. Un SVG sale, c’est parfois pire qu’une image.
Bonnes pratiques SVG côté web
Supprimer les metadata inutiles, éviter les filtres lourds et les ombres complexes, limiter le nombre de points/paths, et préférer des pictos simples.
Quand le SVG est une mauvaise idée
Illustration ultra détaillée (peut devenir énorme), export “n’importe comment” (des milliers de nodes), ou SVG qui embarque une image (faux avantage, vrai poids).
Accessibilité : le détail qui change tout (et qui aide aussi le SEO)
Une image branding ne doit pas seulement être esthétique. Elle doit aussi être compréhensible dans le contexte de la page, y compris pour les utilisateurs qui ne la voient pas directement.
Lorsqu’une image apporte une information réelle — portrait, scène, action, personne identifiée — un texte alternatif descriptif est indispensable. À l’inverse, une image purement décorative ne doit pas parasiter la lecture : dans ce cas, un attribut alt="" permet aux technologies d’assistance de l’ignorer.
Il faut également être attentif au texte intégré directement dans les images. Ce contenu n’est ni lisible par les lecteurs d’écran, ni adaptable aux différents formats d’écran, ce qui pose des problèmes d’accessibilité et de responsive design.
Exemples concrets : pour un portrait professionnel, un texte alternatif comme alt="Anne Guillard, photographe branding entre Paris et la Normandie" est pertinent. Pour une image purement décorative, un alt="" est la meilleure option.
Exemple concret : organiser une banque d’images branding sans chaos
Une séance photo branding réussie peut vite devenir ingérable si les images ne sont pas organisées dès le départ. Sans règle claire, on se retrouve avec des dizaines de fichiers mal nommés, trop lourds ou inutilisés, difficiles à maintenir dans le temps.
Un kit d’images propre et exploitable pour le web ressemble plutôt à ceci :
hero-home@2x.webphero-home-mobile.webpportrait-anne.webpteam-mathieu.webpservice-plateforme.webpservice-seo.webpthumb-blog-01.webpàthumb-blog-12.webppictos/*.svg
Ce qui fait la différence, ce n’est pas le nombre de fichiers, mais la cohérence de l’ensemble. Une règle de nommage claire, des tailles définies selon les usages réels et des formats adaptés permettent de garder une banque d’images lisible, maintenable et réellement efficace pour le web.
Mini check-list numérique responsable avant de mettre vos images en ligne
Avant de publier vos images, quelques vérifications simples permettent d’éviter la majorité des problèmes de performance, d’accessibilité et de stabilité visuelle. Ces points ne demandent pas d’outils complexes, mais une attention réelle aux usages web.
Commencez par vérifier que chaque image est exportée à la bonne taille. Une image de 6 000 pixels de large n’a aucune utilité sur un site web et alourdit inutilement le chargement. L’objectif n’est pas d’avoir la meilleure définition possible, mais une définition adaptée à l’usage réel.
Assurez-vous ensuite que les photos sont converties dans un format moderne, comme le WebP, et que l’image principale de la page — souvent l’image hero — est correctement optimisée. Cette image influence directement le LCP et joue un rôle clé dans les Core Web Vitals.
Les images situées hors écran doivent être chargées de manière différée, afin de ne pas bloquer l’affichage initial. Pensez également à fixer les dimensions des images (largeur et hauteur) pour éviter les décalages visuels au chargement, responsables de mauvais scores CLS.
Enfin, vérifiez que les éléments d’interface et les pictogrammes sont bien fournis en SVG propre, et que les attributs alt sont cohérents. Un texte alternatif pertinent améliore à la fois l’accessibilité et le SEO, tandis qu’un alt="" est indispensable pour les images purement décoratives.
FAQ : photo branding, WebP, SVG et performance web
Quel format d’image choisir pour un site rapide : WebP ou JPG ?
Pour la plupart des sites, le WebP est le meilleur choix pour les photos : il réduit le poids à rendu équivalent et améliore souvent le score PageSpeed. Le JPG peut rester utile en cas de contrainte spécifique ou de compatibilité historique, mais sur un site moderne, WebP est généralement prioritaire.
Pourquoi mon score Google PageSpeed baisse après une séance photo branding ?
Parce que les photos livrées sont souvent en haute définition et non optimisées pour le web (tailles trop grandes, compression insuffisante, formats inadaptés). En passant par une logique “placements web”, conversion WebP et contrôle du poids, on garde le rendu… sans ralentir le site.
SVG ou PNG pour un logo : qu’est-ce qui est mieux ?
Pour un logo et des pictos, le SVG est presque toujours le meilleur choix : il est léger, net sur tous les écrans et scalable. Le PNG est utile si vous avez une contrainte particulière (effets complexes, rendu raster imposé), mais en général, SVG est le format web le plus propre.
Comment réduire le poids des images sans perdre en qualité ?
En combinant 3 choses : exporter à la bonne taille (pas plus grand que l’usage réel), convertir en WebP, et viser des poids cibles réalistes (vignette < 80 ko, section < 200 ko, hero < 300–500 ko). L’objectif est de garder un rendu net, pas d’avoir “le fichier le plus léger possible”.
Est-ce que les images impactent vraiment le SEO ?
Oui. Les images influencent la performance (LCP/CLS), donc l’expérience utilisateur, donc les signaux SEO. Elles peuvent aussi apparaître dans Google Images si les alt et le contexte sont cohérents. Un site rapide et stable convertit mieux et se positionne plus facilement sur des requêtes concurrentielles.
Qu’est-ce que le LCP et pourquoi l’image hero est critique ?
Le LCP (Largest Contentful Paint) mesure le temps d’affichage de l’élément principal visible au chargement. Sur beaucoup de pages, c’est l’image hero. Si elle est trop lourde ou mal chargée, elle dégrade les Core Web Vitals et votre score PageSpeed.
- vote(s)
