Photos pour le web

Les photos d'un photographe, d'un fichier d'imprimerie ou directement d'un smartphone sont faites pour le papier ou un grand écran. Sur un site web, elles sont cinq à vingt fois trop lourdes : la page se charge lentement, le visiteur sur téléphone attend, et le stockage du serveur se remplit. Cette page explique pourquoi, et comment préparer une photo pour le web en quelques minutes.

Où téléverser une photo et comment la gérer ensuite, c'est sur Gérer les ressources. Cette page traite de ce que vous faites avant ce téléversement.

L'essentiel

Ce à quoi une photo pour le site doit répondre

• Format : JPG pour les photos, PNG pour les captures d'écran et les logos transparents. Pas de HEIC, TIFF, PSD ni PDF.
• Taille en pixels : 1600 de large pour une photo ordinaire dans un bloc, 1200 pour un portrait ou Photo + texte, 2400 pour Photo avec superposition, 3600 à 4800 pour le header de la page d'accueil. Voir le tableau par bloc.
• Poids du fichier : moins de 500 Ko, header de page d'accueil jusqu'à 1,5 Mo.
• Qualité à l'export : JPG 70 à 80 %, espace colorimétrique sRGB, sans métadonnées.
• Dpi : sans effet sur un écran. Réduisez le nombre de pixels, pas la valeur dpi.
• Proportion : choisissez la photo en pensant au bloc (16:9 pour Photo et les actualités, carré pour les portraits).
• Réduire avant le téléversement : le CMS ne réduit pas le fichier lui-même, et Photo + texte et Carrousel photo affichent le fichier exactement tel que vous le téléversez.

Vous réduisez en quelques clics avec Aperçu (Mac), Photos (Windows) ou Squoosh, voir Quel logiciel ?.

Impression et écran

Des pixels, pas des dpi

Une photo numérique est une grille de pixels : par exemple 4000 pixels de large sur 3000 de haut. C'est la seule mesure qu'un écran connaît.

Le dpi (dots per inch, points par pouce) est autre chose : une consigne pour l'imprimeur qui indique combien de ces pixels doivent tenir dans un pouce de papier. Une imprimerie demande 300 dpi parce que le papier restitue bien plus de détail qu'un écran. Un navigateur ignore complètement cette valeur.

Usage	Ce qui compte	Exemple
Impression	pixels et dpi, ensemble ils fixent la taille sur papier	Une photo A4 en 300 dpi fait 3508 × 2480 pixels
Écran / site web	uniquement les pixels	Un écran Full HD fait 1920 × 1080 pixels ; la colonne de contenu de votre site fait environ 1140 pixels de large ; un smartphone environ 400 pixels

Deux conséquences souvent mal comprises :

• « 300 dpi » et « 72 dpi » ne disent rien sur le poids du fichier. Une photo de 4000 × 3000 pixels pèse autant en 300 dpi qu'en 72 dpi. Seule la réduction du nombre de pixels allège le fichier.
• Plus de pixels que l'écran n'en affiche, c'est du gaspillage. Une photo de 4000 pixels de large dans une colonne de 570 pixels : le navigateur télécharge tout, puis en jette 98 %.

Règle simple : deux fois la largeur d'affichage

Les écrans modernes (retina, haute densité) affichent deux pixels par point. Fournissez donc environ deux fois la largeur d'affichage, et rarement plus de 2400 pixels de large. Seul le header de la page d'accueil en demande davantage.

Proportion

La proportion (ou rapport d'image, aspect ratio) est le rapport largeur/hauteur : 16:9 est large et bas (format télé), 4:3 est classique, 1:1 est carré, 2:3 est vertical (portrait). Chaque bloc attend une proportion donnée ; si votre photo s'en écarte, le CMS la rogne et des bords disparaissent. Choisissez donc la photo en pensant à sa destination, ou rognez-la vous-même au préalable.

Couleur : RVB, pas CMJN

Les fichiers d'imprimerie sont souvent en CMJN (les quatre encres d'impression). Un écran travaille en RVB. Une photo CMJN peut apparaître terne ou avec des couleurs décalées dans le navigateur. Pour le web, exportez toujours en RVB (dans la plupart des logiciels : sRGB).

