Esto no es una imagen
Lo que ves es una fotografía reproducida con una sola propiedad CSS: box-shadow. Un script de Node.js lee la imagen píxel a píxel, y cada color se convierte en la sombra de un div de 1x1. El resultado es un fichero CSS de miles de líneas que pinta la foto entera sin ninguna imagen. ¿Un formato nuevo? Quizás. ¿Útil? Nada. Pero los efectos que salen no los puedes conseguir con ningún JPG del mundo.
Un experimento donde convertimos una fotografía real en código CSS puro, píxel a píxel, y descubrimos que la propiedad box-shadow esconde un motor de dibujo completo. No es práctico, pero abre la puerta a efectos visuales que ningún formato de imagen convencional puede ofrecer.
- Node.js + Jimp: lectura píxel a píxel y conversión automática a box-shadow CSS
- Cuatro variables (distancia, blur, spread, origen) que transforman la foto de realista a abstracta
- Un fichero CSS de varios megabytes para pintar una foto: el formato de imagen menos eficiente de la historia
La idea
Mira la imagen de abajo. Ahora, intenta hacer clic derecho y guardarla. No puedes. Porque no es una imagen: es la sombra de un solo píxel.
El experimento parte de una pregunta absurda: ¿se puede reproducir una fotografía entera utilizando únicamente la propiedad box-shadow de CSS? La respuesta es sí. Y el resultado es una sola línea de código CSS con decenas de miles de sombras, cada una representando un píxel de la foto original.
Cómo funciona
La herramienta es un script de Node.js que utiliza una librería llamada Jimp para leer una imagen píxel a píxel. Por cada píxel, extrae el color (rojo, verde, azul y transparencia) y lo convierte en una sombra CSS posicionada exactamente donde le toca.
El punto de partida es un div de 1x1 píxel. Un solo punto en la pantalla. A partir de ahí, el script genera una propiedad box-shadow con tantas sombras como píxeles tiene la imagen. Cada sombra lleva el color exacto del píxel original y se coloca en su coordenada.
El resultado es un fichero CSS con una sola clase y una sola propiedad. Técnicamente, es una imagen codificada en código. Un "nuevo formato de imagen", si quieres ser generoso con la definición.
Las cuatro variables que lo cambian todo
Aquí es donde el experimento se pone interesante. El script tiene cuatro parámetros que transforman completamente el resultado visual. Modificándolos, la misma foto puede ir de la reproducción fiel a la abstracción total.
Distancia entre píxeles
Controla la separación horizontal y vertical entre cada sombra. Con valor 1, la imagen se reconstruye fiel al original. Si aumentas la distancia, aparecen rejillas, mosaicos y tramas visibles.
Difuminado
Aplica desenfoque a cada sombra individual. A cero, la imagen es nítida píxel a píxel. Si subes el valor, la foto se transforma en una versión borrosa, como un recuerdo visto a través de un cristal.
Expansión
Controla el tamaño de cada sombra. Con expansión baja y distancia alta, obtienes puntos de color flotando sobre fondo negro, como una constelación.
Punto de origen
El script puede generar las sombras desde el centro, desde cualquier esquina o desde un punto arbitrario. Cambiar el origen cambia cómo se "despliega" la imagen visualmente, como si la abrieras desde un punto diferente.
El efecto cortina
Combinando distancia vertical mínima con distancia horizontal alta (o al revés), se obtienen efectos de líneas que recuerdan una persiana veneciana o las cuerdas de un arpa. En la imagen de abajo, el mismo píxel que genera la foto genera barras verticales dejando entrever la imagen original.
Y cuando la densidad de líneas es muy alta, la imagen casi desaparece, como vista a través de una rejilla metálica.
El peso del "nuevo formato"
Hay que ser honestos: el CSS resultante es enorme. Una imagen de 400x266 píxeles (la mitad de la resolución original) genera un fichero CSS de varios megabytes. Para el navegador, renderizar decenas de miles de sombras es costoso y se nota.
Esto no es un formato para sustituir al JPG. Ni de lejos. Pero la gracia es que lo que pierdes en eficiencia lo ganas en control creativo. Cada sombra es un elemento CSS independiente, lo que significa que puedes animarlas con transiciones, cambiarles los colores, aplicar filtros, crear secuencias. Cosas que con una imagen normal simplemente no puedes hacer.
Para qué sirve (y para qué no)
No sirve para: cargar fotos en un web de producción, sustituir formatos de imagen, ni nada que requiera que el navegador no sufra.
Sirve para: arte generativo, instalaciones digitales, efectos visuales únicos y explorar hasta dónde llega una propiedad CSS que normalmente usamos para poner una sombrita suave debajo de un botón.
El código completo está en GitHub para quien quiera experimentar.
Un experimento que parte de una pregunta absurda y acaba revelando que
box-shadow, la propiedad que usamos para decorar botones, esconde un motor de dibujo completo. No es práctico, pero es de esas cosas que te hacen entender cómo funcionan las cosas por dentro.
