Dimensionner vos photos pour le web : le guide pratique

Beaucoup publient leurs photos en ligne, et la question de la taille se pose. Fichiers trop lourds = site ralenti, utilisateurs et moteurs de recherche mécontents. Mais vous voulez la meilleure qualité possible.

Bonne nouvelle : la réponse est simple. Elle dépend de où vous publiez. Souvent, pas de redimensionnement nécessaire. Quand c'est requis, c'est facile. Voici ce qu'il faut savoir, et comment faire dans Photoshop et Lightroom.

Publication sur une galerie en ligne (SmugMug, Squarespace, Flickr...)

Si vous publiez sur un service de galerie (SmugMug, Squarespace, Flickr), pas de redimensionnement nécessaire. Le service le fait pour vous. Uploadez simplement vos plus gros JPEG. Le service les redimensionne, crée les vignettes, les versions mobile, etc.

Idem pour les réseaux sociaux (Facebook, Instagram). Ils redimensionnent drastiquement (souvent plus que vous voudriez). Uploadez des JPEG pleine taille, tout ira bien.

Si vous utilisez ces services (recommandé), vous n'aurez jamais à penser au redimensionnement. J'ai mis mes photos sur SmugMug pendant des ans sans jamais y penser — jusqu'à ce que je passe à WordPress pour ce site.

Publication sur votre propre site (WordPress, etc.)

Si vous gérez votre propre site (WordPress inclus), vous devez redimensionner. Les JPEG sortis de l'appareil (quel qu'il soit) sont trop lourds et ralentiront votre site.

Quelle taille cible ? Probablement bien plus petite que vous pensez. Deux variables sous votre contrôle (je montre comment les régler après) :

• la taille en pixels ;
• la qualité en pourcentage.

D'abord, comment déterminer la bonne taille et qualité, puis comment les appliquer.

1. La taille en pixels

Déterminez la largeur de la zone de contenu de votre site. Cela demande parfois un peu de fouille : chaque site a sa largeur. Exemple : sur ce site, ma zone d'article fait 1024 px de large. Inutile d'avoir des images plus larges. Je réduis donc tout à 1024 px max.

D'autres sites ont des zones plus étroites (barres latérales, etc.). Digital Photography School : 750 px (avant 600 px). Donc pas d'image > 750 px.

Ce sont des maximums. Vous pouvez vouloir plus petit. Décidez quel pourcentage de la zone de contenu l'image doit occuper, et calculez la taille en conséquence.

2. La qualité (pourcentage)

Une fois la taille fixée, le pourcentage de qualité affine le poids du fichier. Baisser la qualité réduit le poids — ce qu'on veut. Les baisses légères à modérées sont invisibles.

Mieux : une baisse de 5 % de qualité (ex: 100 % → 95 %) réduit le poids de ~15 % (bien plus que 5 %). Ce gain diminue si on baisse encore plus.

De combien baisser ? Pas de règle fixe, à votre jugement.

Repère : Digital Photography School (qui s'y connaît) limite à 200 Ko. Même à 750 px, je dois souvent descendre entre 70 et 90 % qualité pour passer sous 200 Ko.

Je suis plus tolérant sur mon site (moins de volume/trafic), mais je vise ~200 Ko, jamais > 450 Ko. Mes pages restent rapides.

Pas de règle absolue. Les exemples ci-dessous montrent à quel point la différence visuelle est minime.

3. Le poids de fichier : l'essentiel

Retenez ceci : vos photos web doivent se mesurer en Ko (kilobytes), pas en Mo (mégaoctets). Un Raw de mon appareil fait ~24 Mo ; en JPEG, 7-10 Mo. C'est beaucoup trop pour le web. Inutile et nuisible.

Exemples visuels

Sur cette page, voici plusieurs versions de la même photo.

Grand vs Très grand

En haut de page : photo prise à Torrey Pines (Californie), redimensionnée à 1024 px (largeur de mon contenu), qualité 80 % → 450 Ko.

Ci-dessous : même photo à 2048 px, qualité 100 % → 3,8 Mo (8x plus lourd). Regardez les deux. Voyez-vous une grande différence ? Probablement pas.

La taille en pixels supplémentaire ne sert à rien (écran 1024 px). La qualité 100 % n'apporte rien non plus. Démonstration avec différents pourcentages de qualité :

Différents pourcentages de qualité

4 images côte à côte, même taille (512 px), qualités différentes :

• 100 % qualité (234 Ko)
• 80 % qualité (115 Ko)
• 60 % qualité (70 Ko)
• 40 % qualité (44 Ko)

Je les ai mélangées. Saurez-vous deviner laquelle est laquelle ? Comparez à la légende.

Vous n'y arrivez pas ? Moi non plus. Visuellement quasi identiques. Pourtant la plus légère ne fait que 25 % du poids de la plus lourde. Conclusion : n'ayez pas peur de réduire agressivement la taille avant publication web.

Voyons maintenant comment redimensionner concrètement.

Comment redimensionner vos photos

Selon votre logiciel : Photoshop ou Lightroom font très bien le job, pas besoin de logiciel tiers.

Redimensionner dans Photoshop

Utilisez « Enregistrer pour le web » (Fichier > Exporter > Enregistrer pour le web / anciennement Fichier > Enregistrer pour le web). Vous définissez dimensions exactes en pixels et pourcentage de qualité.

Les réglages de taille sont en bas. Définissez largeur OU hauteur, l'autre s'adapte automatiquement. Le poids s'affiche en bas à gauche. Ajustez la qualité (en haut à droite) jusqu'au poids souhaité.

Simple, contrôle total. Limite : une image à la fois. Lightroom permet le traitement par lots.

Redimensionner dans Lightroom

Utilisez la fonction Exporter. Clic droit > Exporter > Exporter. La boîte de dialogue apparaît :

Dans Lightroom, vous définissez la taille par largeur, hauteur, ou les deux. En pixels, pouces ou cm.

Pour le poids final, deux options (au choix, pas les deux) :

• limite de taille de fichier (en Ko) ;
• pourcentage de qualité (comme Photoshop).

Cliquez Exporter : Lightroom crée une copie dans le dossier choisi.

Aucun n'est supérieur pour le redimensionnement. Utilisez celui que vous préférez. Dans les deux cas, c'est simple et devient très rapide après quelques essais.

Conclusion

Vous savez maintenant comment et à quelle taille redimensionner pour le web. En résumé :

• Déterminez si vous devez redimensionner. Service de galerie (SmugMug, Squarespace, Flickr...) ? Non, uploadez tel quel. Site perso / WordPress ? Oui, redimensionnez.
• Si oui, calculez la taille en pixels selon la largeur de votre conteneur web et le remplissage souhaité.
• Utilisez « Enregistrer pour le web » (Photoshop) ou « Exporter » (Lightroom), en appliquant la taille de l'étape 2.
• Réglez un pourcentage de qualité pour réduire encore le poids (ou taille max dans Lightroom). Visez ~250 Ko max.
• N'hésitez pas à descendre à 50 % qualité.

Ce processus donne de belles photos sur votre site, sans le ralentir.