Comment exporter des photos pour un portfolio web

Un portfolio doit charger facilement tout en montrant la valeur du travail. Les textures des tissus, les feuillages, les ciels uniformes et les nuances de peau peuvent y compter davantage que dans une petite illustration. Un export correct en miniature peut décevoir en grand.

Visez des fichiers qui conservent les détails utiles aux tailles réellement vues. Ce guide aide à choisir et tester les exports, y compris après un nouveau traitement par la plateforme.

Préparez la galerie, pas seulement la miniature

Recensez grille, page projet, visionneuse et image d’ouverture pleine largeur. Une même photo peut être carrée dans la grille et entière à l’ouverture. Une miniature ne fournit pas les détails d’une grande vue.

Lisez les consignes de la plateforme avant de créer un préréglage. Certaines génèrent plusieurs tailles, d’autres affichent directement le fichier. Adobe Portfolio stocke par exemple la pleine résolution et produit des variantes réduites. Source envoyée et fichier reçu par le visiteur doivent être examinés séparément.

Vérifiez aussi la possibilité de télécharger l’original. Ne publiez pas un master d’impression parce que la galerie affiche habituellement une petite version. L’export web doit pouvoir être rendu accessible par les fonctions du site.

Mesurez la vue réellement ouverte

1. Commencez dans l’éditeur de site. Consultez l’aide des galeries et les réglages de mise en page. Cherchez la largeur ou hauteur d’affichage maximale ; la limite d’envoi est différente.
2. Ouvrez une galerie test publiée. Utilisez la fenêtre la plus large prévue et ouvrez les photos comme un visiteur, visionneuse comprise. Essayez un portrait, parfois limité par la hauteur.
3. Mesurez seulement si la plateforme ne renseigne pas les dimensions. Sur ordinateur, clic droit sur l’image puis Inspecter. Le surlignage ou le panneau de disposition peut montrer les dimensions CSS. Mesurez l’image, pas la galerie. La source dans un autre onglet indique plutôt les dimensions du fichier.

Si la taille d’affichage reste incertaine, partez de la recommandation actuelle du service et testez la galerie ouverte avant tout préréglage général. Une base justifiée vaut mieux qu’une estimation liée au capteur.

Déduisez les dimensions de la mise en page

Partez des plus grandes dimensions affichées, puis évaluez l’intérêt de pixels supplémentaires. Une largeur de 1 200 pixels CSS peut utiliser une source de 2 400 pour du 2×, si le site la fournit réellement. Ce n’est pas une largeur obligatoire pour chaque photo.

Un original de 6 000 × 4 000 réduit proportionnellement à 2 400 de large donne 2 400 × 1 600. Affiché en 1 200 × 800 CSS, il offre deux pixels d’image par direction pour chaque pixel CSS. Un portrait de 4 000 × 6 000 exporté avec un bord long de 2 400 donne 1 600 × 2 400. Un même bord long ne garantit donc pas la même largeur.

Doubler les deux dimensions quadruple les pixels : 960 000 pour 1 200 × 800, contre 3 840 000 pour 2 400 × 1 600. Le poids ne quadruple pas forcément, mais décodage et transfert coûtent davantage. Comparez petite et 2× dans la galerie. Gardez les pixels utiles et proposez de petites variantes aux petites vues.

Pour réduire un export existant, utilisez le redimensionneur avec proportions verrouillées. Recadrez d’abord si la composition doit changer. N’étirez pas un portrait pour remplir un emplacement paysage.

Un petit écran ne devrait pas charger le plus gros fichier pour chaque miniature. Le constructeur peut s’en charger ; un site personnalisé peut nécessiter du balisage adaptatif. Le guide des images responsives explique taille affichée et choix de source.

À l’écran, les pixels comptent plus que l’étiquette PPI. Un fichier de 2 400 pixels de large le reste après un simple changement de métadonnées. Le rapport diffère pour l’impression : voir DPI, PPI et pixels.

Choisissez format et traitement des couleurs

Commencez par un format accepté

JPG est pratique pour les photos classiques. PNG peut servir à la transparence ou aux graphiques, mais pèse souvent trop pour une photo. WebP et AVIF sont utiles avec une plateforme compatible ou une livraison maîtrisée. La référence MDN détaille caractéristiques et prise en charge.

