Les différents formats d’images – Partie 1

Les Différents formats d’Images

Partie 1 – Les classiques

Quels types de fichiers choisir ?

Bonjour à tous,

Je profite qu’Hervé soit plongé dans ses bouquins pour continuer son épisode de Damage Control, pour vous parler un peu des formats de fichiers utilisables pour le Turbomédia.

En effet, il n’existe pas UN format de fichier intéressant pour le turbomédia, mais plusieurs.

Même si les débits ne font qu’augmenter (4G, la fibre..), il ne s’agit pas de faire n’importe quoi avec le poids d’un Turbomédia: on ne connait pas les conditions de réception du lecteur. Qui ne s’est jamais retrouvé en plein milieu de Paris, en Edge ? Un faible poids implique la rapidité de chargement, donc le plaisir de la lecture, mais aussi une moindre utilisation du terminal de lecture pour une activité inutile en soit (sauf si vous aimez les barres de progression, bien sûr 🙂 ) et une meilleure utilisation de la mémoire, etc… (bref, c’est mieux! épicétou 😛 )

Une fois ce principe établi, quel format de fichier utiliser pour faire un turbomédia ? Nous allons revoir, cette semaine, les grands classiques et quand les choisir.

 

-LES CLASSIQUES –

 

Le format GIF (prononcer « jif »)

Commençons par le plus ancien. Le format GIF a débarqué sur nos machines en 1987 (bientôt 30 ans!) grâce à CompuServe (ça ne nous rajeunit pas :p!). Il utilise un algorithme de compression sans perte nommé LZW. C’est un algorithme très simple et qui marche très bien dans le cas de nombreux pixels identiques (cas d’aplats par exemple).

  • Une de ses particularités, c’est qu’il n’utilise que 256 couleurs (maximum), ce qui dégrade parfois l’image si elle est complexe (ex : photo ou fond avec un dégradé). Par contre, une de ces « couleurs » peut être utilisée comme pixel transparent; ce qui permet d’afficher cette image sur une autre ou sur un fond sans avoir un cadre autour de celle-ci.
  • Le second atout du GIF, c’est qu’il permet l’animation (utile parfois dans le turbomédia). Dans ce cas, le fichier agit comme un container de plusieurs images au format GIF possédant chacune sa propre palette de 256 couleurs, ce qui permet d’améliorer la qualité de l’animation en générale.

Si le GIF a été fortement utilisé sur les sites WEB au début (et pour cause: il était l’un des premiers implémentés en natif sur les navigateurs), il a connu un creux en devenant has-been pour beaucoup. Qui oserait encore mettre ça sur son site ? :

new clignotantnew animé

Il connait une nouvelle jeunesse avec l’utilisation des réseaux sociaux comme Facebook, en tant que mini-video.

 

Le format JPG

La norme JPEG a vu le jour en 1991,  grâce à un comité d’experts qui agissait sous le nom de « Joint Photographic Experts Group ». Ce format est essentiellement connu positivement (pour ses capacités de compression), mais aussi négativement (pour ses pertes de qualité lors de cette compression…)

En effet, Le principe de la compression JPG est (en très gros), de transformer les couleurs en YCbCr (luminance/chrominance), de faire des blocs de pixels et de compresser tout ça. Bien sûr, la taille finale dépendra du taux de compression et du niveau de détails de l’image initiale, entre autres. Il est généralement préféré pour les photos, sur le WEB.

 

Le format PNG

Le format PNG est né du fait qu’en décembre 1994, Compuserve et Unisys rendent l’utilisation de la compression LZW payante. Si l’idée de créer un format concurrent, libre, voit rapidement le jour dans la communauté du logiciel libre, il mettra quelques années à être correctement exploité par les logiciels de dessins et les navigateurs.

Côté compression, le format PNG s’attaque aux 2 autres formats, cités plus haut.

On peut distinguer particulièrement 2 types de PNG en particulier:

  • Le PNG-8 (256 – 28 couleurs, compression non dégradante) concurrent du GIF.
  • Le PNG-24 (16 777 216 – 224 compression non dégradante) concurrent du JPEG.

Par ailleurs, au-delà du fait qu’il gère la transparence comme le GIF, il possède aussi la possibilité de gérer la translucidité mais cela alourdit les images (logique; Une information supplémentaire par pixel, à stocker).

Par contre, nativement, il ne gère pas les animations.

 

Alors, quel format choisir pour faire mon Turbomédia ?

Et bien j’aurai tendance à dire que ça dépend… Voir pire: tous !

En effet, chaque image aura ses propres propriétés (besoin de transparence, d’animation, de précision dans les détails…) et il serait judicieux de faire le choix du format pour chaque image, pour une vraie optimisation.

Bien entendu, on peut travailler dans les grosses masses et en fonction du type de dessin, trouver le format qui sera optimal et qui répondra à vos besoins.

Alors petit tableau récapitulatif pour faire vos choix :

GIF PNG-8 PNG-24 JPG
Niveau de détails élevé, dégradé de couleur smiley pas content smiley pas content smiley content smiley content
Grandes zones d’aplats smiley content smiley content smiley content smiley content
Transparence smiley content smiley content smiley content smiley pas content
Animation smiley content smiley pas content smiley pas content smiley pas content
Compression
Sans perte si moins de 256 couleurs
Sans perte si moins de 256 couleurs
Sans perte
Avec pertes

Bien sûr, ici je parle des formats classiquement utilisés pour le Turbomédia et gérés nativement par les navigateurs.

La semaine prochaine, les nouveaux formats qui font parler d’eux!

 

7 commentaires sur “Les différents formats d’images – Partie 1

  1. Un sur le PNG en variante 8 que j ignorais… J ai reviservtout ça un peu pour un sujet d impression et affiche écran sur conversion en pdF ..

  2. Merci Fred! A suivre donc, car j’ai l’impression que vous avez utilisé d’autres formats pour votre turbomedia…

    1. De rien François :). Pour l’instant, nous avons utilisé des formats standards. Mais si on part sur l’idée d’images pleines à chaque fois (et non sur de la composition par accumulation de sprites, il faut pouvoir diminuer au maximum les images et les nouveaux formats vont peut être nous aider dans cette tâche…à suivre…

  3. Je suis justement en train de me pencher sur la question 🙂

    Vous partez sur quelle résolution pour l’image pleine ?
    J’ai voulu tenter la HD avec des images en 1920×1080 JPG et PNG mais malgré un temps de chargement d’une seconde avec une bonne connexion, ce petit laps de temps gâche la lecture.

    1. En effet Sebs, il faut trouver le bon compromis pour trouver le poids optimum d’un fichier pour éviter les chargements intempestifs. (son format, sa définition, sa résolution…). J’aborderai ces différentes thématiques au cours des prochains articles. Concernant ton problème, fais-tu un préchargement de tes images ou les charges-tu avant chaque affichage ? Cela éviterait peut-être cette coupure entre chaque image ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *