{"id":2551,"date":"2026-03-18T17:03:54","date_gmt":"2026-03-18T16:03:54","guid":{"rendered":"https:\/\/elearningsamba.com\/index.php\/donnez-un-look-game-boy-a-vos-images-avec-dither\/"},"modified":"2026-03-18T17:03:54","modified_gmt":"2026-03-18T16:03:54","slug":"donnez-un-look-game-boy-a-vos-images-avec-dither","status":"publish","type":"page","link":"https:\/\/elearningsamba.com\/index.php\/donnez-un-look-game-boy-a-vos-images-avec-dither\/","title":{"rendered":"Donnez un look Game Boy \u00e0 vos images avec Dither"},"content":{"rendered":"

L’interface de Dither avec ses r\u00e9glages d’algorithme et de palette<\/em><\/p>\n

Le principe est simple… Vous balancez un fichier JPEG ou PNG et hop, le moteur JavaScript le transforme en utilisant des algorithmes de dithering comme Bayer (en 2×2, 4×4 ou 8×8), du halftone, des lignes, des croix, des points ou encore des \u00e9cailles.<\/p>\n

Neuf algorithmes au total et ce qui est vraiment cool, c’est qu’il y a des palettes pr\u00e9d\u00e9finies dont une palette Game Boy<\/strong> qui donne ce rendu vert olive mythique qu’on avait sur l’\u00e9cran LCD 160×144 de la jolie brique de Nintendo. Y’a aussi du CGA et du Sepia pour ceux qui veulent varier les ambiances et pour le coup, \u00e7a envoie bien du r\u00e9tro !<\/p>\n

Pour les djeuns, sachez que le dithering c’est en fait cette vieille technique qui remonte aux ann\u00e9es 70-80 permettant de simuler des d\u00e9grad\u00e9s quand on n’a que quelques teintes disponibles. En gros, au lieu d’un d\u00e9grad\u00e9 lisse en 16 millions de couleurs RGB, on place des petits points de 2 \u00e0 8 couleurs qui, vus de loin, donnent l’illusion d’un m\u00e9lange. C’est exactement ce qu’on voyait sur les \u00e9crans CGA 320×200 des vieux PC IBM XT ou sur la Game Boy sortie en 1989.<\/p>\n

$\"\"$ <\/p>\n

L’int\u00e9r\u00eat d’un outil comme Dither, c’est qu’en plus de jouer avec les 9 algorithmes, vous pouvez r\u00e9gler pas mal de param\u00e8tres via l’interface. Par exemple, la taille des cellules en pixels (8px par d\u00e9faut, mais j’ai trouv\u00e9 que 12px donne un bon compromis lisibilit\u00e9\/esth\u00e9tique sur des photos 1024×768), l’angle de rotation du motif \u00e0 45 degr\u00e9s, l’\u00e9chelle \u00e0 1.0, et m\u00eame choisir entre cercle, carr\u00e9 ou diamant pour la forme du rendu.<\/p>\n

Vous pouvez aussi partir d’un gradient lin\u00e9aire, radial ou conique au lieu d’une image existante… pas mal pour g\u00e9n\u00e9rer des fonds d’\u00e9cran r\u00e9tro sur macOS ou Linux !<\/p>\n

Et surtout, l’export se fait en SVG ou en PNG. Le SVG c’est super pratique si vous voulez int\u00e9grer le r\u00e9sultat dans un site web via une balise <img><\/code> sans perte de qualit\u00e9, vu que c’est du vectoriel.<\/p>\n

Par contre, attention, le mode Sepia a tendance \u00e0 \u00e9craser les contrastes sur les photos sombres en dessous de 128 de luminosit\u00e9 moyenne… du coup pr\u00e9f\u00e9rez le mode B\/W ou CGA sur ce type d’images.<\/p>\n

\n\n<\/p>\n

Sachez aussi que les photos avec beaucoup de d\u00e9tails fins (genre une photo de foule ou un paysage urbain en 4000×3000) perdent carr\u00e9ment en lisibilit\u00e9 avec les petites cellules de 4px ou 8px. Montez la taille \u00e0 16px ou 32px dans ce cas, vous verrez, \u00e7a change tout.<\/p>\n

Bon apr\u00e8s, est-ce que je vais mettre toutes les images de mon site en mode \npixel art<\/a> \ntram\u00e9 ? Non, clairement pas, car \u00e7a deviendrait monotone \u00e0 force. Mais pour un projet perso, un portfolio, un zine en ligne ou m\u00eame une s\u00e9rie d’articles th\u00e9matiques, \u00e7a peut donner un look uniforme sympa.<\/p>\n

Bref, allez jeter un oeil, c’est gratuit et \u00e7a tourne dans le navigateur.<\/p>\n

Merci \u00e0 Lorenper pour la d\u00e9couverte !<\/p>\n","protected":false},"excerpt":{"rendered":"