Formats de fichier

Format	À utiliser pour	Pas pour
JPG	Les photos : beaucoup de couleurs et de dégradés. Fichier léger, qualité réglable à l'export.	Logos, captures d'écran, tout ce qui a de la transparence (le JPG ne la gère pas).
PNG	Captures d'écran, graphiques, logos à fond transparent. Sans perte, donc les bords nets restent nets.	Les photos : un PNG d'une photo pèse trois à dix fois plus que le même JPG.
WebP	Alternative au JPG et au PNG, en général 25 à 35 % plus léger. Tous les navigateurs modernes l'affichent.	L'édition dans des logiciels anciens ; gardez l'original en JPG ou PNG.
SVG	Logos et icônes en dessin vectoriel. S'agrandit sans perte et ne pèse presque rien.	Les photos ; elles n'existent pas en vectoriel.
GIF	Animations simples.	Les photos (256 couleurs maximum, fichier lourd).

Formats à convertir d'abord avant de téléverser :

• HEIC (par défaut sur iPhone) : les navigateurs ne l'affichent pas. Exportez en JPG.
• TIFF, PSD, RAW, AI, EPS : formats d'impression et d'édition, souvent des dizaines de Mo. Exportez en JPG ou PNG.
• PDF : parfait pour un document, pas comme image dans un bloc.

Ce que le CMS fait lui-même, ou pas

Quand il affiche une page, le CMS crée pour la plupart des blocs une version adaptée de votre photo : rognée à la bonne proportion et parfois convertie en WebP. Mais le comportement diffère selon le bloc, et trois choses ne sont jamais faites :

• Réduire le fichier téléversé lui-même. Une photo de 8 Mo reste 8 Mo sur le serveur, même si le visiteur en voit une version plus petite.
• Rendre nette une photo trop petite. Si votre photo est plus petite que ce que le bloc demande, le CMS l'étire et elle paraît floue.
• Juger la composition. Le rognage est centré, sauf si vous avez placé un point focal.

Par bloc ou champ

Où	Ce que le CMS en fait	À fournir
Photo	Rogne à 465 pixels de haut, la largeur suit la photo. La qualité est réduite.	1600 pixels de large, proportion 16:9
Photo + texte	Ne réduit pas : la taille complète en pixels part chez le visiteur.	1200 pixels de large, vertical ou carré
Carrousel photo	Rien : le fichier part tel quel chez le visiteur.	1600 pixels de large, toutes les photos dans la même proportion
Photo avec superposition	Crée des variantes WebP jusqu'à 2400 pixels de large (3600 en Pleine largeur). La proportion est conservée.	2400 pixels de large (3600 en Pleine largeur)
Portrait Équipe	Carré 600 × 600, rogné autour du point focal ou du Crop focus.	Au moins 800 × 800, carré
Photo de bureau	Rognée à 1066 × 1002, centrée.	Au moins 1200 × 1200
Portrait Référence	Rond, 200 × 200.	400 × 400
Photo d'actualité	Vignette de 200 pixels de haut dans les aperçus.	1600 pixels de large, proportion 16:9
Header de la page d'accueil	Rogné en 8:3 ou 16:9 depuis le bord supérieur ; plusieurs tailles.	3600 à 4800 pixels de large
Bannière de rendez-vous	Rognée à ±3:1 ; plusieurs tailles.	2400 × 800 ou plus
Image SEO	SEOmate crée lui-même les formats pour les réseaux sociaux.	Au moins 1200 pixels de large

Photo + texte et Carrousel photo affichent ce que vous téléversez

Pour ces deux blocs, il n'y a pas de filet de sécurité : une photo de 6000 pixels et 7 Mo part intégralement chez chaque visiteur. Réduisez toujours avant.

Métadonnées

