01- Les formats d’images web

Semaine 3

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.

    1.5 Quelques règles d’écriture du HTML

     

    1. Écrire les noms de balise en bas de casse (minuscules).
    2. Écrire les noms d’attribut en bas de casse (minuscules).
    3. Refermer toute balise ouvrante avec une balise de fin. (<h2> 2.1 Signification des acronymes <img/>).
    4. Terminer toute balise vide avec une barre oblique précédée d’une espace (<img /> et non <img>).
    5. Encadrer les valeurs d’attribut de guillemets droits.
    6. Expliciter les valeurs d’attribut (<input … checked= »checked » /> et non <input … checked>).
    7. Remplacer l’identificateur partiel NAME par ID.
    8. Assortir toute image d’un attribut ALT, même de valeur nulle.

     

     

    GIF : 

    Images avec des aplats de couleurs.
    Par exemple des logos + animations

    Jpeg 

    Pour les images de type photographique.

     

    PNG

    Transparence parfaite.