Comment préparer, redimensionner et optimiser ses photos pour le Web ?

Il y a quelques années, j’ai reçu par Internet un dossier contenant seulement neuf photos… pour un poids total de 36 Mo.

La personne qui m’avait transmis ces fichiers m’a alors expliqué qu’elle ne savait pas vraiment comment préparer ses photos pour les diffuser sur le Web.

Je lui ai donc envoyé un ancien tutoriel que j’avais publié en 2012. À l’époque, les appareils photo produisaient déjà des fichiers beaucoup plus lourds que nécessaire pour Internet, mais les usages du Web étaient très différents.

Aujourd’hui, nos appareils produisent facilement des fichiers de plusieurs dizaines de millions de pixels. Les écrans haute définition se sont généralisés, les smartphones ont changé les habitudes de consultation et les sites Web doivent s’adapter à des écrans de toutes tailles.

Une photographie destinée au Web n’a donc aucune raison de conserver les dimensions et le poids de son fichier original.

Le principe reste pourtant très simple :

je conserve mon fichier original, je travaille sur une copie et j’exporte une version adaptée à l’usage prévu.

Dans cet article, je vais montrer comment je prépare mes photos pour le Web avec deux logiciels : Lightroom et Photoshop

Pourquoi préparer ses photos pour le Web ?

Une photographie sortie directement d’un appareil photo est beaucoup trop grande pour être publiée telle quelle sur un site. Un fichier JPEG de plusieurs milliers de pixels de côté peut facilement peser plusieurs mégaoctets. Un fichier RAW peut être encore beaucoup plus volumineux, mais il n’est de toute façon pas destiné à être utilisé directement comme photographie affichée sur une page Web.

Le problème n’est pas uniquement la place occupée sur le serveur. Une photographie trop lourde doit être téléchargée par le navigateur avant de pouvoir être affichée. Sur une connexion rapide, cela peut sembler anodin. Sur un smartphone connecté à un réseau mobile moins performant, quelques mégaoctets supplémentaires peuvent au contraire ralentir considérablement le chargement d’une page.

Les photographies constituent d’ailleurs souvent une part importante du poids total d’une page Web. Google recommande donc de travailler sur la qualité, le poids et les techniques d’affichage responsive pour conserver un bon compromis entre qualité photographique et vitesse de chargement.

Il faut donc trouver un équilibre entre :

• la qualité de la photographie
• ses dimensions en pixels
• son poids en kilo-octets ou mégaoctets
• son format
• son espace colorimétrique
• son utilisation sur ordinateur ou smartphone
• la vitesse de chargement de la page

Une photo pour le Web n’est pas une photo pour l’impression

C’est une distinction importante. Pour une impression, je peux avoir besoin d’un fichier très volumineux avec une résolution adaptée au procédé d’impression. Pour le Web, ce sont avant tout les dimensions en pixels qui déterminent la taille d’affichage de la photographie.

C’est pourquoi le fameux « 72 dpi pour Internet » est aujourd’hui une mauvaise manière de présenter le problème. Une photographie de 2000 × 1333 pixels reste une photographie de 2000 × 1333 pixels qu’elle soit enregistrée à 72, 96, 150 ou 300 ppp.

Pour une photographie destinée uniquement à un écran, je m’intéresse donc d’abord aux dimensions en pixels et au poids du fichier.

Quelle taille choisir pour une photo destinée au Web ?

En 2012, je conseillais une longueur maximale de 800 pixels. Un smartphone moderne, un écran Retina ou un grand écran d’ordinateur peuvent afficher beaucoup plus de détails.

Il n’existe toutefois pas une dimension magique valable pour toutes les situations.

Ce sont des ordres de grandeur, pas des règles absolues.

Sur WordPress, par exemple, le site peut générer automatiquement plusieurs tailles d’une même photographie et utiliser celle qui correspond le mieux à l’affichage demandé. Google recommande justement l’utilisation d’images responsives avec srcset ou picture afin d’éviter d’envoyer systématiquement la même photographie lourde à tous les appareils.

Le poids du fichier compte autant que sa taille

Deux photographies de 2000 pixels de large peuvent avoir des poids très différents. Une photographie contenant beaucoup de détails, du feuillage, du bruit numérique ou des textures fines sera généralement plus difficile à compresser qu’une photographie avec de grandes zones uniformes.

