Formats d'images et optimisation
Formats d'images et optimisation
- 1JPEG pour photos et images complexes avec couleurs naturelles
- 2PNG pour images avec transparence, logos et graphiques simples
- 3SVG pour icônes et illustrations vectorielles qui s'adaptent à toutes les tailles
Introduction
Choisir le bon format d'image est crucial pour l'expérience utilisateur et les performances de votre site web. Un mauvais choix peut ralentir considérablement le chargement des pages ou dégrader la qualité visuelle.
Les trois formats incontournables
JPEG (Joint Photographic Experts Group)
Le format JPEG est conçu pour les photographies et images complexes avec de nombreuses couleurs.
Caractéristiques principales :
- Compression avec perte (qualité ajustable)
- Excellente pour les photos
- Taille de fichier réduite
- Pas de transparence
1<!-- Exemple d'usage JPEG -->
2<img src="photo-paysage.jpg" alt="Magnifique coucher de soleil" width="800" height="600">PNG (Portable Network Graphics)
Le format PNG est idéal pour les graphiques, logos et images nécessitant la transparence.
Deux variantes :
- PNG-8 : 256 couleurs maximum, plus léger
- PNG-24 : Millions de couleurs, plus lourd
1<!-- Exemple d'usage PNG -->
2<img src="logo-transparent.png" alt="Logo de l'entreprise" width="200" height="100">SVG (Scalable Vector Graphics)
Le format SVG est parfait pour les icônes, logos simples et illustrations vectorielles.
Tableau comparatif des formats
| Critère | JPEG | PNG | SVG |
|---|---|---|---|
| Compression | Avec perte | Sans perte | Vectoriel |
| Transparence | ❌ Non | ✅ Oui | ✅ Oui |
| Taille fichier | 🟢 Petite | 🟡 Moyenne à grande | 🟢 Très petite |
| Qualité photos | ✅ Excellente | ✅ Parfaite | ❌ Inadapté |
| Évolutivité | ❌ Pixels fixes | ❌ Pixels fixes | ✅ Infinie |
| Animations | ❌ Non | ❌ Non | ✅ Oui (CSS/JS) |
Le saviez-vous ?
Le format JPEG peut compresser une photo de 10 Mo à moins de 500 Ko tout en gardant une qualité visuelle acceptable pour le web, soit une réduction de 95% !
— Optimisation basée sur la perception visuelle humaine qui est moins sensible aux variations de chrominance qu'à celles de luminance.
Critères de choix selon le contexte
💡 À retenir : JPEG pour les photos, PNG pour la transparence et la qualité parfaite, SVG pour l'évolutivité et les icônes.
⚠️ Attention : Ne jamais utiliser JPEG pour des logos ou textes, la compression créera des artefacts visibles et disgracieux.
🎯 En pratique : Pour un site e-commerce, utilisez JPEG pour les photos produits, PNG pour le logo avec transparence, et SVG pour toutes les icônes d'interface.
Techniques d'optimisation
Optimisation JPEG
1<!-- Balise picture pour images responsives -->
2<picture>
3 <source media="(max-width: 768px)" srcset="photo-mobile.jpg">
4 <source media="(max-width: 1200px)" srcset="photo-tablet.jpg">
5 <img src="photo-desktop.jpg" alt="Description" loading="lazy">
6</picture>Recommandations qualité :
- Photos web : 75-85% de qualité
- Images héro : 85-95% de qualité
- Miniatures : 60-75% de qualité
Optimisation PNG
Pour réduire la taille des PNG :
- Utilisez PNG-8 quand possible (≤ 256 couleurs)
- Réduisez la palette de couleurs
- Utilisez des outils comme TinyPNG
Optimisation SVG
Outils recommandés
Pour l'optimisation :
- TinyJPG/TinyPNG : Compression en ligne
- ImageOptim : Logiciel Mac gratuit
- SVGO : Optimiseur SVG en ligne de commande
- WebP : Format moderne pour navigateurs compatibles
💡 À retenir : L'attribut
loading="lazy"permet de charger les images uniquement quand elles deviennent visibles, améliorant considérablement les performances.
Format WebP : l'avenir des images web
WebP offre une compression supérieure à JPEG et PNG :
1<!-- Implémentation avec fallback -->
2<picture>
3 <source srcset="image.webp" type="image/webp">
4 <source srcset="image.jpg" type="image/jpeg">
5 <img src="image.jpg" alt="Description" loading="lazy">
6</picture>