Pictures in pure HTML with chafa and aha //at 05:55 //by abe

I recently stumbled upon chafa, a tool to display pictures, especially color pictures on your ANSI text terminal, e.g. inside an xterm.

And I occasionally use aha, the Ansi HTML Adapter to convert a colorful terminal content into HTML to show off terminal screenshots without the requirement of a picture — so that it also works in e.g. text browsers or for blinds.

Combining chafa and aha: Examples

A moment ago I had the thought what would happen if I feed the output of chafa into aha and expected nothing really usable. But I was surprised by the quality of the outcome.

looks like this after chafa -w 9 -c full -s 160x50 DSCN4692.jpg | aha -n:

▆▅▆▃▆▃⎽⎺▄▆▄▂▅▄━▄━▂⎽▆▘▂▍▝■▌▆▘▚▄▂▄╸▂╲▌▄▚▅▶▄⎺▅▄▃▃▮▗▆▃▅▂▅━▃▆▃▃▂▌▆▮┛┷▅⎽⎻┛▚▅⎺▅●▚▋▋▘▃⎽⎺╱■▄▚▊▄▎⎺▄▗▂▄▂▅▆▃▅■▃▅▂▆▄▂⎽▍▄▃▅╲▅▄▖╱╸▖▘▂▼●▋▅⎽▚▃⎽⎺▅▂▅▃▅▆
┻⎺⎽╸⎺▅▃▅▂▆▆▃▅▃▂▅▃▃⎺■⎺▃⎽▅▝▂━▚▃●▄▅▶▆▖╸⎺▋━▆▆┍▂●╱▅━▄▆▍⎺▅▃▄▂▄▅▃▅▃▂▂⎺▮▗╸▃⎻━╸▂▶▝▂▝▖▖▝▗▘▆▂▘▄▅▘▗▆▃╸▆▃▍▂▝▅⎺▆▃▄■▃▅▂▆▄▂▝▖▄▅▆▂▅▝▖▄▃▖▃▆▚●▃⎽▖▝▗▃⎺▃⎺▄
⎺▄▃━▂▗▖⎺▅▂▄▂▄▅▂▄▃▆▅▖▚▗▃╸⎺▖⎺▗▝▂▂▅▃▄▖▆╺▄╲╾▃▚▃▝╸▂▲▂▄■▂▘▊▆▅▆▄■▃▅▂▅▂▃▃▄■▚▅▮▃▃▅●▅⎺▍▆⎺━▃▖╺▖⎺━┓▲▘┛▗▅▌▎╲▌╱▝▄▚▅▆▄▆▃▄▂▅▃▂▝▖⎺▅▝▅▄▂▃▖▆▃▖◼▃▚╾▘⎼▗▃▂⎽
▃▃▂╺▘╼▝▂▃▂▆▄▆▃⎽▄▄▆▃▂▂╾▆▘▃▄▄▄╾▍▲▃▄▃▂╺▖▃▃▋▄▃◀▅▘▂▅━▘▅●▖╾▃▆⎺▆▄▆▃▆━▄■▄▃⎽▃┚⎼▆▄▚▂╴▖▅▂▗▶▃┙▘▅▂⎼▃▄▅╱▝▄▌┺╍▖▅●▄┙▍▅⎺▅▆▃▅▂▄▂▆▄▃▂▶▂⎽▃▅▄▂▝╸▖▅▌▖┛▅▖▆▃▄
▝⎽▝▃▶▅╱⎼▃▄▂╱▅▅▂▅▂▆▆▃▅▃▖▌▄▄▂●╸╴▝▗▄━▖▖⎼▆┖▗▃┗▄▲┖╾⎺▆·▃╲▂▂╲▅▃▚▅⎺▆▄▅▃▅╾▃▆▃▃▃▄▖▃▄▃▂╸╴━▚▄■▅▆⎼┒▅⎼▆▃⎽▖╸▖╸▋▃▝▃▝▂▃▄▄▂▆▄▆▃▅▂▄▂▅▃⎽▆▂▅▆▝▗▃▂╺╼▄▖┍▍▊▌▝
▄╺▘▲▆━▘┒▗▍▝▮▅▚▖▆▅■▄▂▄▅▂▄▂▃▃┗▂⎽▄▝▆╺▅▅▋╺▃▃▆▖╲▝▂▂▄▃▄⎺▂⎺▂╸▚▂▚▝▄▗▅⎺▅▂▄▂▄▅▂▅▂▃⎽▗▘▋╺▝▄·▄╱╸╸▍▂▃▄┰▂▎▃▂▚▅┎┎╸▂▋▅▘⎼▅◼▃▝▚▆▃▅▂▅▂▄▂▅▃▂▅▄▆▄▅▖▃▌■▄▖▝╲▅
╸▃╱▗▄⎺╺▅▗▖▄▌━▖╾▚▂▆▆▄▆▄▚▘▄■▃▖▝▃▆▗▄▘▝▅━▖▗╺▃⎽⎼▖┭▃▄▅■▃▚▝┱╺▆■▖▂╲▅▖▊▆▃⎺▅▆▄■▃▄▂▅▃▂▝▚▖╱▄╴┛▊▄▄▂▃▂▗▖▆╾▝━▂╱━·┓┺┑⎽▌▄▃▘⎺▆▂▝⎺▆⎺▄▂▅▂▃▂▅▃▅■▂▅▖▖━▄▂┗▝■
▋▂╼╹▅╼┏▃▃⎻▃▗▆⎼▅▚▃╸▖╸▝▅▃▅▂▆▆▃▅▃⎽▄╸▅▘┙▘▘▘▄▖▄▝▅▄╺▖▆▆▃▅▂⎽▲▘▅━▆▅▝▖▃▝╺╸▖▃▆▄▆▃▆▃▄━▄▃▖⎻╾▄▃▅▃▄▄▄▆▅▅▃━·▅▘╸▆⎼▂╴▆▆■▝┑▋▄▅▼╸▅▅▃⎺▅▆▄●▄╾▃⎽▅▖╾▝▂▃▅┗▄▝▅
▝▅◼▂▆━▝▎▎╸▖▖▖▄▃⎽▝▃▝▖▆▂▂⎺▄●▄▂▅▅▂▄▂⎽▖▄▗▃▃⎽▅■▖▖▅⎺▃▚▘┒▂▂■▃▚╺▌▄▃▅▂■▃▂▖▆■▄▃⎺▆▃▅▃▅■▃▆▃▂▂▅┓▄⎻▍⎽─▄▖┎━▆▆▆▅▆▂▼┳▆▚▆▆▃╸▗◆┳▃▂▊▅▚◀▆⎺▅▆▘⎽▆▄▂▆▄▂▄▄▘▄◀▃
▃▌▝╸▅▆▄▖⎻▗┳·▆▚▆▃▅▖▗▝▂▝▂▅⎻⎺▆▄▆▃▚▄▄■▄▂▂▆▖▂▅▅▆╸⎺▍▃■━▅▗▖▄▃▃╾▖▄▂▗▘▘⎺▅▃▄▝╺▅▃▲▌▝▆⎺▄▂▄▅▃▅▃▂▚▘▃▆▃▂▖▚⎼▃▃◼▘╼╺▂⎻▚▄┗▅▆▄▅▄▅▗┍▃▃╸▃▃▗▅▄▆▄▄▃⎺▆▄▂▅▃▂▆▃▃
▝▍▌╱┗▗▅▃▗▃▄▼▆▖▘▂▆▆▘▂▘▝⎻▆▃▆▅▄▝▆▃▅▃▆▃▄▆▃▖▖▅▄▂▃▍▍▂▖╺▂▄▆■▅▗▂▆▅▝▚▃━▅▚▅▝▅▂⎽╲▃▃▃▅▖⎺▅▆▄■▃▅▂▅▂▖▝▆▆┗┒⎺▃▄⎽▗▝▘▂▝▅▅▃▅⎺⎼▄▄▄▂▝╸◀▆▅▖━▃┓▆▂▂▆▄▄▂⎺▆▄▂▃▃⎽
▂╾▃·▅▚▖▖▅▝▂▂▌▆╾▝▄▃▄■▍▘▖▅▝▂⎽▆▆▆⎺⎺▅●▄▂▆▅▃▅▃▖▚■▃▃▄⎽⎽▅▃▖▖▗▄▚▃▗▆▅▃▂▆▄▋▂▄▂▂▅▃▄▃▆▅▄▌▃▆▄▅▃▆▃▄▆▄▂▄⎺▂⎺▃╾▲■▆⎺▅▂▂⎺▃▂⎽▃▃▆▆▆▝▖╺▎▂▃⎺▍╸●▆▆▆▅▚▆▄▄▃⎺▅▃▂
▼▚▂▖╸▆╲▄⎺▌▆▂▖▃⎽▄◼▗╺▃▅▊▃▃▘▝▗╸▂▚▗▃▮⎺⎺▄▆▃⎽▅▄▂▅▃▗⎽▆▃⎽▆▅▂╹▊┗▆▅▄⎽●▅▄▃━▚▅▆▅▄▗▍⎽▄▃▃⎺▆▅▄▃▝▅⎺▅▂▅▂▃▆▄▂▄▆━▗▂▄▂▂▅⎺▂▘▃▄▃▄▄▅▅▆▆▆▅▝▘▍▂▄▃▃▃▗▂▝▄▅⎺▅▄▄▂⎺
▄▂▖▄━╾◀▅▂▝▋╺▝▘▃⎽▃●⎻⎺▅▆▃▅▄▆▖╏▅▗▂▌┺▆▄▃⎺▆▃▅▂▆▃▂⎺▄▂▄▆▅▃▂▅▃◀▝▆▅⎽▂▅▆┳▃▅▄▃▄▄▃⎽▗▄▂▄▄▄▃▘╺▆▄▃━▅⎺▄▂▄▂▂▆▃▂▗▂▄▆▄▝⎽▝▅⎺▃▘▘▄▅╲╺▂⎽▆▌▃▄▅▄▆▃▂⎽▂▅▅━▅▃▃⎺▅▄
▅▃▅▃⎽▍▆▝▝▘▘▖╺▖▖▄▆⎽▗▅▄▶▂▃▅▅▄▂▄▂▃▃▆▂▂▃▄▃▂⎺▅⎺▄▂▆▃▂▆▃▖⎺▃▅▅▃▂▂▃▌▃▃▄▅▂╍▗▅▆▄▂▅▅▃▃▆▃▃▆━▃▄▃⎽⎺▅▅⎺▅▆▃■▄⎽▂▂▝▖▘▃▅▄▂▅▅▆▄▅▄▅▆▄▆▄▄▘▅▅▄▃▅▄▄▂▄▂▃▂▆▆▆▅▃▃
▃⎽▆▄▂▅▂⎽⎽▄▘▅▖▄▄▄⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽■⎽⎽▅⎽⎽⎽▂⎽▂▂⎽⎽⎽⎽⎽⎽▗▄▄▄⎽⎽⎽⎽⎽▂⎽▗▂▂⎽⎽⎽⎽⎽▂⎽▂▂▂▂▂▂▂⎽⎺▅▃▂▂▂▂▂▂▂▂▃▂▂▂▂▂▂▂▂▂▃▂▂▂▂▂▂▂▂▃▄▄▃▄▃▂▂▃▂▅▅▂
▅▂▅▂▘▆▄⎺▆▆▆▆▆▖▆▌▍⎺⎺⎽⎺⎺▝▆▌▊▍⎽⎺⎺⎺⎺▅▋▍▎⎺⎽⎽⎽⎺▝▆▌▋▍▂▂▂⎺⎺▖▋▊▏▼▗▂▂⎺▌▋▝▌▍▊▂⎺▂⎺▎▌▉▎▘▗▂▗⎺▝▍▝▋▌▄▉▂▗▅▌▉▘▌▎▅▂▂⎽▆▍▝▊▎▏▗▃▃⎽▝▎▍▋▋▗▃▃▃▃▋▍▃▃▃▃▃▃▃▂▅▃▃▂▄
▂▄▆▄■▄⎽▏╺▖▄▄▖▌▋▌▍▝▍⎺▌▏▋▌▌▋▎┗▘╲╱▉▎▋▍▎▅▌─╴▝▋▋▌▌▎▉▍┮▘▉▍▌▊▋▋▋▍⎺▖▋▋▎▍▎▝▝▗▆▊▍▌▊▎▌▋▎▌▎▉▎▋▋▍▊▉▋▌▍▌▎▊▍▎▋▍▋▍▉▍╿▊┃▏▊━▃▘▊▎▎▋▋▘┻━╸▗▋▎▄▆▅▆▄▂▆▆⎺▄▂▆▅
▂■▆▃▆▅▃▏▂⎺⎺⎺▃▌▋▌▍▃⎺▅▅▆▋▌▌▋▎▝▘▝▘▉▎▋▍▎▂▝▅▅▂▋▋▌▌▎▅▘▝▘▗▎▋▋▋▂▎▆▂▃▌▋▎▍▎▂▝▆▃▊▎▌▊▎▂▘▆▆▄▊▍▋▋▍▂▉▆▅▃▌▎▊▌▎▂▆▆▆▂▍▖▋▎▂▝▆▝▅▊▎▍▌▋▆▆▆▆▆▋▎╸╲◀⎽▌▆▖▃⎽▆▖▋╾
▖▆▃▘╺▅▊▎▆▆▂▃▂▝▌▋▍▃▃▂▂▂▘▌▋▋▃▂▂▂▂▂▌▋▉▏▂▂▂▂▂▘▌▌▍▃▃▂▂▂▂▌▋▋▃▃▃▂▂▂▌▋▉▝▃▃▃▂▃▂▌▌▋▃▃▃▃▃▃▂▌▊▝▃▃▃▃▃▃▌▎▋▃▃▃▃▃▃▃▍▉▝▄▄▄▃▃▃▃▍▊▝▄▃▃▃▃▃▘▍⎽▄▗▆⎺▅┙▆⎽▃▊▗▌
▃▘▝╴▅▖▆▝▄▖▍▅▂▂▂▅┷▃▋▃▃▃▃▃▂▄▄▆▃▃▃▃▃▃▄▄▆▗▃▃▃▃▃▃▄▖▋▃▃▃▃▂▂▄▄▆▄▃▃▃▃▂▃⎻▗▗▃▃▃▃▂▂▄▗▂▗▃▃▃▃▂▂▂⎺▗▄▃▃▃▃▃▂⎻■▗▄▃▃▃▃▃▂⎻━▗▄▃▃▃▃▃▖■╺▄▃▃▃▃▃▃▖▖▆▂▅▃▌▂▆▖▝▆
▮⎻╺▶▆▄▅▼▉▎▄⎽▖▝▖▋▌▌▋▎▍▗▖▖▊▎▌▉▋▖▗▃▖▄▌▋▌▍▏▗▃▃▖▊▎▌▋▍▌▗▄▘▌▌▋▎▎▏▊▄▄▚▉▎▍▋▌▌╻▍▃▖▋▍▊▋▎▌▌▉▖▌▌▎▊┃▅▗▂▃▖▊▎▅▋▋▝▗▏▌▋▊▎▊▌▍▌▉▋▎▍▋▎▊▍▎▝▌◆▎▖▌▎▝▂╸●▘▄▝▃▃▃
▂·▄▄▝▲▖▅▊▎▊▍▂▼▍▋▋▌▌▏▗╱┶▖▊▎▌▉▌▍▍⎻▖▝▌▋▌▍▏▊▍▂▍▊▎▌▋▍▋▎⎻▖▃▌▋▉▎▏▊▂▍▎▉▎▍▋▍▊┃⎻┃▍▋▌▋▌▎▝▗▂▌▃▌▍▊┃▍▌▄▄▖▊▎╽▋▌▖▌▂▂⎽▊▎▊▌▍▖▉▖▋▍▋▎▊▍▎▋▗⎽▌▋▋▎▝▮▄▖▅▝━⎽▝▂
▆▃▝▆▄▂▅▘▊▎▂⎽⎽⎽▝▌▋▌▌▃▂⎽▂⎺▊▎▋▊▝▂▂⎺▘▗▍▋▌▎▂⎽⎺⎺▍▊▎▌▋▝⎽⎽▍▝▃▍▋▉▎▂⎽⎺⎺▋▗▎▍▌▝⎽⎺⎽⎺⎽▋▌▊▌▖▂⎽⎺▆▃▌▎▊┠▃⎺▂⎺⎺▗▎◼▋▝▃⎺⎺⎺⎽▋▍▊▌▍▃▉▘▘⎽▌▍▋▍▍▂▝▘▌⎽▌▎▖·▍▚▄▃▌▘▃▅
■▄◆╾▃⎽▅▅▊▎▂▃▃▄▄▃▌▌▍▄▃▃▃▃▃▂▋▊▃▃▃▃▃▃▃⎽▌▎▃▃▃▃▃▃▂▋▌▄▃▃▃▃▃▂▌▊▃▃▃▃▃▃▃▂▌▝▄▃▃▃▃▃▃▍▋▃▄▃▃▃▃▄▘▎▝▄▄▄▃▃▄▄▘▂▝▅▄▄▄▄▄▄▎▋▄▄▄▄▄▃▄▘▂▝▄▅▄▄▄▄▄▘▍▂▂▃▄▃▄▂▋▅⎽
┕⎽▃━▆▅▝▖▝⎺⎺▖▆▆▆━━▆▆▆▊▆▅▄▄▄▃▆▆▆▗▆▅▅▄▄▆▆▆▋▅▅▅▄▄▃▆▆▄▆▅▄▄▄▃▃▆▌▌▅▄▄▄▄▃▖▗▅▗▄▄▄▄▃▃▆▆▖▅▄▄▄▄▃▖▆▅▗▄▄▄▄▄▃▖▆▄▗▄▄▄▄▄▃▖▆▖▅▄▄▄▄▄▃▖▅▖▄▄▄▄▄▄▃▖▂▗▄▘▋⎻▄▃
▃▅▄▄▂▂▝▖▖▗▊▍⎽⎽⎽⎽⎽▋▋▌▋▎╺━▅╸▊▎▋▍▎▅╺▂▖╾▋▋▌▋▍▖▄━▖▆▍▋▉▎▄▗▖▗╸▊▋▍▋▍▅┏─▖▅▌▌▊▍▆▗▖▗▖▉▎▗▊▋▉▖▂▗▖▊▎▉▌▍▖╺╺▏▅▌▎▉▌▎▝▌▂▘▆▍⎻▊▍▎▄▋▘▌▉▍▍▋▊▂⎽⎽⎽⎽▖▎▅▅▄▖▅▅╺╸
▮▗⎽⎽▃▅▚▂▄▝▊▎▃▄▄▘▝▋▋▌▌▏▗╱┷▖▊▏▋▉▏▋▗▄┓▖▋▋▌▌▎▝╲▄▖▗▎▋▊▏■▝╲▘▝▊▋▍▋▎▋▏■▎▄▌▌▊▍▏▋▆▖▎▉▎▎▊▋▉▗┳▖▎▊▎▊▌▍▝▉▂▅▂▌▎▉▌▎▝▊▂▖▝▍▎▊▍▎▝▗╺▖▂▍▎▋▊▄▄▄▝▄▘▎▂▂▆▅▄▂▂▂
▊▝▲▂▃┓▘┙▖▆▊▎▄▃▃▃▗▌▖▌▌▄▄▃⎼⎼▊⎽▋▉▝▄▃▃▃▂▍▌▌▌▝▄▃⎼▂▗▎▋▊▮▄▃▃⎽▂▋▋▍▍▝▄▃⎼⎽▗▍▍▊▍▖▃⎼⎽▂▗▍▎▋▲▄▃▃⎽▂▋▍▊▌▌▄▄▆▂▂▍▎▊▘▍▄⎼⎺▂▂▍▍▗▍▎▄▆⎽⎽▂▍▄▌┗▄▄⎼⎽⎽▗▎⎽▆▄▃⎽▆▅▄
▋▍·▝▃▅╶╲▝▂▝▃▂⎽▃▃━━▃▃▘▆▅▅▅▅▅▄▃▊▅▄▄▄▄▄▄▃▘▝▄▄▄▄▄▅▄▃▝▄▄▄▄▄▄▄▘▃▅▅▅▄▄▄▅▄▍▘▅▅▅▅▅▅▅▂▂▝▅▅▅▅▅▅▅▂▘▅▅▅▅▅▅▅▅▃▝▆▆▅▅▅▅▅▘▃▝▆▅▅▅▅▅▅▂▃▅▆▆▅▅▅▅▅▘▂▂▆▘▅▄▂⎺
▂▍▝▃━╺▅▄▝⎼▅▗▘▌▆▅▅▅▅▅▖▋▊▆▆▆▆▅▅▖▋▌▍▆▅▅▅▅▄▖▋▊▆▅▅▅▅▅▖▋▘▍▆▅▅▅▅▄▍▘▊▆▅▅▅▅▅▅▅▅▅▅▅▅▅▅▄▖⎺▆▗▆▅▅▅▅▄▖▝▋▆▅▅▅▅▄▄▖▆▋▆▅▅▅▅▅▄▖▆▌▆▅▅▅▅▅▖⎺▝▗▅▅▅▅▅▅▖▎⎻⎻▌▝▅
▄▅▂⎽╺▆▄▃▂▅▝▝▄▍▗▖▖▄▃▊▎▌▊▍▄▃▃▖▆▍▋▍▍▃▃▃▃▃▉▎▌▊▍▊▃▖▗▘▌▋▎▍▂▃▂▂▃▃▎▍▊▊▖▋▍▆▃▃▃▃▂▃▃▂▖▌▌▌▍▉▍▗▃▂▂▃▖▍▌▊┃▝▂▂⎽⎽▉▎▋▋▋▅▋▗⎽▋▊▎▍▋▍▂▗▅▖▌▋▎▊▌▍▊⎽▂⎽▍▋▎━▝▖▗▄
▃⎽▅▆▄▂▃╼▅▃▍▄▘▍▆▘▘⎺▆▊▎▌▊▍▖▘▆▘▂▍▋▍▎▅▅▅▅▅▊▎▌▋▍▝▆▅▆▍▌▋▗▍▄▅▆▅▅▅▎▍▊▊▋▌▅▃▃▃▄▄▄▆▄▃▝▝▄▌▎▖▍▝▅▅▅▅▘▍▗▊▊▌▆▅⎺⎺▉▎▖▋▋▂▝▖▘▎▊▎▎▋▍▍⎺▶⎺▖▋▗▊▌▍▆▆▅▆▆▋▎▍▗▅▃▃
▄▂▅▂▅▃▅▃▂▘▆▄▊▎━━━▂▃▋▂▝▋▌▅━▃▃▅▂▂▗▎▅▅▂▂▃▋▂▌▌▍▅━▂▂▄▍▝▗▍╸▘▂▂▃▅▍▂▃●▅━▂▂▂▂▂▂▂▂⎽⎽⎽▂▃▍▊▖▝╸▂▂▂▂▗▎▗▗▲▄▂▂▂▂▗▎▖▌▶▅▄▂▂▂▊▊▎▘▘▅─▂▂▂▋▗▃▘▌▄▂⎽▂▂▘▍▂▄▅▅▂
▆▅▄▄▆▄⎽▅■▄▂⎺▆▝▅▄▄▄▄▄▄▃▄▄▄▄▄▄▄▄▃▃▄▃▃▃▃▃▃▃━▃▃▃▃▃▃▃▄▃▃▄▃▃▂▄▃▃▃━▃▄▄▄▄▄▄▄▃▃▄▄▄▄▄▄▄▄▄▃▃▃▃▄▃▄▃▄▝▃▃▃▃▃▃▂▂▂▃▂▄▄▄▄▄▄▄▃▃▃▄▄▄▄▄▄▄▝▃▄▄▄▄▄▄▄▄▅▆▅▅▃▃
▃▃▄⎺▆▄▃▅▃▆▃▅▂⎽▅▂▗▃▂╺▄▝▄▝▘▝┗╍▃╲▗▂▼▅▅▗▆▅▅▄▃▘▆▅▄▆▶▃▆▆▄▂▄▖▄▆▃▅▃⎽▂▅▆▆▆╸▗▆▃▗▖╲▄■▄▘╲··▌▄▆┍■▗▗▄▍▆▆▆▃▆⎻⎺▆▄▃▃▂⎺▅▃▆▄⎽▅▅▄▂▃⎽▂▝▖▍◼▖▅━▆⎺▅▄╾▄▂▂▝▗┯▃■
▚▄▆▅▅▆▼▅▄⎺▅▃▅■▄▂▃▝▄▃▆▃▊▚▋▃▗▂▃▲▂▄▌▗▖▚▖▄▄╲▃▍▆▃▗▅⎽▚▆▄▅▆▆▄▆▃▂▆▄▂▅▂⎽▚▖▘▅▂━▋■▃▘⎺▘▃╸▂▗▶▄▘⎺╺▝┱▆▅┍▅┗▚┻▅━⎺▝⎺▆▄▃▃▂⎺▅▂▅▃▂▃▅╲▅▄▂▖╲▃╸━▅▄▆▃▌▖⎺▄●▅▅▃▂
▃▃▃┷▆●▃╱▅▆▆▄▆▅▃▃▆▃⎽▝━▂▄▅⎽⎺▋▆▝⎺▖╇▼▝▃▎▝▃▖╺▂╺▍▝▝▅╺▖▄┇⎽▂▃▚▝▅▂▅▂▆▆▃▆▃▂▄▃▖⎽▗▂▅▂╏⎺▝▘▗▘╸▝▅┗▄▅▃▆▄▂╺▝▄▝⎼▂▅▋⎽▄▂▆▅▃▄▂▆▆▄▂▄▖▃▆▅▃▂⎺▆▄▄⎽▮▅╺⎽┑▝▗⎻┣⎺▃▆
▂▄⎺▃▃╼┑┒▎▊▍▅▅▅▃▅▅▃▂▅▂▄━▄▅▖▌▗▃▆▄⎺▅┙▗▝▆▃▆▄▃▂▖▂▅▝▃▆⎽▃┤▅▄▗▂▃▅▆▄⎺▄⎽⎺▅▂▅▃⎽┛⎺▆▝╸⎽▌⎺▃▅╺▂⎽▃╺▆▅▂▚▅▂▃▄▃▄▄▝▃⎽▎▆▎▃▄⎺▆▃▃▄⎽⎺▆▃⎽▅▖╺▄▖▃▂▃▄▅▃━▆▅▂▂▂┻▄▄▂
▆▃▆▂━▝▖▖▅╾▄▂▃▆▆▄▃▅▂▆▃■▃⎽▄┓╴┓▅▄▝▄▄▃▂▚▅▆▃▄╼▝◀●⎺▄▚▅▘▝▅▮◀⎽▅■▂⎽▝⎺▅▃▆▃⎽▆▄▂▄▂▘▖▝▌▃▝▌▘╶▊╺╼┳━▄━▮⎼▅▂▂▃━▄▃▂▌▝▂▃▗▂▘⎼▅⎺▅▃▄▃▂⎺▅▂▆▄▂▂◀⎼⎽▗▝▄▗⎺▆▅▂▄▖╾▅
▄▄╾▼▍▄┲▅■▄▖▖▲▅▋▝▆▅▃⎺▃·▆▃▅▂▂■╸━▖⎺▃▂▘▄╾▃▝▄■▆▖▄▖▖▝▄▋▝▃▄▗▄▄┎▆╺▝▃▄▮▆▄▂▅▂▅▅▃▆▃▂▚▃⎺▃▝▂▄▄⎺┏▄▖⎼⎺━⎼▅▃▖▆▄▂▃▆▖▄▅▂▋▍┗⎺▄▃▂▆▄▂▃▂▅⎺▄▂▃▖▖▃╺▘▗▄▄▂▘▅▃▂▼▃
▄▅▄┷╾▃▝▃▆▅▅▄▝▗▄▃▌⎺▃▆▄▃▆▂▄▅▂▄▂▖⎽▂▅▃▃▅▄▝━▼▆▚▃▖▖╲▂▗━▅▘▖▃┺▅▍▖╸▆▄⎺▖▆╸▝▄▃▆▃▂▆▄▂▅▂▗▃▄▄▅─▝▘●⎺▅▖▃━▃▍▖▂▝▂▄▝▂▗▖▂▂▆▆━╸▅⎺▼▆╾▆▄▄▃▃⎺▆▄⎽▃▂▄▃▂╺▆╸╼▆▄▗▘
╸━▃▘▆╸▼▄▃▘▖▶▆▆▂▝╸▆▄▃▆▃▝▄⎺▅▂●▄▅▂▂▖▂■▂▃▖●╸▖▂▆▄▃▖▃┑▋▂▂▅▃■╸▅▗┗▅▍╾⎼◀▝▍▝■▆▅▂▃▂⎺▆▃■▄▂▂▂▂▃╸▗▃·▘╴╺▅⎽⎼▗▖▋▂▅▄┛━▘■●▄▌▆▅━▂╺╺▝▂⎺▅▃▄▂⎽⎺▆▃⎽▄▖▄▄▄▃▃▃▄▃
╸▖╾╸▅┺━▖┲╺▝▖▄▆▄▄▅▖╲▄▄▅▆▃▆▆▃▆▃⎽▆━▄▂▖▅▘╾▍▆▅▅▃▋▝▚▅▂▖▄▖▖▅▚▄▅┗▗▍▖╺▆╺▄▘▌╴▄▼▝▆▄▂▃▝▆▅▃▆▃⎽▝▃▃▘⎺▅▃▂▚╾▆▝▃▖╾▄▖◼━▃▅▆▝▄▝━·▼▗▂▄▗┓▆▂▆▄▃▃▂◼⎺▅▂▅▃▆▅▅▅▅▅
▅⎺▆▝╸▼⎺▄▄┗▅▄▂▄▃╺▗▅▄▅▅▄▃▂▆▅▆▆▄▂▅▂▄▄▅▃▂╺▂▘▝⎽▝▅▍╼▖▗▝▄▄▂▆▄┲▅▚▃▄■▘▘⎺▖╺▅▄▆▅▚▖▅▅▅▄▄▃▅▄▃▂▅▂▅▆┷▊╲╏▝━▚╸▃▆▄▅⎺▆▃⎻╸▃┗▖▗▖▘▅┵▎▗▃╺▄▂▖▄▝▆▄▅▃▂▌▆▄▂▄▃▮▄▅
▆▂▅▄▗▆▃━▼━▂━▝▆▄⎺▃▂▅▅▄▂⎺▝▅▄⎺▝▄▖▆▄▆▄▂▅▆▄▂▃━⎺◀▎┠▍▗▅▗▂▅▄▚▄▆▄┑▆▂▄━▃▃▃▂▄▃▃━⎽▖⎺▄▝▂▆▅▃▄▂⎺▅▃▆▄▂▆▆▆┎▄▗⎺▄╼┻▍▍━╺■▎╺▗▅▖▗▘╸▗▆▗▂▅━▆▎▃▆▗▅▝▅▃▄▂▖⎺▆▄▂▄▖
▆▂▆▄⎻▖▅▖╸▖▅▖╺▅▍▂▅▃▅▝▄▂▝▂▃╲▂▃▝▝▄▆▆▃▂▅▃▆▄▆▃⎽▖▂┕▘▂▄▃▆■▖▃▗▖▂■▝■▃▝▂▝▗▘▅▃┒━⎺▃┳▝▌▝▃╸▂▆▄▃▃▂⎺▅▂▅▃⎽▍⎼▂⎻▼▚▅▅▂━▝━⎺▖▄⎽▖▂▋━┗⎺▖▖▃▄━■▅▆▅▗▆▝⎺▆▄▃▄▂▅⎺▆▅
╲⎽▄▚▖▂⎽▅▃▗▃▄━▅▘▅▃▲▘▄▅▝▅▂▝▅▃▃⎻⎽━▅▝▃▄▅▃⎺▄▂▆▃▄▂▍▅▍▅▅▘╸▅╲▃▅▃▂▅▂▅▃┗▝◆▅▄▚▖▄⎺▂▖⎽▄▖▚▃▃▊▅▆▅▃▃▃⎺▆▄⎽▄▂⎽▝▃▃▚▃⎺╱·┕▅━▘▆▝▘▚▂▆▃▄▍▂▂▗▘▄▗▘▄■▅▌▘▋▝▅▄▅▃▘▘
▃▂▂▝▆▄⎽▆⎽▅▖⎽╺▆▘▘▂▅▅▅▖▃▃▃▂▄▼▆▖■▗▘╸▝▝▝▅▌▄▂▅▃▖▅▆▄▂▝┷▝▃▃⎺▍▖▗▝▚▖⎺▆▆▶▆▖▃■▌◼▆▃■▋▃▂▅▝■▗▃■▖▄⎺▄▂▄▂⎺▅▃▆▃▂▆▅▃▚▘╲▄▃▗▃▂▖▘▗⎽━▄▘▆╺▄▂▆▝┗▝⎽◀╺▅━◼▗▃▂▗▘▅▅
▅▂▄▂▂╾▃▂▂▅▄▅▘▌▏▆▄▂⎺▃▅▃╱▌▗▆▖▆▄▂▃▄┑▗▂▄▆▃▆▄▅▄⎺▄▂▆▃▅▃⎽▝·╾┣▝▍▌▘━▆▃▂▂╸▼■▅▝╲▖▖■▃▃⎺▃▗▃▗▅▆▝▘▂▅▃▅▄▃▃▂▆▄▂▅▃▂●▆▄▖▃▘▆▄▝▅▗▆╸■▃▘▗▗▂⎼╸▃▖╸▄▄▖▗▄▅▗▗▘▄■⎼

Checking the Look in Text Browsers

It even looks not that bad in elinks — as far as I know the only text browser which supports CSS and styles:

In Lynx and Links 2, the text composing the image is displayed only in black and white, but you at least can recognise the edges in the picture:

Same Functionality in One Tool?

I knew there was a tool which did this in one step. Seems to have been png2html.

Tried to play around with it, too, but neither really understood how to use it (seems to require a text file for the characters to be used — why?) nor did I really got it working. It always ran until I aborted it and it never filled the target file with any content.

Additionally, png2html insists on one character per pixel, requiring to first properly resize the image before converting to HTML.

The Keyboard in the Pictures

Oh, and btw., the displayed keyboard is my Zlant. The Zlant is a 40% uniform staggered mechanical keyboard. Currently, only Zlant PCBs are available at 1UP Keyboards (USA), i.e. no complete kits.

It is shown with the SA Vilebloom key cap set, currently available at MechSupply (UK).