Pour une photographie JPEG classique destinée à un article, quelques centaines de kilo-octets constituent souvent un bon objectif. Une photographie très détaillée ou destinée à être affichée en grand peut naturellement être plus lourde.

L’objectif est surtout d’éviter de publier une photographie de 4 ou 8 Mo lorsque le navigateur n’a besoin que d’une version de quelques centaines de kilo-octets.

Quel format utiliser pour une photographie sur le Web ?

Le JPEG reste parfaitement adapté à de nombreuses photographies. Mais le Web moderne ne se limite plus au JPEG. Les formats WebP et AVIF sont désormais largement pris en charge et sont également reconnus par Google pour la recherche d’images.

Pour une photographie, je peux donc rencontrer principalement :

• JPEG : très compatible et toujours pertinent
• WebP : excellent compromis entre qualité et poids
• AVIF : compression très efficace, particulièrement intéressant lorsque le système de publication le prend correctement en charge
• PNG : à réserver principalement aux éléments nécessitant une compression sans perte ou de la transparence, plutôt qu’aux photographies classiques

Sur un site WordPress moderne, Je laisse un plugin d’optimisation produire et distribuer les formats adaptés à partir d’un JPEG.

Pourquoi utiliser le profil sRVB ?

Une photographie destinée au Web doit généralement être exportée en sRVB. C’est particulièrement important lorsque la photographie doit être consultée sur différents ordinateurs, smartphones et navigateurs. Si je conserve un espace colorimétrique destiné au travail photographique, comme Adobe RGB ou ProPhoto RGB, les couleurs peuvent être interprétées différemment selon la chaîne d’affichage.

Dans Lightroom, je peux directement choisir l’espace colorimétrique lors de l’exportation. Adobe permet notamment de sélectionner sRVB, Adobe RGB ou ProPhoto RGB selon l’utilisation prévue.

Pour mes publications Web, je choisis donc sRVB.

Préparer ses photos avec Lightroom Classic

Lightroom Classic reste probablement la solution la plus confortable lorsque je dois préparer plusieurs photographies issues d’un même reportage.

Je commence par effectuer mon travail photographique habituel :

1. tri des photographies
2. développement RAW
3. corrections
4. recadrage éventuel
5. harmonisation de la série
6. ajout des informations IPTC
7. sélection des photographies destinées au Web.

Je sélectionne ensuite les photographies puis je choisis : Fichier > Exporter (ou CTRL + MAJ + E)

Lors d’un premier export de photo

Lors d’un premier export, ou pour de nouveaux paramètres d’exportation, il faut créer un parametre prédéfini.

Cluqez sur Ajouter et entrer le nom de l’export. Il doit etre facile à comprendre pour l’identifier facielement. Les maramètres prédéfinis peuvent etre organisés dans des dossiers.

Choisir le format JPEG et l’espace colorimétrique

Dans la fenêtre d’exportation :

1. Je choisis le format JPEG lorsque je souhaite obtenir un fichier universel et facilement exploitable.
2. Je règle ensuite la qualité : Il n’est pas nécessaire de pousser systématiquement la qualité à 100. Une qualité comprise autour de 75 à 85 constitue souvent un bon point de départ pour une photographie destinée au Web.
3. Je selectionne l’espace colorimétrique : Dans Espace colorimétrique, je choisis : sRVB
4. Je vérifie ensuite le résultat visuellement.

Choisir la dimension

Dans la rubrique Dimensionnement de l’image, je choisis généralement Bord large. Par exemple : Bord large : 2000 pixels

Cette méthode présente un avantage important : Lightroom conserve automatiquement le rapport hauteur/largeur de la photographie.

Une photographie horizontale et une photographie verticale peuvent donc être exportées avec la même longueur maximale sans que je sois obligé de calculer leurs dimensions respectives. Adobe documente précisément ce fonctionnement dans les paramètres d’exportation de Lightroom Classic.

Je vérifie également l’option permettant de ne pas agrandir une photographie déjà plus petite.

Ajouter une accentuation de sortie

Une photographie redimensionnée peut perdre un peu de netteté.

Lightroom propose une accentuation de sortie spécifiquement prévue pour cette situation.

Pour une publication Web, je sélectionne : Netteté de sortie : Écran

Adobe permet de choisir le support de sortie et un niveau d’accentuation faible, standard ou élevé.

Dans la majorité des cas, je conserve le réglage standard.

D’autres paramètres d’exportation

