HTML : formats d’images

Pour rappel, la création d’un site nécessite obligatoirement l’utilisation d’images. Une seule question se pose, quel sera le format utiliser pour enregistrer les images : jpg, gif ou png ?

Pour vous aider à choisir plus facilement, nous allons aborder les différentes sortes de formats d’images disponibles ainsi que leurs avantages et leurs inconvénients.

format-image

Avant d’entrer dans le vif du sujet il est nécessaire de faire une mise au point sur la notion de compression destructive et non-destructive :

  • La compression destructive provoquera une altération de l’image à chaque sauvegarde, mais cela permettra de gagner en espace disque. Le fonctionnement, un algorithme de compression tentera de trouver des pixels dont les couleurs sont proches pour ensuite les fusionner en effectuant la moyenne des couleurs. L’objectif étant l’obtention d’une image légère sans avoir une dégradation de la qualité, bien qu’il ait une dégradation légère.
  • La compression non destructive offre la possibilité d’obtenir une image de plus petite dimension sans pour autant impacter la qualité de l’image. Celle-ci passe généralement par la création d’une table de couleurs.

Les différents formats que nous allons aborder dans ce chapitre sont le gif, le jpg, le png et le svg.

Le format GIF

Utilisant une compression non destructive, les images au format GIF sont compressées grâce à l’indexation des couleurs qui sont codées sur 8 bits(2^8=256 nuances de rouges, 256 de vert et 256 de bleus).
Toutefois, l’image gif ne pourra pas contenir plus de 256 couleurs différentes. Celui-ci accepte la transparence ainsi que les animations. Plus vraiment utile de nos jours puisque le GIF a été remplacé par le png 8 bits sauf pour la création d’animations.

Le format JPG ou JPEG

Conçu pour la sauvegarde d’images détaillées telles les photos, le format JPG permet de préserver les détails d’une image avec la plus petite taille possible. La compression destructive est utilisée afin de supprimer toutes les informations invisibles à l’œil nues tels les pixels dont les nuances sont proches.
Étant donné la compression destructive, il faut éviter que les images au format JPEG subissent des compressions successives. Contrairement au gif, les couleurs du jpg sont codées sur 24 bits : 2^24 = 16 777 216 couleurs.
Toutefois, la transparence n’est pas supportée par le format. Ce format est le plus utilisée pour les images ou photographies renfermant de nombreux détails et couleurs.

Le format PNG

Un compromis entre les formats JPG et GIF, le format PNG existe en 2 versions qui sont le format PNG-8 et PNG-24.

PNG-8

Un bon remplacement au gif puisqu’en 8 bits, sa principale avantage est qu’il n’est pas breveté contrairement au gif. Son fonctionnement se rapproche aussi de celui du gif avec une palette de 256 couleurs, mais à la seule exception près qu’il ne supporte pas les animations. Un autre atout du png-8 est la gestion d’opacité. Celui-ci connait un piètre succès étant donné le support désastreux des transparences sur IE6. Il en va de même pour Adobe qui ne supporte par le format png-8. Sur Photoshop par exemple, si vous essayez de sauvegarder en png-8, il ne vous sera pas possible d’obtenir des effets d’opacité et votre fichier agira comme un simple gif.
Ce format est plus adapté pour les images avec des formes simples et une palette de couleurs limitée, des logos ou des icônes.

PNG-24

Combinant la nature non destructive du GIF avec les couleurs du JPEG, le PNG-24 offre une palette illimitée de couleurs. Cependant, le poids d’un fichier dans ce format est assez volumineux pour la sauvegarde de photographies. Ainsi, celui-ci s’utilisera comme le PNG-8, dans le cas où il est nécessaire d’utiliser de nombreuses couleurs ou une gestion de l’opacité.

Le format SVG

Complètement différents des formats pixels, le format SVG est supporté par tous les navigateurs récents à savoir IE9+, Safari, Firefox et Chrome. Ce dernier permet l’affichage des images vectorielles dont la composition est de forme géométriques et non de pixels. L’avantage des images vectorielles est le redimensionnement sans perte de qualité. Cela permet de ne pas avoir à configurer le format sur les différentes densités d’écrans. Ce format peut s’utiliser dans plusieurs cas notamment comme logos ou comme icônes si les sources vectorielles sont disponibles bien évidemment.

Répondre