Formats d'images et optimisation

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è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>