Il est possible de choisr ou sont placée les photos préparées par un paramètre prédéfini, de choisir la dénomition du fichier c’est à dire le nom du fichier et comment sont gérées les métadonnées.

Enregistrer le réglage

L’un des avantages de Lightroom est de pouvoir enregistrer ces paramètres sous forme de paramètre prédéfini d’exportation.

Je peux ainsi créer un preset nommé par exemple : Web – 2000 px – JPEG – sRVB

Pour enregistrer le paramètre prédéfini il faut faire un clic droit sur le nom du paramètre et mettre à jour avec les paramètres actuels.

La fois suivante, je sélectionne mes photographies, je choisis ce preset et Lightroom s’occupe du reste. C’est particulièrement intéressant pour une série de plusieurs dizaines de photographies.

Préparer ses photos avec Photoshop

Photoshop est particulièrement intéressant lorsque je travaille sur une photographie individuellement ou lorsque j’ai besoin d’effectuer une retouche précise avant l’exportation.

Je commence par conserver mon fichier de travail, puis je crée la version destinée au Web.

Redimensionner la photographie

Dans Photoshop, je peux utiliser : Image > Taille de l’image

Je définis alors la dimension souhaitée en pixels, par exemple : 2000 pixels sur le bord le plus long

Je vérifie que le rapport entre la largeur et la hauteur est conservé.

Je peux ensuite effectuer mes dernières corrections, notamment une accentuation adaptée à la réduction de taille.

Enregistrer la photo pour le web avec photoshop

Une fois la taille de l’image paramètrée, il faut encore enregistrer la photo : Fichier > Enregistrer une copie

Exporter la photographie

Pour une utilisation régulière, Photoshop permet de configurer l’exportation et notamment le format JPEG, la qualité et la conversion vers le sRVB.

Les versions récentes de Photoshop proposent également Fichier > Exportation > Exportation rapide, avec des paramètres prédéfinis permettant de répéter rapidement une exportation identique. Adobe permet notamment de choisir le format JPEG, la qualité et la conversion en sRVB.

Cette fonction est particulièrement pratique lorsque je dois préparer régulièrement des photographies avec les mêmes paramètres.

Automatiser avec Photoshop

Si je dois traiter plusieurs dizaines ou centaines de photographies, je ne vais évidemment pas répéter manuellement toutes les opérations. Photoshop permet d’utiliser des actions et des traitements automatisés via des scripts.

Je peux ainsi enregistrer une succession d’opérations :

• redimensionnement
• accentuation
• conversion éventuelle
• exportation.

Cette méthode reste intéressante lorsque mon flux de travail nécessite une intervention spécifique et répétitive de Photoshop.

Lightroom vs Creative Cloud pour les photographes

Lightroom Classic

Permet de faire fonctionne Lightroom Classic durant 1 an

🛒 Voir le prix

Creative Cloud

Permet de faire fonctionner Lightroom et Photoshop durant 1 an

🛒 Voir le prix

Les alternatives à Lightroom et Photoshop

Lightroom et Photoshop sont loin d’être les seuls logiciels capables de préparer des photographies pour le Web.

Les principes présentés dans ce tutoriel restent les mêmes quel que soit le logiciel utilisé : redimensionner la photographie, choisir un format adapté, maîtriser la compression, utiliser le sRVB et exporter une version adaptée à son usage.

Il existe aujourd’hui de nombreuses alternatives, gratuites ou payantes.

Les alternatives gratuites

darktable est probablement l’une des alternatives gratuites les plus complètes à Lightroom. Ce logiciel libre permet de gérer une photothèque et de développer les fichiers RAW avec un flux de travail non destructif. Il propose également les fonctions nécessaires pour exporter des photographies adaptées au Web.

RawTherapee est une autre solution gratuite et open source particulièrement orientée vers le développement des fichiers RAW. Il fonctionne sous Windows, macOS et Linux et dispose d’un système d’exportation permettant de produire les fichiers destinés à la publication.

Pour remplacer Photoshop, GIMP reste une référence. Ce logiciel libre et multiplateforme propose notamment les calques, les masques, les sélections et de nombreux outils de retouche. Il permet donc parfaitement de préparer une photographie avant sa publication sur le Web.

Affinity constitue également une alternative intéressante pour la retouche photographique. Il peut remplacer une partie du travail réalisé habituellement avec Photoshop, notamment pour le redimensionnement, les retouches et le travail avec les calques.

Les alternatives payantes

