Vous savez probablement qu’une image (ou un fichier de manière générale) peut être de différentes qualités. À vous de jouer avec les informations de votre avatar pour optimiser son stockage et sa transmission…
Chargez !
Dans la partie précédente, je vous proposais de zoomer sur une image (d’ailleurs si vous voulez en savoir plus sur le tableau fascinant qui vous était proposé, voici l’article Wikipedia qui lui est consacré).
Cette image, la voici à nouveau :
Par rapport à l'image d'origine, je l'ai considérablement réduite : cliquez dessus (ou téléchargez-là sur votre ordinateur) et regardez par exemple dans le miroir en arrière-plan : quels détails pouvez-vous voir ?
Voici maintenant la même image, avec une plus grande définition.
Si vous regardez et zoomez à nouveau dans le miroir, vous devriez pouvoir observer plus de détails insoupçonnés ! Mais en ouvrant cette dernière image, peut-être avez-vous constaté qu'elle mettait plus de temps à charger que l'autre ? Normal, elles ne sont pas de la même taille, mais pas non plus de la même qualité ! Pour vous en assurer, vous pouvez aussi télécharger les deux images sur votre ordinateur et comparer leur poids (faites un clic-droit sur l’image, sélectionnez “Propriétés” et vous devriez voir apparaître les propriétés de l’image, dont sa taille).
Pour réduire le poids d'une image, on peut réduire le nombre des informations composant l'image, comme le nombre de pixels par exemple (vous voyez moins de détails dans la première que dans la deuxième). Mais on peut aussi jouer sur le nombre de couleurs utilisées pour coder l'image.
Par exemple ici, voici trois images représentant encore la même scène, mais codées avec un nombre de couleurs différent : le nombre de pixels est le même, mais chaque pixel peut prendre un nombre plus ou moins limité de couleurs (et sera donc codé sur un nombre de bits différents). Et moins il y a de couleurs, moins on peut appréhender le tableau dans les détails (ici on perd en qualité).
On peut donc compresser des images (réduire leur poids), pour gagner de l’espace de stockage ou faciliter leur transmission par exemple, en modifiant leur codage (en diminuant le nombre de pixels, ou le nombre de couleurs par exemple). Et ceci peut se faire en perdant de l’information et donc de la qualité, comme ici… ou pas !
Relèverez-vous le défi de compresser votre avatar sans perdre en qualité ? 
3 étapes, de la moins complexe à la plus difficile, vous attendent :
Optimisez l'encodage de votre avatar
Compressez encore plus !
Décompressez
Compressez votre avatar sans perdre en qualité
Normalement, vous devriez avoir un avatar de 20x20 pixels, codé avec 8 couleurs au maximum. Vous devriez aussi avoir un algorithme qui permet de dessiner automatiquement cet avatar, grâce à une liste contenant toutes les données de votre dessin (nom des couleurs et position dans l'image, c'est à dire ordre dans la liste). C’est sur cette liste que nous allons maintenant travailler !
Lorsque votre algorithme détecte dans votre liste la suite de caractères "rouge" par exemple, il va faire en sorte que votre carré de base bascule sur le costume qui se nomme "rouge", et il estampillera un carré rouge.
Mais "rouge", c'est quand même un peu long, et si l'on veut compresser notre image, autant tout raccourcir... D'autant que si vous envoyez votre avatar à quelqu'un d'autre, qui ne possède pas de costume "rouge", eh bien il risque d'y avoir des bugs d'affichage…
Optimisez l’encodage de votre image
Je vous propose donc de passer d’une liste de mots, à une liste de chiffres ! Pour passer d'une liste de noms de couleurs à une liste de nombres, il va falloir d'abord établir une correspondance : 1 = rouge, 2 = rose, 3 = orange, 4 = ... etc. Un peu comme pour l’encodage des couleurs dans Scratch. A priori ici il n'y a que huit couleurs, ça devrait être rapide.
Votre premier défi, c'est de créer un petit algorithme sur Scratch qui transforme pour vous votre liste de noms de couleurs, en une autre liste avec les nombres correspondants !
Voici quelques indications pour démarrer si vous ne trouvez pas d’idée sur comment procéder :
Vous vous souvenez qu’on utilisait dans la partie précédente une variable pour compter chacun des éléments de la liste : il suffit donc simplement de créer, sur le même principe, une variable qui va compter les éléments de votre liste contenant les noms de couleurs.
Ainsi, lorsque votre variable est à l’élément 1 de la liste, il faudra indiquer à votre programme que si cet élément est égal à “rose”, alors il faudra remplacer l’élément 1 par le nombre associé à la couleur rose, par exemple 4. Et ainsi de suite pour les huit couleurs possibles.
Puis votre variable doit passer à l’élément 2 de la liste, et répéter les mêmes conditions. Et ainsi de suite jusqu’à la fin de la liste.
Aussi, plutôt que “d’écraser” la première liste, vous pouvez également créer une nouvelle liste, et transvaser les données de la liste avec le nom des couleurs, vers cette nouvelle liste qui contiendra le nombre associé à la bonne couleur, comme ceci :
Les pas à pas en vidéo :
Voilà, vous avez maintenant une image compressée, et sans perte ! La compression, ce n’est en fait rien d’autre qu’un ré-encodage particulier de votre image. Que diriez-vous maintenant de compresser encore plus ?
Compressez encore plus !
Normalement, vous avez donc une liste ne contenant que des nombres, qui représentent des couleurs (et en particulier les différents costumes de couleurs de votre lutin). Si vous observez attentivement cette liste (ou bien la mosaïque qu’elle forme), vous devriez certainement remarquer de nombreuses répétitions.
Eh bien ces répétitions, vous pouvez les éviter : plutôt que d’avoir une liste qui ressemble à :
7 ; 7 ; 7 ; 7 ; 7 ; 7 ; 7 ; 7 ; 7 ; 7 ; 7 ; 7 ; 2 ; 2 ; 2 ; 3 ;
vous pourriez avoir une liste qui indique le nombre correspondant à une couleur, suivi du nombre d’occurrence de cette couleur. La liste ci-dessus devient donc :
7-12 ; 2-3 ; 3-1
Ça réduit considérablement la taille de la liste…
La difficulté est un peu plus grande, mais si vous voulez tenter de le faire quand même, voici quelques indications pour ce deuxième défi.
Tout d’abord, il faut pouvoir lire la couleur : souvenez-vous, votre machine ne sait rien et ne peut rien faire tant que vous ne lui avez pas tout indiqué explicitement. Il vous faudra donc une variable “couleur” qui enregistre la couleur lue et la stocke. Mais il vous faudra aussi une autre variable qui compte le nombre de fois que votre programme trouve la couleur lue. Dans l’exemple ci-dessus, pour le début de la liste, la première variable doit donc enregistrer la valeur “7” (la couleur lue) et la deuxième variable doit enregistrer le nombre de fois qu’on retrouve la couleur “7”, ici 12 fois.
Lorsque la couleur lue devient différente de “7” (ici elle passe à “2” au bout du 13ème élément), votre programme doit reporter les valeurs 7-12 dans la première ligne de votre nouvelle liste encore-plus-compressée (oui, il vous faut donc créer une nouvelle liste).
Puis votre programme fait la même chose avec la couleur suivante “2”, et ainsi de suite jusqu’à la fin.
Si vous préférez, vous pouvez simplement tester mon propre programme avec votre image. Observez d’abord comment il fonctionne avec mon propre avatar, puis rentrez à l’intérieur du projet pour remplacer ma liste “image compressée” par la vôtre, et lancez la compression suivante en appuyant sur la touche “c”.
Et pour comprendre comment j’ai réalisé mon programme, le pas à pas en vidéo :
Tout s’est bien passé jusqu’à maintenant ? Avez-vous bien réussi à compresser une deuxième fois votre image encodée ?
Décompressez maintenant…
C’est bien beau de compresser les images, mais à quoi ça sert si on ne peut pas les décompresser ? Eh bien oui, après tout, ma nouvelle liste compressée ne me sert à rien si mon programme Scratch qui me sert à dessiner l’image à partir de la liste, ne reconnaît plus la nouvelle liste compressée et ne dessine plus ce que j’espérais.
Dans ce cas il me faut d’abord passer par une étape de décompression !
Pour décompresser mes images, il suffit de créer un petit algorithme qui va lire les éléments compressés et les transformer pour reformer la liste initiale avant de pouvoir la traiter et afficher l’image correspondante. Pour un élément qui se présente sous la forme “7-12”, votre programme doit d’abord lire le premier caractère – ici “7” – l’enregistrer comme étant la couleur dans une liste, lire le tiret, puis lire tous les caractères après le tiret – ici ça donne “12” – et utiliser cette dernière valeur pour répéter le premier caractère – ici le 7 est donc à répéter 12 fois.
Testez vous-même avec mon programme de décompression.
Rentrez à l’intérieur du programme, importez votre propre liste compressée (la dernière que vous avez obtenue, celle qui a été compressée deux fois) dans la liste image en faisant un clic-droit puis “importer”, et appuyez sur la touche “d” : votre image se décompresse-t-elle ? Cliquez ensuite sur la touche "a" : votre image s’affiche-t-elle correctement ? Voyez-vous pourquoi ?
Pour découvrir comment j’ai réalisé mon programme de décompression, l’habituel pas à pas en vidéo :
Si vous avez eu du mal à réaliser ces défis, mais que vous avez compris comment j’ai procédé en regardant les vidéos, je vous conseille lorsque vous aurez un peu de temps, de repartir du début (votre liste de mots composant votre avatar et votre programme permettant de l’afficher) en recréant les étapes de compression et décompression sans aide. Après cela, les listes et les données ne devraient plus avoir de secret pour vous dans la programmation avec Scratch. 
En résumé
Une image, comme tout fichier sur votre ordinateur, possède une taille : elle prend plus ou moins de place dans votre ordinateur.
Il est possible de compresser un fichier (comme une image) pour qu’il prenne moins de place.
On peut compresser en supprimant de l’information (la qualité sera souvent réduite en conséquence), et dans ce cas, on parle de compression “avec pertes”. Mais parfois, on peut également compresser “sans perte”, en optimisant le système de codage utilisé pour que le fichier encodé soit moins gros.
Lorsqu’un fichier a été compressé, il doit parfois être décompressé avant de pouvoir être utilisé.
Dans Scratch, les variables et les listes, dans la catégorie “Données”, permettent de jouer avec les données d’un objet (comme notre image encodée par exemple), en stockant des valeurs qui pourront être lues et modifiées par le programme.