Une photo de smartphone contient des données cachées (EXIF) : appareil, date et souvent la position GPS. Pour les blocs qui retravaillent la photo, le CMS les supprime. Pour les blocs qui transmettent le fichier tel quel (Carrousel photo), elles restent et un visiteur peut les lire. La plupart des logiciels d'export ont une option supprimer les métadonnées ; utilisez-la pour les photos de personnes ou de lieux privés.

Prête à téléverser en cinq étapes

1. Choisissez la photo en pensant au bloc. Cherchez la proportion dans le tableau ci-dessus. Un portrait vertical dans le bloc Photo perd la moitié en haut et en bas.
2. Rognez à la proportion (facultatif). Faites-le vous-même si le sujet n'est pas au centre ; sinon le point focal dans le CMS suffit.
3. Réduisez à la taille à fournir, en pixels. Modifiez la largeur ; la hauteur suit automatiquement. Ne touchez pas à la valeur dpi, mais au nombre de pixels.
4. Exportez en JPG (photo) ou PNG (graphique, logo transparent). Pour le JPG : qualité 70 à 80 %, espace colorimétrique sRGB, sans métadonnées.
5. Vérifiez le poids du fichier. Repère : moins de 500 Ko pour une photo dans un bloc, jusqu'à 1,5 Mo pour un header de page d'accueil. Trop lourd ? Baissez la qualité JPG d'un cran ou réduisez encore.

Renommez tout de suite le fichier de façon reconnaissable (bureau-namur-facade.jpg plutôt que IMG_4287.jpg) et téléversez-le ensuite via Ressources.

Quel logiciel ?

Logiciel	Réduire	Exporter et compresser
Aperçu (Mac)	Menu Outils → Ajuster la taille, largeur en pixels.	Fichier → Exporter, format JPEG, curseur de qualité.
Photos (Windows)	Bouton … → Redimensionner, largeur en pixels.	Même fenêtre, JPG avec qualité.
iPhone	Partager par Mail et choisir Moyenne ou Grande. Dans Réglages → Appareil photo, choisissez le format Le plus compatible pour obtenir du JPG au lieu du HEIC.	Automatique au partage.
Squoosh (navigateur)	Panneau Resize, largeur en pixels. La photo ne quitte pas votre ordinateur.	Choisissez MozJPEG ou WebP, réglez la qualité, comparez gauche et droite.
TinyPNG (navigateur)	Non, réduisez avant.	Glissez le fichier ; compresse JPG, PNG et WebP sans perte visible.
Canva	Concevez à la taille à fournir, en pixels.	Partager → Télécharger, JPG, curseur Taille sur 1×.

Vérifier dans le CMS

Ouvrez un fichier dans Ressources. Dans la colonne de droite, vous lisez Dimensions (en pixels) et Taille du fichier. Vous voyez ainsi tout de suite si un collègue a téléversé un fichier d'imprimerie.

Un fichier trop lourd déjà utilisé dans des blocs, ne le supprimez pas : créez une version réduite et écrasez l'ancienne avec Remplacer le fichier. Tous les blocs utilisent aussitôt la nouvelle version, et les visiteurs la voient sans problème de cache.

Erreurs fréquentes

• Téléverser directement le fichier d'impression du photographe. 300 dpi, 5000 pixels, 12 Mo. Demandez au photographe une version web (1600 à 2400 pixels de large, JPG) ou créez-la vous-même avec les étapes ci-dessus.
• Ne baisser que les dpi. Passer de 300 à 72 dpi sans changer le nombre de pixels ne change rien au fichier.
• Enregistrer une photo en PNG. Trois à dix fois plus lourd que le JPG, sans différence visible.
• Enregistrer une capture d'écran en JPG. Le texte et les lignes deviennent granuleux. Utilisez le PNG.
• Utiliser une photo trop petite, par exemple une vignette de 300 pixels tirée d'un e-mail. Le CMS l'étire et elle paraît floue. Cherchez l'original.
• Du texte dans la photo elle-même. Illisible après rognage sur mobile et intraduisible. Mettez le texte dans un Titre, un bloc Texte ou via Photo avec superposition.
• Téléverser du HEIC depuis un iPhone. Le navigateur n'affiche rien. Exportez d'abord en JPG.