Ne convertissez pas toute la série avant de tester la publication. La plateforme peut refuser ou réencoder. Comparez l’image fournie par la galerie finale, pas uniquement votre fichier.

Exportez avec gestion des couleurs

Pour un portfolio classique à plage dynamique standard, SDR, sRGB constitue une base pratique à tester. Exportez depuis un éditeur qui gère les couleurs et incorporez le profil si cette option existe. Convertir les couleurs en sRGB est différent du simple fait d’attribuer un profil sRGB à des valeurs préparées dans un autre espace colorimétrique. La FAQ couleur d’Adobe explique la gestion des couleurs dans Lightroom.

Gamut étendu et HDR exigent une chaîne d’export et de publication compatible. Utilisez-les volontairement si la plateforme les prend en charge ; l’aperçu d’édition ne suffit pas à prévoir l’affichage final.

Comparez export et publication sur le même appareil, avec des repères comme la peau ou une surface neutre. Les écrans peuvent toujours différer. Si la publication modifie les couleurs sur cet appareil, examinez traitement et profils avant la retouche créative. Le guide des couleurs vous accompagne.

Trouvez la compression avec quelques images tests

Un pourcentage de qualité n’a pas le même effet dans tous les logiciels. Il commande l’encodeur, pas un pourcentage de qualité artistique ou technique.

Choisissez des images qui révèlent des défauts différents. Un ciel uniforme permet de repérer des bandes de couleur ; les cheveux, l’herbe et les tissus montrent la perte de texture. Les zones sombres peuvent présenter des blocs ou un bruit lissé. L’architecture révèle les dégradations des contours fins et contrastés. Utilisez des sujets représentatifs de vos publications.

1. Utilisez la même source retouchée. Conservez dimensions et couleurs identiques pour isoler la compression.
2. Créez deux ou trois variantes. Sur une échelle JPG de 0 à 100, 75, 85 et 95 peuvent servir de points de test, sans valeur universelle.
3. Contrôlez l’image dans deux vues. Évaluez-la d’abord à la taille à laquelle le visiteur la verra. Examinez ensuite l’affichage à 100 % ou 1:1 pour repérer les textures perdues, les blocs et les halos. Un affichage à 100 % ne correspond pas à l’adaptation à la fenêtre et n’implique pas forcément un agrandissement. Adobe décrit la vue 1:1 de Lightroom comme l’affichage des pixels réels de l’image.
4. Comparez ensuite les poids. Gardez une petite variante seulement avec les détails importants. Sacrifier beaucoup de qualité pour gagner peu est rarement utile.
5. Publiez un test et comparez à nouveau. La plateforme peut changer le résultat. Vérifiez grille, vue ouverte et mobile avant la série complète.

Il n’existe pas de poids idéal en kilo-octets pour toutes les photos d’un portfolio. Une photo de forêt détaillée peut nécessiter plus de données qu’une composition de studio épurée aux mêmes dimensions. Choisissez le plus petit fichier qui vous satisfait visuellement, puis évaluez le chargement de la page entière.

Exemple mesuré : une photo, trois exports JPG

Nous avons utilisé une photo des Alpes et de la Méditerranée de NASA Earth Observatory. Crédit : NASA/JSC, ISS Crew Earth Observations Facility, image ISS073-E-3320. La source était déjà JPG. Nous l’avons réduite une fois à 2 400 × 1 348 et enregistrée en PNG pour une base identique. Le PNG ne restaure pas les pertes antérieures.

Le 17 octobre 2026, le même PNG a été converti avec l’outil PNG vers JPG de Pixilo à 75, 85 et 95 dans Microsoft Edge 155.0.4283.45, sans changer les dimensions. Ces chiffres concernent cet encodeur navigateur, pas des réglages Lightroom équivalents ni des résultats garantis ailleurs.

Chaque détail montre la même zone de 240 × 160 pixels sans redimensionnement supplémentaire. La page peut adapter les aperçus à l’écran. Ouvrez les fichiers complets à 100 % pour comparer les pixels. Examinez crêtes et textures : le réglage faible économise des octets mais peut les lisser. Le fichier 95 pèse presque deux fois le 85, sans prouver que le gain compte dans votre galerie.

Vous pouvez télécharger le PNG de travail (6 464 084 octets) pour reproduire le test. Une photo aérienne ne détermine pas le bon réglage pour les portraits, œuvres ou tous les paysages. Testez vos propres images représentatives.

