Formats d'Images

Il existe deux grandes familles de formats d'images numériques, fondamentalement différentes dans leur approche.

Images matricielles (bitmap/raster) :

• Composées d'une grille de pixels

• Chaque pixel a une couleur définie

• Qualité dépendante de la résolution

• Perte de qualité lors de l'agrandissement (pixelisation)

• Formats : JPEG, PNG, GIF, WebP, BMP, TIFF

• Usage : photographies, captures d'écran, images complexes

Images vectorielles :

• Composées de formes géométriques (lignes, courbes, polygones)

• Définies par des équations mathématiques

• Qualité indépendante de la taille (pas de pixelisation)

• Redimensionnement sans perte de qualité

• Formats : SVG, EPS, AI, PDF (partiel)

• Usage : logos, icônes, schémas, illustrations, graphiques

Analogie :

Image matricielle = mosaïque de pixels (fixe)

Image vectorielle = instructions de dessin (flexible)

JPEG est le format le plus utilisé pour les photographies numériques. Il utilise une compression avec perte pour réduire la taille des fichiers.

Caractéristiques du JPEG :

• Extension : .jpg ou .jpeg

• Compression avec perte (lossy)

• Supporte 16,7 millions de couleurs (24 bits)

• Ne supporte pas la transparence

• Taux de compression réglable (qualité vs taille)

Avantages :

• Fichiers très légers (compression efficace)

• Idéal pour les photos avec beaucoup de nuances

• Universellement supporté (tous navigateurs, appareils)

• Excellent compromis qualité/taille pour le web

Inconvénients :

• Perte de qualité à chaque sauvegarde (compression destructive)

• Mauvais pour les images avec texte ou bords nets

• Pas de transparence

• Artefacts visibles sur les aplats de couleur

Usages recommandés :

• Photographies et images réalistes

• Images web où la taille du fichier est critique

• Partage sur les réseaux sociaux

• Archivage lorsque combiné avec un original non compressé

PNG a été créé comme alternative libre au GIF. Il offre une compression sans perte et supporte la transparence.

Caractéristiques du PNG :

• Extension : .png

• Compression sans perte (lossless)

• Supporte la transparence (canal alpha)

• Deux variantes : PNG-8 (256 couleurs) et PNG-24 (16,7M couleurs)

• Métadonnées intégrées possibles

Avantages :

• Qualité préservée (pas de perte)

• Transparence parfaite (canal alpha)

• Excellent pour textes, logos, graphiques

• Compression efficace sur les aplats de couleur

• Supporte l'animation (APNG)

Inconvénients :

• Fichiers plus volumineux que JPEG pour les photos

• Pas idéal pour les images avec beaucoup de nuances

• Compression moins efficace sur les photos complexes

Usages recommandés :

• Logos et icônes nécessitant de la transparence

• Captures d'écran

• Graphiques, diagrammes, schémas

• Images avec texte

• Travail d'édition nécessitant plusieurs sauvegardes

• Images web avec fond transparent

GIF (Graphics Interchange Format) :

• Extension : .gif

• Palette limitée à 256 couleurs

• Supporte l'animation (images successives)

• Compression sans perte (algorithme LZW)

• Transparence binaire (oui/non, pas de semi-transparence)

Avantages du GIF :

• Animations simples et légères

• Universel et très ancien (1987)

• Petite taille pour images simples

Inconvénients du GIF :

• Limité à 256 couleurs (mauvais pour photos)

• Transparence de mauvaise qualité

• Animations lourdes comparées à la vidéo

WebP (développé par Google) :

• Extension : .webp

• Compression avec ou sans perte au choix

• Supporte la transparence

• Supporte l'animation

• Fichiers 25-35% plus légers que JPEG/PNG équivalents

Avantages du WebP :

• Meilleur compromis taille/qualité

• Flexible (lossy ou lossless)

• Transparence et animation

Inconvénients du WebP :

• Support limité sur anciens navigateurs

• Moins d'outils d'édition compatibles

Usages recommandés :

• GIF : mèmes, animations courtes et simples

• WebP : images web modernes (avec fallback JPEG/PNG)

SVG est un format d'image vectorielle basé sur XML. Contrairement aux formats précédents, il ne contient pas de pixels mais des instructions de dessin.

Caractéristiques du SVG :

• Extension : .svg

• Format texte (XML), lisible et éditable

• Redimensionnable sans perte de qualité

• Supporte animations et interactivité (JavaScript, CSS)

• Compression possible avec gzip (.svgz)

Structure d'un fichier SVG :

```xml

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" fill="red" />

<rect x="10" y="10" width="30" height="30" fill="blue" />

</svg>

```

Avantages :

• Qualité parfaite quelle que soit la taille

• Fichiers très légers pour formes simples

• Modifiable avec un éditeur de texte

• Animable et scriptable

• Indexable par les moteurs de recherche

• Accessible (texte alternatif intégré)

Inconvénients :

• Inadapté aux photos ou images complexes

• Peut devenir lourd avec beaucoup de détails

• Rendu peut varier selon les navigateurs

Usages recommandés :

• Logos et identités visuelles

• Icônes d'interface

• Graphiques et diagrammes

• Illustrations et infographies

• Cartes et schémas techniques

• Animations web légères