1. Quel format d’image choisir ?

1.1 Le format GIF 

Le format GIF (Graphics Interchange Format) a été mis au point en 1987 par la société américaine CompuServe. Son objectif : permettre de transférer rapidement des images avec un accès internet bas débit.

Les avantages du GIF :

•     Très léger

•     Compression sans perte

•     Gère la transparence

•     Peut être animé

Les inconvénients du GIF :

•     N’affiche que 256 couleurs (max)

•     Ne restitue pas les nuances (lumières, ombres, dégradés)

Quand utiliser le GIF ?

Le GIF est principalement utilisé pour les boutons, les logos, les icônes et les animations. Notez que ce format est tout de même désuet pour de nombreuses applications car on préférera l’utilisation de CSS pour les boutons par exemple ou d’autres formats d’images comme le SVG pour les logos.

 

1.2 Le format JPEG = photographies

Adopté dans les années 1990, le format JPEG (Joint Photographic Expert Group) tire son nom du comité de professionnels de l’image qui l’a créé. A cette époque, chaque fabricant d’appareils photos dispose d’un format d’image différent et les conversions de l’un à l’autre sont contraignantes. Le JPEG a été pensé pour être un format de sortie universel.

Les avantages du JPEG :

•     Formant standard pour les photographies numériques

•     Affiche 16.7 millions de couleurs

•     Restitue les images complexes (nuances, dégradés)

•    Chargement progressif des images possible

Les inconvénients du JPEG :

•     Compression avec perte de qualité, mais réglable

•     Ne gère pas la transparence

•     Ne peut être animé

Quand utiliser le JPEG ?

Le JPEG s’emploie principalement pour les photographies numériques et les images complexes (nuances, dégradés). Bien compressée et optimisée, un image d’illustration d’article ne pèsera que quelques dizaines de Ko (kilo-octet).

 

1.3 Format PNG = transparence parfaite

Le format PNG (Portable Network Graphics) a été créé en 1995 pour offrir une alternative libre au GIF. Il se décline en plusieurs versions dont les plus utilisées sont :

•     le PNG 8 (bits) semblable au GIF (256 couleurs, gestion de la transparence) mais plus léger,

•     le PNG 24 (bits), similaire au JPEG (16.7 millions de couleurs) mais avec une compression sans perte et un poids de fichier plus élevé.

Les avantages du PNG :

•     Compression sans perte

•     Plus léger que le GIF (PNG 8)

•     Gère mieux la transparence que le GIF (PNG 8)

•     Affiche jusqu’à 16.7 millions de couleurs (PNG 24)

Les inconvénients du PNG :

•     Ne peut être animé

•     N’affiche que 256 couleurs (PNG 8)

•     Fichier plus lourd que le JPEG (PNG 24)

Quand utiliser le PNG ?

Le format PNG est principalement conseillé pour les logos avec transparence (PNG 8) et les images complexes si le poids de l’image n’est pas un problème (PNG 24). D’une manière générale, si votre image n’a pas besoin de transparence, préférez toujours utiliser le format JPEG qui sera plus léger.

 

1.4 SVG, LE FORMAT VECTORIEL EN PROGRESSION

Le SVG est un format d’image vectoriel basé sur le langage XML. Il a été créé en 1998 par un groupe de travail notamment constitué de IBM, Apple, Microsoft et Xerox. Il offre une taille de fichier réduite puisqu’il ne stocke que les informations décrivant les formes et non chaque pixel comme pour une image Bitmap. Le SVG est géré par une grande partie des navigateurs.

Les avantages du SVG :

•     Étirable sans perte de qualité

•     Facilement modifiable (changer une couleur par exemple)

•     Taille de fichier réduite

•     Résolution optimale

•     Peut être stylé via le CSS

•     Peut être animé via le JavaScript (alternative au Flash)

Les inconvénients du SVG :

•     Ne gère que les formes simples (pas les photos)

•     Alourdit le code lorsqu’il est directement intégré au HTML

•     Nécessite un éditeur graphique dédié (Inkscape, Illustrator)

•     Peut présenter des risques de sécurité (lié au XML qu’il contient)

Quand utiliser le SVG ?

Le SVG est préconisé pour les images simples comme les icônes, les graphiques et les logos.