Si je recherche une solution payante en dehors de l’écosystème Adobe, Capture One constitue une alternative connue à Lightroom, notamment pour le développement RAW et la gestion du flux de travail photographique.

DxO PhotoLab est une autre solution particulièrement intéressante pour le développement RAW. Il se distingue notamment par ses corrections optiques et son traitement du bruit avec DeepPRIME. PhotoLab 9 propose également des outils de retouche locale et des fonctions d’exportation complètes.

D’autres logiciels comme ON1 Photo RAW ou Luminar Neo proposent également des flux de travail complets pour les photographes.

Quel logiciel choisir ?

Pour préparer une photographie destinée au Web, je n’ai pas besoin du logiciel le plus complet du marché.

• Si je possède déjà Lightroom ou Photoshop, je peux continuer à les utiliser sans problème.
• Si je cherche une solution gratuite, darktable et RawTherapee sont de bonnes alternatives pour le développement RAW, tandis que GIMP et Affinity permettent de réaliser une grande partie du travail de retouche.

L’essentiel n’est finalement pas le logiciel choisi, mais les réglages utilisés lors de l’exportation. Une photographie destinée au Web doit être suffisamment grande pour son utilisation, mais pas inutilement lourde. Elle doit également être exportée dans un format adapté et, dans la plupart des cas, en sRVB.

C’est cette méthode qui compte bien davantage que le logiciel utilisé.

Le nom du fichier participe au référencement de la photographie

Le nom du fichier doit être :

• descriptif
• compréhensible
• suffisamment court
• lié au sujet de la photographie
• écrit avec des mots séparés par des tirets.

Je préfère donc : eclair-orage-toulouse.jpgà : IMG_20260822_184523.jpg

Le nom du fichier ne doit cependant pas devenir une liste de mots-clés. Le référencement d’une photographie repose sur l’ensemble de son contexte : le nom du fichier, le texte de la page, la légende, le texte alternatif et les autres informations disponibles. Google précise notamment que les photographies doivent être placées à proximité d’un contenu pertinent pour faciliter leur compréhension et leur indexation.

Ne pas oublier le texte alternatif

Le texte alternatif, ou attribut alt, n’est pas une légende cachée destinée à Google. Il sert notamment aux personnes qui utilisent un lecteur d’écran lorsque la photographie ne peut pas être vue.

Je dois donc décrire ce qui est réellement visible. Par exemple :

1. Bon exemple : Éclair frappant un orage au-dessus de Toulouse la nuit
2. Mauvais exemple : photo orage Toulouse éclair photographie orage Toulouse photographe Toulouse

Le second exemple cherche artificiellement à multiplier les mots-clés et dégrade l’accessibilité.

Google recommande explicitement un texte alternatif utile, descriptif et intégré au contexte de la page plutôt qu’un bourrage de mots-clés.

Faut-il supprimer les métadonnées ?

Pas systématiquement. Les métadonnées peuvent contenir des informations très utiles : auteur, copyright, coordonnées, légende, mots-clés, informations IPTC, etc. Dans le cadre d’une photographie professionnelle, je préfère généralement conserver les informations pertinentes.

Google exploite certaines métadonnées photographiques IPTC ou des données structurées pour comprendre les informations relatives aux droits et aux licences.

Je ne conseille donc pas de supprimer automatiquement toutes les métadonnées simplement pour gagner quelques kilo-octets. Il faut plutôt déterminer quelles informations sont utiles et lesquelles ne doivent pas être publiées.

Mon réglage de base pour une photographie destinée au Web

Si je devais aujourd’hui résumer ma méthode en quelques réglages, je partirais généralement sur :

Ces valeurs ne sont pas gravées dans le marbre. Une photographie destinée à un portfolio plein écran, une galerie, un article de blog ou une miniature n’a pas forcément besoin des mêmes paramètres.

Ma méthode pour ne plus envoyer 36 Mo pour neuf photos

Si je reprends l’exemple du début, neuf photographies pour 36 Mo représentent environ 4 Mo par photographie. Pour un simple partage Web, c’est généralement beaucoup trop. Je conserverais donc les fichiers originaux dans mon catalogue ou mon archivage photographique, puis je créerais une nouvelle série spécialement destinée à l’envoi ou à la publication.

• Avec Lightroom, je peux sélectionner les neuf photographies et appliquer mon preset d’exportation.
• Avec Photoshop, je peux utiliser une action ou une exportation configurée pour produire les mêmes caractéristiques.

