Exporter une image optimisée pour le web

Comprendre les paramètres d'export

L'export d'image implique plusieurs décisions techniques:

**Format de fichier:** JPEG, PNG, WebP, GIF, AVIF... Chaque format a ses forces et faiblesses.

**Qualité/Compression:** Pour les formats avec perte (JPEG, WebP), un curseur de 0 à 100 définit l'équilibre qualité/poids.

**Dimensions:** Taille en pixels de l'image exportée. Peut être réduite par rapport à l'original.

**Espace colorimétrique:** sRGB pour le web, CMYK pour l'impression. Le mauvais choix altère les couleurs.

**Métadonnées:** EXIF, IPTC, XMP... À conserver ou supprimer selon l'usage.

**Profil ICC:** Intégré ou non. Affecte la cohérence des couleurs entre écrans.

Chaque paramètre impacte le résultat final. Voyons les valeurs optimales pour le web.

Choisir le format d'export optimal

Le choix du format est la décision la plus impactante:

**JPEG — Le standard pour les photos:**

• Compression efficace, excellente compatibilité

• Pas de transparence, légère perte de qualité

• Usage: photos, images avec dégradés, visuels complexes

**PNG — Pour la transparence et la netteté:**

• Compression sans perte, supporte la transparence (alpha)

• Fichiers plus lourds que JPEG pour les photos

• Usage: logos, icônes, graphiques avec texte, images avec transparence

**WebP — Le meilleur compromis actuel:**

• 25-35% plus léger que JPEG à qualité égale

• Supporte transparence et animation

• 95% de compatibilité navigateur en 2025

• Usage: remplacement moderne de JPEG et PNG

**GIF — Uniquement pour les animations simples:**

• 256 couleurs maximum, transparence binaire

• Remplacé par WebP/APNG pour la qualité

**AVIF — Nouvelle génération:**

• Encore plus efficace que WebP

• Adoption croissante mais pas universelle

• À utiliser avec fallback WebP/JPEG

Réglages de qualité recommandés

Pour les formats avec compression (JPEG, WebP), le niveau de qualité impacte directement le poids:

**Qualité 90-100%:** Qualité maximale, fichier lourd. Utile uniquement pour l'archivage ou les tirages d'impression.

**Qualité 80-85%:** Sweet spot pour le web. Imperceptible à l'œil, réduction de poids de 40-60%.

**Qualité 70-79%:** Acceptable pour les thumbnails ou images secondaires. Légers artefacts possibles sur les zooms.

**Qualité 50-69%:** Visible dégradation. À éviter sauf contraintes de bande passante extrêmes.

**Qualité <50%:** Pixelisation évidente. Jamais acceptable pour un usage professionnel.

Notre recommandation: **82-85%** pour les photos, **70-75%** pour les vignettes, **90%** pour les visuels premium.

Dimensions d'export pour différents usages

Exportez aux dimensions exactes de l'usage prévu:

**Sites web:**

• Hero/bannière pleine largeur: 1920×1080 ou 1600×900

• Images de contenu: 800-1200 pixels de large

• Thumbnails: 300-400 pixels

**Réseaux sociaux:**

• Instagram feed: 1080×1080 (carré) ou 1080×1350 (portrait)

• Facebook post: 1200×630

• LinkedIn article: 1200×627

• Twitter post: 1600×900

**E-commerce:**

• Image principale: 1000-2000 pixels (pour le zoom)

• Vignette listing: 400-600 pixels

**Email marketing:**

• Images dans email: 600 pixels de large max

• Poids total recommandé: <100 Ko par image

Ne dépassez jamais les dimensions nécessaires — chaque pixel inutile est du poids gaspillé.

Gérer les métadonnées à l'export

Les métadonnées sont des informations intégrées au fichier image:

**EXIF:** Données techniques de prise de vue (appareil, date, exposition, GPS...).

**IPTC:** Données éditoriales (titre, description, crédits, copyright).

**XMP:** Données de traitement (modifications appliquées).

**Pour le web public:** Supprimez les métadonnées. Elles ajoutent 10-200 Ko inutiles et peuvent contenir des données de localisation privées.

**Pour les portfolios photo:** Conservez IPTC (crédits) mais supprimez la localisation GPS.

**Pour l'archivage:** Conservez tout pour la traçabilité.

Notre outil permet de supprimer ou conserver les métadonnées en un clic lors de l'export.

Export pour écrans haute résolution (retina)

Les écrans modernes affichent plus de pixels que les écrans standards:

**Pixel ratio 2× (Retina):** Une image de 400×300 doit mesurer 800×600 pour apparaître nette.

**Pixel ratio 3× (mobiles haut de gamme):** Triplez les dimensions pour une netteté maximale.

**Stratégie recommandée:**

1. Exportez à 2× la taille d'affichage (couvre 95% des cas)

2. Utilisez srcset pour servir plusieurs résolutions

3. Acceptez un léger flou sur les écrans 3× plutôt que de tripler le poids

**Code HTML avec srcset:**

```html

<img src='image-800.jpg'

srcset='image-400.jpg 400w,

image-800.jpg 800w,

image-1200.jpg 1200w'

sizes='(max-width: 600px) 400px, 800px'>

```

Le navigateur choisit automatiquement la meilleure version.

Vérifier la qualité de l'export

Après export, validez le résultat:

**Comparaison visuelle:** Ouvrez l'original et l'export côte à côte. À 100% de zoom, les différences sont-elles visibles?

**Vérification du poids:** Le fichier respecte-t-il votre objectif (<200 Ko pour les grandes images, <100 Ko pour le contenu)?

**Test de dimensions:** L'image a-t-elle les pixels exacts prévus?

**Affichage navigateur:** Ouvrez dans un navigateur pour vérifier le rendu réel.

**Inspection des artefacts:** Zoomez sur les zones à fort contraste (texte, bords). Y a-t-il des halos ou de la pixelisation?

Si un problème apparaît, réexportez avec des paramètres ajustés.

Automatiser l'export avec des presets

Pour les besoins répétitifs, créez des configurations réutilisables:

**Preset 'Blog Standard':**

• Format: WebP (fallback JPEG)

• Largeur: 1200 pixels

• Qualité: 82%

• Métadonnées: supprimées

**Preset 'E-commerce Produit':**

• Format: JPEG

• Largeur: 1500 pixels (pour zoom)

• Qualité: 88%

• Fond: blanc pur (#FFFFFF)

**Preset 'Instagram':**

• Format: JPEG

• Dimensions: 1080×1080 (carré)

• Qualité: 90%

Notre outil permet de sauvegarder ces presets pour un export en un clic.

How to do it in 3 steps

Frequently asked questions