Regardez attentivement une photo de journal et elle se décompose en points noirs de différentes tailles Regardez une capture d'écran du premier Macintosh et un ciel gris s'avère être une dispersion de pixels noirs et blancs Regardez un sprite Game Boy et quatre nuances de vert dessinent en quelque sorte un visage Aucun de ces affichages ou presses ne pourrait montrer un dégradé lisse, et tous font semblant de la même façon : en disposant quelques couleurs disponibles en motifs l'œil fait la moyenne pour revenir en ton.
Cette technique est tramage Ce guide explique pourquoi il existe, comment les principaux algorithmes diffèrent dans l'arithmétique qu'ils utilisent, ce que les paramètres dans un outil de tramage changent et comment obtenir une sortie propre pour l'écran ou l'impression. Les exemples travaillés utilisent le Outil de tramage d'image Toolz1, et les nombres proviennent des mêmes formules qu’il exécute.
tl;dr : Le tramage reproduit une image à tonalité continue avec une petite palette, souvent juste deux couleurs, en plaçant des points dans des motifs que l'œil mélange dans des tons intermédiaires Le tramage ordonné (Bayer) compare chaque pixel à une matrice à seuil fixe et donne un hachage régulier La diffusion des erreurs (Floyd-Steinberg, Atkinson) pousse chaque pixel' ; s'arrondi l'erreur sur ses voisins pour un grain plus organique La demi-teinte varie la taille des points le long d'un écran tourné, comme l'impression. Le Outil de tramage d'image offre six modes, palettes rétro, export PNG jusqu'à 8 x et vrai vecteur SVG, tous côté client, gratuit, pas d'inscription.
Qu'est-ce que le tramage d'image ?
Le tramage d'images est une façon de montrer des tons qu'une palette ne peut pas représenter directement, en mélangeant les couleurs qu'elle peut représenter en petits motifs Une imprimante en noir et blanc ne peut pas imprimer 50 % de gris, mais elle peut imprimer un damier de points en noir et blanc qui semble gris à une distance de visualisation normale.
Le problème qu'il résout est appelé quantification Chaque pixel doit être arrondi à la couleur la plus proche dans la palette disponible Sans tramage, une photographie réduite au noir et blanc ne garde qu'une silhouette dure : tout ce qui est plus clair que le gris moyen devient blanc et tout ce qui est plus sombre devient noir Le dégradé a disparu Avec le tramage, l'arrondi se produit toujours pixel par pixel, mais l'erreur est étalée ou décalée par un motif, donc la densité de points sombres dans chaque zone suit à quel point cette zone était sombre dans l'original.
Différents algorithmes répartissent cette erreur de différentes manières, et le motif que chacun laisse derrière lui est sa signature visuelle. C'est pourquoi " ; dithered" ; peut signifier le hachurage soigné d'un vieux jeu PC, la texture granuleuse de MacPaint ou les points ronds d'une affiche sérigraphiée.
En quoi les algorithmes de tramage sont-ils différents ?
Il y a deux familles. Tramage ordonné décide chaque pixel indépendamment en le comparant avec une position dans un motif de seuil fixe. Diffusion d'erreurs décide des pixels en séquence et transmet chaque erreur d'arrondi aux pixels non encore traités. La demi-teinte est un parent dérivé de l'impression qui modifie la taille des points plutôt que le placement des points.
| Mode dans l'outil | Famille | Comment ça décide | Regarde | bien pour |
|---|---|---|---|---|
| Bayer 4x4 | Commandé | Comparez le ton avec une matrice de seuil 4x4 | Traversée régulière, motif visible | Jeu rétro et style PC précoce, affiches |
| Atkinson | Diffusion d'erreurs | Poussez les 3/4 de l'erreur à six voisins | Contraste élevé, reflets soufflés | Le look Macintosh de 1984, des portraits avec punch |
| Floyd Steinberg | Diffusion d'erreurs | Poussez toute l'erreur à quatre voisins | Grain bio fin, tonalité la plus fidèle | Photographies où le détail compte |
| Demi-teinte | Écran modulé en amplitude | Le rayon du point grandit avec l'obscurité, sur une grille tournée | Points ronds en biais | Affiches de style imprimé, bande dessinée et pop art |
| Cyber-glitch | Palette snap plus déplacement | Couleur de palette la plus proche par bloc, lignes de balayage décalées | Blocs colorés avec larmes horizontales | Art multicolore stylisé |
| Dur 1 bit | Seuil | Sombre si le ton est inférieur à 128 | Pas de tramage, silhouette pure | Logos, line art, pochoirs |
Les sections suivantes parcourent l'arithmétique avec des nombres réels, en commençant par la valeur de tonalité que chaque mode partage.
Comment un pixel' ; s ton est-il calculé avant de tramer ?
Avant qu'un motif ne soit appliqué, chaque pixel est converti en une seule valeur de luminosité de 0 (noir) à 255 (blanc).L'outil utilise les poids de luminance de Recommandation UIT-R BT.601, qui pèsent le plus vert parce que la vision humaine y est la plus sensible :
luma = 0.299 R + 0.587 G + 0.114 B + brightness
curved = ((luma / 255 - 0.5) x contrast + 0.5) x 255 clamped to 0..255
Le curseur Luminosité décale chaque pixel de -100 à +100 Le curseur de courbe Contraste, de 0,5 à 3 avec un défaut de 1,4, étire les tons du gris moyen.
Exemple travaillé : un pixel gris moyen RVB (100, 100, 100) aux paramètres par défaut.
luma = 0.299(100) + 0.587(100) + 0.114(100) + 0 = 100
curved = ((100 / 255 - 0.5) x 1.4 + 0.5) x 255
= ((0.39216 - 0.5) x 1.4 + 0.5) x 255
= (-0.15098 + 0.5) x 255
= 89.0
Ainsi, le contraste par défaut pousse ce gris plus sombre, de 100 à environ 89. un pixel exactement à 128 bouge à peine, et un pixel à 180 bouge plus léger. L'augmentation du contraste élargit cet étalement, ce qui signifie moins de tons moyens et des motifs de points plus audacieux.
Comment Bayer a-t-il ordonné le travail du tramage ?
Le tramage Bayer carrele une petite matrice de seuils à travers l'image et marque un pixel sombre lorsque sa tonalité tombe en dessous du seuil à sa position La matrice est disposée de manière à ce que les seuils soient répartis le plus uniformément possible à travers la tuile, l'arrangement publié par Bryce Bayer en 1973. L'outil utilise la version 4x4, mise à l'échelle à 0-255 :
0 128 32 160
192 64 224 96
48 176 16 144
240 112 208 80
Prenez une zone plate où chaque pixel a la tonalité incurvée de 89 de l'exemple ci-dessus Une cellule est sombre lorsque 89 est en dessous de son seuil Les seuils au-dessus de 89 sont 96, 112, 128, 144, 160, 176, 192, 208, 224 et 240 : dix des seize Donc 10 cellules sur 16 obtiennent de l'encre, ce qui est une couverture de 62,5 %, proche de la tonalité' ; l'obscurité de 1 - 89/255 = 65 %.
Chaque zone avec le même ton obtient exactement le même motif, et cette répétition est le look Bayer Il ne produit jamais de grain aléatoire, il carrele proprement, et il comprime bien le PNG Sa faiblesse est le baguage : un gradient lent passe par au plus 17 motifs distincts.
Comment fonctionne la diffusion des erreurs Floyd-Steinberg ?
Floyd-Steinberg traite l'image de gauche à droite, de haut en bas Chaque pixel est arrondi au noir ou au blanc, et la différence entre sa tonalité et la valeur à laquelle il a été arrondi est répartie entre quatre voisins qui n'ont pas encore été traités, en utilisant des poids qui s'ajoutent au 16/16. Robert Floyd et Louis Steinberg l'ont publié en 1976.
current 7/16
3/16 5/16 1/16
Exemple travaillé avec la tonalité de 89. il est en dessous de la coupure 128, donc le pixel devient noir (0).L'erreur est de 89 - 0 = 89, qui est transmise :
| Voisin | Partager | Ajouté à son ton |
|---|---|---|
| Droite | 7/16 | 38,9 |
| En dessous gauche | 3/16 | 16.7 |
| En dessous | 5/16 | 27,8 |
| En dessous de droite | 1/16 | 5.6 |
| Total | 16/16 | 89,0 |
Le pixel à droite a maintenant 89 + 38,9 = 127,9, juste sous la coupure, donc il devient probablement noir aussi et passe sur sa propre erreur plus petite Un peu plus loin, l'erreur accumulée fait basculer un pixel sur 128 et il devient blanc Sur une zone, la proportion de pixels noir et blanc correspond au ton original, et parce que le choix dépend des voisins, le grain semble irrégulier plutôt que carrelé.
Parce que toute l’erreur est conservée, Floyd-Steinberg préserve le mieux le ton général, c’est pourquoi c’est le choix de la fidélité photographique.
Pourquoi le tramage d'Atkinson semble-t-il si contrasté ?
Atkinson dithering, écrit par Bill Atkinson pour l'Apple Macintosh original, étale l'erreur plus large mais en perd délibérément une partie Chacun des six voisins reçoit 1/8 de l'erreur, donc seulement 6/8 (trois quarts) est transmis :
current 1/8 1/8
1/8 1/8 1/8
1/8
Avec le même ton de 89 et une erreur de 89, chaque voisin obtient 11,125, pour un total de 66,75 transmis, et 22,25 est simplement laissé tomber L'erreur de chute pousse les zones presque blanches vers les zones blanches pures et presque noires vers le noir pur, donc les reflets explosent, les ombres se bloquent et les tons moyens gardent une texture nette et ouverte Elle est moins précise que Floyd-Steinberg et souvent plus attrayante, en particulier sur les visages et les petits écrans.
Comment fonctionne le mode demi-teinte ?
Le demi-teinte varie la taille des points plutôt que leur placement L'outil pose une grille de points d'échantillonnage tournés à l'angle de l'écran, lit le ton en chaque point et dessine un cercle dont le rayon croît à mesure que le ton s'assombrit :
radius = (1 - tone / 255) x (pixel scale / 2) x 1.3 capped at pixel scale / 2
dots with a radius of 0.4px or less are not drawn
Avec l'échelle de pixels 4 px par défaut :
| Tonalité | Rayon | Résultat |
|---|---|---|
| 0 (noir) | 2,6, plafonné à 2,0 px | Points touchants, foncés solides |
| 89 | (0,651) x 2 x 1,3 = 1,69 px | Point moyen |
| 200 | (0,216) x 2 x 1,3 = 0,56 px | Petit point |
| 230 | (0,098) x 2 x 1,3 = 0,25 px | Sauté, se lit comme du papier |
L'angle par défaut est de 45 degrés, la convention pour un écran unicolore car une grille diagonale est moins perceptible à l'oeil que les rangées alignées avec les bords de page Les angles proches de 0 ou 90 produisent des lignes horizontales ou verticales visibles Le curseur d'angle n'affecte que ce mode.
Que changent l'échelle des pixels, les palettes et les paramètres inversés ?
Échelle pixel (2 à 32 px, 4 par défaut) définit la taille de chaque bloc ou cellule à points L'outil échantillonne un pixel par cellule plutôt que de faire la moyenne de la cellule, de sorte que les détails très fins plus petits qu'une cellule peuvent disparaître ou produire des motifs de moiré sur les tissus et les grilles Les cellules plus grandes donnent une affiche plus volumineuse et plus graphique ; les cellules plus petites contiennent plus de détails et produisent des fichiers SVG plus volumineux.
Palette définir les couleurs Cinq préréglages sont inclus : Brutal Paper (papyrus, jaune aléa, fusain), Mac OS 1984 (blanc, gris, noir), Gameboy Classic (quatre verts), Cyberpunk Neon et Synthwave 80 s, plus Custom Colors avec votre propre fond et avant-plan Cinq des six modes sont bicolores et n'utilisent que la première et dernière couleur de palette C'est pourquoi Gameboy Classic montre uniquement ses verts les plus clairs et les plus foncés dans Bayer ou Floyd-Steinberg Cyber Glitch est le seul mode qui correspond à chaque couleur de la palette.
Inverser échange l'arrière-plan et le premier plan contre des points clairs sur un champ sombre.
Quelle taille pouvez-vous exporter, et quand devez-vous utiliser SVG ?
La photo est d'abord ajustée sur une scène fixe, donc un fichier de caméra 6000 px rend aussi rapide qu'un petit Faites glisser à l'intérieur de la toile pour repositionner la récolte.
| format aspect | Étape (1x) | 2 x (par défaut) | 4x | 8x |
|---|---|---|---|---|
| Original | 840 px de large | 1680 de large | 3360 de large | 6720 de large |
| 1 :1 carré | 840 x 840 | 1680 x 1680 | 3360 x 3360 | 6720 x 6720 |
| 16h9 paysage | 1120 x 630 | 2240 x 1260 | 4480 x 2520 | 8960 x 5040 |
| 9h16 vertical | 630 x 1120 | 1260 x 2240 | 2520 x 4480 | 5040 x 8960 |
| 4 :3 classique | 1040 x 780 | 2080 x 1560 | 4160 x 3120 | 8320 x 6240 |
Une exportation PNG n'agrandit pas l'aperçu Elle redessine la source à la taille cible et exécute à nouveau le tramage avec l'échelle de pixels multipliée par l'échelle d'exportation, donc à 4 x un point 4 px devient un point net 16 px plutôt qu'un agrandissement flou Le rendu se fait avec le API de canevas HTML(en anglais), qui contient de grands bitmaps en mémoire ; si une exportation 8 x échoue avec " ; Export a échoué Essayez une échelle d'export plus petite." ;, faites ça.
SVG export écrit chaque point comme un vrai <rect> ou <circle> élément, suivant le Spécification W3C SVG[traduction], donc l'affiche évolue à n'importe quelle taille d'impression sans rééchantillonnage et s'ouvre dans un éditeur vectoriel Le texte de la carte affiche reste comme texte modifiable Le compromis est la taille du fichier Une échelle de 4 px sur une étape de 840 x 1120 a 210 x 280 = 58 800 cellules, et une image en mode rect sombre peut écrire la plupart d'entre elles comme des éléments séparés d'environ 55 caractères chacun, ce qui approche 3 Mo. Doubler l'échelle de pixels à 8 coupe le nombre de cellules à un quart Utilisez SVG pour l'impression et l'édition, PNG pour le Web.
L'effet de ligne de balayage CRT n'atteint jamais une exportation ; il s'agit d'une superposition d'aperçu uniquement La superposition de la carte d'affiche, en revanche, fait partie de l'export et est activée par défaut avec l'en-tête de l'espace réservé " ; DITHERED //2026" ; ; untick " ; Afficher la superposition et le devis de la carte d'affiche ; si vous souhaitez l'image seule.
Mes images sont-elles téléchargées ?
Non. Le fichier est ouvert en tant qu'URL d'objet local, dessiné sur un canevas et tramé dans le même onglet de navigateur. Aucune demande ne contient de données d'image, donc les photos inédites ou les actifs du client restent sur votre appareil, et l'outil continue de fonctionner avec le réseau une fois chargé. Coller à partir du presse-papiers avec Ctrl+V ou Cmd+V fonctionne également.
Les échantillons intégrés (Earthrise, Blue Marble et une empreinte lunaire) sont des photographies de la NASA. Les œuvres du gouvernement fédéral américain ne sont pas soumises au droit d'auteur en vertu 17 USC 105[traduction], c'est pourquoi ils peuvent être expédiés sous forme d'échantillons Pour vos propres téléchargements, l'outil n'ajoute aucun filigrane et ne revendique aucun droit ; les limites habituelles sont les droits que vous détenez dans l'image source.
Quelles erreurs pouvez-vous rencontrer ?
| Message ou symptôme | Cause | Correction |
|---|---|---|
| " ; Ce fichier n'est pas une image." ; | Le fichier' ; s type n'est pas une image | Convertissez-le en premier, par exemple avec un convertisseur de format d'image |
| " ; Cette image n'a pas pu être décodée." ; | Le navigateur ne peut pas lire ce format, comme HEIC en dehors de Safari | Convertir en JPG ou PNG |
| " ; L'exportation a échoué Essayez une échelle d'exportation plus petite." ; | Le navigateur ne pouvait pas allouer le grand canevas | Choisissez 4 x ou 2x |
| " La lecture du Presse-papiers a été bloquée..." | Le navigateur a refusé l'accès au presse-papiers au bouton | Appuyez plutôt sur Ctrl+V ou Cmd+V sur la page |
| La palette ne montre que deux couleurs | Les modes bicolores utilisent la première et la dernière couleur | Passez à Cyber Glitch ou définissez des couleurs personnalisées |
| Motifs moires ou chatoyants | Détail régulier fin plus petit que l'échelle des pixels | Augmentez l'échelle des pixels ou flouez légèrement la source en premier |
| SVG beaucoup plus grand que PNG | Un élément par point | Augmentez l'échelle des pixels ou exportez PNG |
Les zones transparentes d'un PNG sont placées sur du blanc avant de tramer, elles se lisent donc comme du papier.
Alternatives pour tramer une image
| outil | Comment | notes |
|---|---|---|
| GIMP | Image, mode, indexé, avec tramage Floyd-Steinberg | Basé sur une palette, pas d'angle d'écran en demi-teinte |
| Photoshop | Grayscale, puis mode Bitmap avec Halftone Screen ou Diffusion Dither | Orienté impression, payant |
| ImageMagick | magick in.jpg -colorspace Gray -ordered-dither o4x4 out.png |
Scriptable, de nombreuses cartes de seuil |
| ImageMagick | magick in.jpg -dither FloydSteinberg -monochrome out.png |
Diffusion des erreurs en noir et blanc |
| Tramage d'images Toolz | Six modes, palettes, vecteur SVG | Côté client, prévisualisez en glissant |
Les outils de ligne de commande gagnent pour les lots Un outil interactif gagne lorsque le look dépend du contraste et de la taille des points tout en regardant le résultat.
Si la PNG tramée se dirige vers un site Web, le Guide de compression d'images explique comment le réduire davantage ; les images avec seulement deux couleurs se compriment extrêmement bien en PNG. Pour transformer la sortie dans un autre format, le Guide du convertisseur de format d'image explique quand PNG, WebP ou GIF s'adapte L'ensemble complet vit sur le hub d'outils d'image[TRADUCTION], et vous pouvez essayez l'outil de tramage avec l'un des échantillons de la NASA avant de charger votre propre photo.
