Involucionando por diversión 3 - Dither, que vuelvan los 80s

La semana pasada les dejé el sitio "txt" con las imágenes en SVG pero algo no me convencía. Es que el PoTrace deja una imagen en blanco y negro pero sin matices ¿Es posible hacer algo más retro todavía?

Pues sí, me acuerdo de mis viejas épocas en los inicios de la PC con gráficos, lograr que una foto se viera en un monitor monocromático requería de distintas técnicas y recordé el "dithering", el tema era encontrar una forma relativamente moderna de hacerlo en un sitio web.

El resultado final fue MUCHO más retro que el SVG, ahora está más cercano a lo que me gusta y el peso en bytes es menor usando PNG en blanco y negro, creo que le encontré la vuelta.

Al estilo antiguo: Dither

Aquellos usuarios de PCs de la primera generación, con monitores monocromáticos Hércules y, con suerte, un SimCGA, conocen bien el Dithering en las fotos. Era el truco que se usaba para poder mostrar una fotografía con apenas dos colores disponibles.

A diferencia de blanco y negro a secas el Dither permite convertir una foto a escala de grises a blanco y negro variando la densidad de los puntos negros en la nueva imagen.

Esto crea la ilusión de profundidad de color cuando se tiene una paleta limitada y no sólo en blanco y negro sino en color también. Un caso muy usual es el formato GIF.

En el GIF tenemos sólo 256 colores como máximo de paleta y ésta se puede reducir lo más posible para tratar de comprimir más y más. ¿Cómo se emulan los tonos? Con dither mezclando pixeles de la paleta para crear la ilusión de otro color intermedio.

En Wikipedia hay una linda explicación de todos los algoritmos usables y en mi caso necesitaba uno que alguien ya hubiese programado para PHP. Porque ¿Para qué programarlo uno si ya otro lo hizo?

Pues bien, no estaba fácil pero, con algo de suerte, dí con uno.

Dithering en el blog

En mi caso conseguí un pequeño algoritmo para hacer "Atkinson dither", hay muchos métodos para hacerlo. El método fue creadao por Bill Atkinson de Apple y es similar al Jarvis y al Sierra pero más rápido, no difunde todo el error de cuantización, sino solo tres cuartas partes. Tiende a conservar bien los detalles, pero las áreas muy claras y oscuras pueden aparecer apagadas.

Era suficiente para lo que quería ya que yo estaba usando un "Threshold" que era o blanco o negro y nada en el medio. 

El resultado pueden verlo aquí:

Y lo mas interesante de todo es que el tamaño que ocupa cada archivo es inferior al SVG todavía. No sólo mantiene la cantidad de pixeles del lienzo y la calidad sino que agrega más información reduciendo el tamaño. Mejor imposible!

Notas completas en Blanco y Negro

Esto me premitió ir más allá de la foto de portada y convertir TODAS las fotos de cada post. Así que ahora se puede ver todo como si estuviésemos navegando en un 1990 distópico donde Internet existía antes que los monitores color accesibles :D 

El resultado final me da no sólo la velocidad máxima que puede obtenerse con la mayor cantidad de información posible.

El sitio sigue manteniendo un puntaje de 100 en Pagespeed y en cualquier otra cosa que encuentre para testearlo, la portada del sitio pesa menos de de 310Kb, una maravilla, funciona perfecto en móviles y hasta en una Kindle se puede visualizar sin problemas. 

Dato: la Kindle misma hace Dithering de fotografías para tratar de mostrarlas en su pantalla, esto le resuelve todo el proceso.

Además arreglé los detalles de los Links de Viernes y las Ruletas Rusas para que puedan funcionar en esta ridícula versión para pobres :D 

Si te gustó esta nota podés...
Invitame un café en cafecito.app


Otros posts que podrían llegar a gustarte...

Comentarios

  • Tulio Serpio     11/04/2022 - 11:06:39

    Me encanta este post en la versión "retro": la imágen se ve igual de los dos lados de la línea

    • Fabio Baccaglioni     11/04/2022 - 11:08:54

      jaja si, lo vi, se lo toma bien en serio el dither y te lo aplica pero no afecta a la imagen que ya lo tiene

  • Cattel     11/04/2022 - 12:25:43

    Me hiciste acordar cómo nos voló la cabeza cuando pasamos a la escala de grises viniendo del SIMCGA, era como el 4K de la época.

    • Fabio Baccaglioni     11/04/2022 - 15:47:50

      fue toda una gloria, ver más de un tono fue un cambio radical en su momento

  • Thalskarth     11/04/2022 - 12:38:31

    No habrá un feed RSS directo a la versión TXT??

    • Fabio Baccaglioni     11/04/2022 - 15:47:16

      eeeeh, no, tanto no :D jajajaj, aunque podría , pero no

  • Sergio Vernis     11/04/2022 - 14:44:07

    Muy bueno el resultado!!

  • Andrezgz     11/04/2022 - 18:43:39

    Cada vez mejor! Vi que lograste resolver el tema de los avatares y los reemplazaste por ◒ https://unicode-table.com/en/25D2/

    Se ve que encontraste la regex apropiada - imagino que el gravatar_id es un string de caracteres hexa que podés matchear con +. Si en algún momento necesitás asistencia con regex, avisá nomás

    • Fabio Baccaglioni     11/04/2022 - 19:33:01

      ja, no, fue más cochino, como en los LDV nunca hay fotos adentro usé el regex que ya tenía para encontrar y reemplazar imágenes y la reemplacé por eso sólo en esa categoría de post

  • Andrezgz     11/04/2022 - 20:13:31 Revisado: 11/04/2022 - 20:20:17

    Recién veo que la regex que puse se ve en la edición, pero no se renderiza en HTML - se ve que toma los corchetes como "formato enriquecido :|

    Uso unos caracteres unicode raros para reemplazar los corchetes:
    ⟦a-f0-9⟧+

  • Jano     11/04/2022 - 20:36:18

    La tipografía tiene que ser monoespaciada o no es retro ?

    • Fabio Baccaglioni     12/04/2022 - 01:21:39

      eso no es retro, es viejazo, no es agradable en una pantalla que no tiene caracteres fijos, no me gusta el resultado con una monospace porque el blog nunca fue así, le puse Arial que es la primera tipografía que usé aquí hace 20 años :P

  • Hugo Fiorentini     11/04/2022 - 23:45:24

    Se usaba el dithering también para hacer banners de varias páginas de largo (con papel contínuo y la Epson LX80) y que parezca tonos de grises :D

  • Leandro     16/04/2022 - 21:20:50

    EXCELENTE!

  • Andres     22/04/2022 - 21:07:17

    Secundo la sugerencia del enlace RSS al sitio de texto

Deje su comentario:

Tranquilo, su email nunca será revelado.
La gente de bien tiene URL, no se olvide del http/https

Negrita Cursiva Imagen Enlace


Comentarios ofensivos o que no hagan al enriquecimiento del post serán borrados/editados por el administrador. Los comentarios son filtrados por ReCaptcha V3.