Bien que cela ne soit pas très utile sur le Web moderne, le format GIF (Graphics Interchange Format) offre une introduction solide sur les concepts fondamentaux de l'encodage d'images.
Le GIF peut être considéré comme un wrapper pour les données d'image. Elle dispose d'une fenêtre d'affichage, appelée "écran logique", sur laquelle les images individuelles des données d'image sont dessinées, un peu comme les calques d'un document Photoshop. C'est ainsi que GIF prend en charge son animation de type flipbook : une seule image est dessinée sur l'écran logique, puis remplacée par une autre, puis une autre. Bien sûr, cette distinction n'est pas importante lorsqu'il s'agit d'un GIF statique, composé d'un seul frame dessiné sur l'écran logique.
GIF utilise une méthode de compression des données sans perte, une variante de l'algorithme Lempel-Ziv-Welch, si vous voulez en savoir plus. Nous n'avons pas besoin d'aborder plus en détail le fonctionnement de cet algorithme, mais dans les grandes lignes, il s'apparente à du JavaScript « uglifiant », où des chaînes de caractères répétées dans le fichier sont enregistrées dans une sorte de dictionnaire interne, de sorte qu'elles puissent être référencées au lieu d'être répétées chaque fois qu'elles apparaissent.
Certes, l'algorithme n'est pas aussi simple qu'un modèle de peinture par numéros. Il parcourt à nouveau le tableau de codes de couleur généré pour trouver des séquences répétées de couleurs de pixels et crée un deuxième tableau de codes référenciables. Toutefois, les données d'image ne sont à aucun moment perdues, simplement triées et réorganisées de manière à pouvoir être lues sans les modifier fondamentalement.
Bien que le GIF utilise techniquement la compression sans perte, il présente une limitation majeure qui affecte gravement la qualité des images : l'enregistrement d'une image au format GIF entraîne toujours une réduction de la fidélité, sauf si l'image utilise déjà 256 couleurs ou moins.
Chaque image dessinée sur l'écran logique du GIF ne peut contenir que 256 couleurs au maximum. GIF prend également en charge la "transparence de l'index", où un pixel transparent fait référence à l'indice d'une "couleur" transparente dans la table de couleurs.
La pratique consistant à réduire une plage de valeurs à un ensemble plus petit et approximatif de valeurs de sortie s'appelle la quantification, un terme que vous utiliserez souvent dans le domaine des encodages d'images. Les résultats de cette quantification de la palette sont généralement évidents:
Pour mieux comprendre ce processus, repensez à la grille d'images matricielles que vous avez pu recréer à partir de ma description.
Cette fois-ci, ajoutez un peu plus de détails à l'image d'origine: quelques pixels supplémentaires, dont une nuance de bleu légèrement plus foncée:
En l'absence de toute compression, pour ainsi dire, vous pouvez décrire cette grille comme suit:
La première ligne, la colonne 1 est #0000FF. La première ligne, la colonne deux est #0000FF. La colonne 3 de la première ligne est #0000FF. La ligne 1, la colonne 4 est #FF0000. La colonne 1 de la deuxième ligne est #0000FF. La deuxième ligne est #000085. La colonne 3 de la deuxième ligne est #0000FF. La colonne 4 de la deuxième ligne est #FF0000.
En utilisant quelque chose qui s'apparente à la compression des données sans perte et à l'indexation des couleurs de GIF, vous pouvez la décrire comme suit:
A: #0000FF, B: #FF0000, C: #000085. La première ligne, les colonnes un à trois sont A. La ligne 1, la colonne 4 est B. La deuxième ligne est la colonne A. La deuxième ligne est la colonne C. La colonne 3 de la deuxième ligne est A. La colonne 4 de la deuxième ligne est B.
Cela permet de condenser la description pixel par pixel en quelques endroits ("les colonnes un à trois sont...") et d'enregistrer quelques caractères en définissant à l'avance les couleurs répétées dans un dictionnaire. La fidélité visuelle ne change pas. Les informations ont été compressées sans aucune perte.
Toutefois, comme vous pouvez le constater, le pixel bleu foncé a un impact considérable sur la taille de notre encodage. Si je devais me limiter à une palette de couleurs quantifiée, il pourrait être réduit beaucoup plus:
A: #0000FF, B: #FF0000. La première ligne, les colonnes un à trois sont A. La ligne 1, la colonne 4 est B. Ligne 2, les colonnes 1 à 3 sont A. La colonne 4 de la deuxième ligne est B.
Malheureusement, ces octets enregistrés ont disparu.
Bien sûr, le moteur de rendu ne le sait pas : le détail du pixel bleu foncé n'a pas été pris en compte lors de l'encodage de mon image source. Vous avez rendu l'image exactement comme je l'ai encodée, grâce à notre compréhension commune des couleurs dont nous disposons.
Dans cet exemple exagéré, réduire de trois couleurs à deux fait une différence évidente en termes de qualité. Sur une image plus grande et plus détaillée, les effets ne seront peut-être pas aussi perceptibles, mais ils resteraient tout de même visibles.
Lorsqu'ils sont encodés au format GIF, les dégradés subtils, tels que les ombres, sont mouchetés, et des pixels individuels ressortent de leur environnement:
En pratique, la combinaison de la compression sans perte et de la quantification par palettes signifie que le format GIF n'est pas très utile dans le développement Web moderne. La compression sans perte ne suffit pas à réduire la taille des fichiers, et une palette réduite entraîne une réduction évidente de la qualité.
En fin de compte, le format GIF n'est qu'un format efficace pour encoder des images simples qui utilisent déjà des palettes de couleurs limitées, des bords durs plutôt que l'anticrénelage et des couleurs unies plutôt que des dégradés. Tous les cas d'utilisation sont bien mieux adaptés aux autres formats. Le fichier PNG, plus petit et plus présenté, est souvent un meilleur choix pour les images matricielles, bien que les deux soient bien inférieures au format SVG en termes de taille de fichier et de fidélité visuelle dans les cas d'utilisation tels que les icônes ou les dessins au trait, où le vecteur est visible. Le cas d'utilisation moderne le plus courant est celui de l'animation, mais il existe des formats vidéo modernes bien plus efficaces et accessibles.