Je peux alors obtenir neuf photographies beaucoup plus légères, sans modifier mes fichiers originaux. C’est une habitude simple qui évite de nombreux problèmes.

Les erreurs que je vois encore régulièrement

Même avec les outils actuels, certaines erreurs reviennent régulièrement :

• Envoyer le fichier RAW : Le RAW est un fichier de travail photographique, pas un fichier destiné à être publié directement sur un site.
• Envoyer le JPEG original sorti de l’appareil : Il peut être parfaitement adapté à l’archivage ou à une utilisation ultérieure, mais il est souvent beaucoup trop volumineux pour une publication Web.
• Utiliser systématiquement 800 pixels : Cette dimension était cohérente avec les usages du Web de mon ancien tutoriel. Elle est aujourd’hui trop restrictive pour de nombreuses utilisations.
• Se focaliser uniquement sur les dpi : Pour l’affichage sur écran, ce sont avant tout les dimensions en pixels qui comptent.
• Exporter en Adobe RGB ou ProPhoto RGB pour le Web : Je privilégie le sRVB pour éviter les mauvaises surprises de rendu.
• Mettre toutes les photographies à la même taille : Il faut conserver le rapport hauteur/largeur. Je préfère donc définir une longueur maximale, comme le bord long, plutôt que d’imposer arbitrairement 2000 × 2000 pixels.
• Utiliser une qualité JPEG de 100 : Une qualité maximale n’apporte pas nécessairement une différence visible suffisante pour justifier l’augmentation du poids du fichier.
• Supprimer toutes les métadonnées : Ce n’est pas toujours pertinent, notamment pour les informations d’auteur et de droits.
• Oublier le référencement : Le travail ne s’arrête pas à l’exportation. Le nom du fichier, le texte alternatif, la légende et le contenu de la page participent aussi à la compréhension de la photographie par les moteurs de recherche.

Ma chaîne de préparation pour le Web

Aujourd’hui, lorsque je prépare une photographie destinée à mon site, je raisonne donc dans cet ordre :

1. Je conserve mon original : Je ne modifie pas mon RAW ou mon fichier maître pour créer la version Web.
2. Je sélectionne la photographie : Je ne publie que les photographies réellement nécessaires.
3. Je termine le traitement photographique : Développement, recadrage, corrections et retouches sont réalisés avant l’exportation.
4. Je redimensionne : Je choisis une dimension adaptée à l’usage, souvent autour de 2000 pixels sur le bord long pour une photographie destinée à un article.
5. Je réduis le poids : Je choisis un niveau de compression permettant de conserver un bon rendu sans envoyer inutilement plusieurs mégaoctets.
6. Je convertis en sRVB : C’est mon choix de référence pour une diffusion Web.
7. J’ajoute une accentuation de sortie : Lorsque le logiciel le permet, j’utilise une accentuation adaptée à l’écran.
8. Je vérifie le résultat : Je regarde réellement la photographie après exportation. Une valeur théorique de qualité ne remplace pas une vérification visuelle.
9. Je prépare le référencement : Nom de fichier descriptif, texte alternatif pertinent, légende lorsque cela apporte quelque chose et contenu de page cohérent.
10. Je publie la bonne version : Le fichier lourd reste dans mon archivage. La version optimisée est celle qui part sur le Web.

FAQ : préparer une photographie pour le Web

Pour conclure

En 2012, mon objectif était essentiellement de répondre à une question simple : comment faire passer une photographie de plusieurs mégaoctets à une taille raisonnable pour Internet ? Aujourd’hui, la question est plus large.

Préparer une photographie pour le Web, c’est trouver le bon équilibre entre dimensions, poids, qualité, espace colorimétrique, format, référencement et expérience utilisateur. Je ne cherche donc plus à produire systématiquement une photographie de 800 pixels. Je cherche à produire la bonne version de ma photographie pour le bon usage. Mon fichier original reste intact dans mon flux de travail photographique. Je crée ensuite une version destinée au Web, généralement en sRVB, redimensionnée selon l’espace disponible et compressée suffisamment pour ne pas alourdir inutilement la page.

Avec Lightroom, Photoshop, préparer ses photos pour le web peut être largement automatisée. Et surtout, je n’attends pas de recevoir une photographie de 4 Mo pour commencer à me demander comment la réduire. Je prépare directement mes photographies pour leur destination.