Exemple : un préréglage d’export Lightroom Classic

Supposons une vue maximale non recadrée de 1 200 × 800 CSS et un original retouché de 6 000 × 4 000. Comparez un JPG de 2 400 × 1 600 à une variante réduite. Sélectionnez la photo et ouvrez File → Export. La documentation Adobe explique les panneaux ; noms et choix varient selon version et langue.

• File Settings : choisissez JPEG et sRGB pour cet exemple SDR. Comparez les qualités dans Lightroom sans reprendre les chiffres du navigateur.
• Image Sizing : activez Resize to Fit, puis Width & Height. Indiquez un cadre de 2 400 × 1 600 pour ce paysage. La photo s’y inscrit sans déformation ; un portrait n’est pas forcé à ces dimensions. Gardez Don't Enlarge pour un préréglage réutilisé sur de petites sources.
• Output Sharpening : comparez sans accentuation et avec Sharpen For: Screen, Amount: Standard. Examinez contours et textures à la taille finale. Réduisez ou désactivez en cas de halos ou de contours trop durs.
• Metadata : conservez description et droits nécessaires, puis contrôlez les options de suppression de localisation et de données personnelles.
• Export Location : enregistrez dans un dossier web distinct avec des noms différenciés pour publier la version vraiment vérifiée.

Envoyez une variante, vérifiez la vue ouverte et le téléphone, puis enregistrez le préréglage. Portraits et miniatures peuvent demander un autre cadre. Revoyez les paramètres si la mise en page change.

Utilisez Pixilo pour les étapes complémentaires utiles

Si l’éditeur fournit dimensions, format et qualité en un export, commencez là. Pixilo aide lorsqu’une image déjà rendue nécessite réduction, recadrage ou comparaison de compression.

Le compresseur produit une copie plus légère et le redimensionneur réduit les pixels superflus. Il accepte JPG, PNG et WebP jusqu’à 25 Mo chacun. Au-delà, exportez une petite copie depuis l’éditeur. RAW, conversion de profil et accentuation de sortie demandent un éditeur adapté.

Évitez les exports JPG successifs. Regroupez les modifications avant un seul export final et comparez toujours depuis la même source préparée, sans recompresser le téléchargement précédent.

Vérifiez métadonnées, noms et filigranes

Traitez GPS et données personnelles séparément de la compression ; le guide des métadonnées explique les contrôles. Avec l’outil de filigrane, vérifiez le placement dans la grille et en grand. Ne détournez pas l’attention de l’œuvre. Le filigrane n’empêche pas la copie.

Localisez l’étape qui dégrade la qualité

1. Vérifiez la source retouchée. Un détail absent ne revient pas avec d’autres réglages web.
2. Vérifiez l’export local. En cas de texture perdue ou de halos, examinez séparément dimensions, compression et accentuation.
3. Vérifiez le fichier servi par la galerie. Si l’export est bon mais pas la page, contrôlez version choisie, cadrage et taille. Une miniature étirée en grand ne se corrige pas comme un export trop compressé.

Changez une étape à la fois. Trop de gros fichiers demandés ensemble peuvent aussi ralentir. Testez une nouvelle visite et la première ouverture, pas seulement les photos déjà chargées.

Vérifiez la galerie publiée

• Miniatures et grandes vues respectent la composition voulue.
• Les textures importantes restent visibles, sans artefacts gênants dans le ciel ou les ombres.
• La grande vue n’est pas une miniature trop petite agrandie.
• Les couleurs sont cohérentes entre export et publication sur le même appareil.
• La page mobile se charge correctement sans récupérer le plus gros fichier pour chaque miniature.
• Fichiers publics et liens ne contiennent que les versions et métadonnées à partager.

Questions fréquentes

Faut-il toujours la qualité JPG maximale ?

Non. Le poids peut augmenter fortement sans différence utile à la taille prévue. Testez des images exigeantes et jugez aspect et gain de poids.

Toutes les photos doivent-elles avoir les mêmes dimensions ?

Pas forcément. Une présentation cohérente n’exige pas de tout étirer. Le site détermine quels cadrages doivent s’accorder et quelles images gardent leurs proportions.

L’export web peut-il servir à une livraison imprimée ?

Ne le supposez pas. Impression et livraison client peuvent nécessiter d’autres dimensions, couleurs, métadonnées et accentuation. Partez de l’original de travail selon les spécifications.