Això no és una imatge
El que veus és una fotografia reproduïda amb una sola propietat CSS: box-shadow. Un script de Node.js llegeix la imatge píxel a píxel, i cada color es converteix en l'ombra d'un div de 1x1. El resultat és un fitxer CSS de milers de línies que pinta la foto sencera sense cap imatge. Un format nou? Potser. Útil? Gens. Però els efectes que en surten no els pots aconseguir amb cap JPG del món.
Un experiment on vam convertir una fotografia real en codi CSS pur, píxel a píxel, i vam descobrir que la propietat box-shadow amaga un motor de dibuix complet. No és pràctic, però obre la porta a efectes visuals que cap format d'imatge convencional pot oferir.
- Node.js + Jimp: lectura píxel a píxel i conversió automàtica a box-shadow CSS
- Quatre variables (distància, blur, spread, origen) que transformen la foto de realista a abstracta
- Un fitxer CSS de diversos megabytes per pintar una foto: el format d'imatge menys eficient de la història
La idea
Mira la imatge de sota. Ara, intenta fer-hi clic dret i guardar-la. No pots. Perquè no és una imatge: és l'ombra d'un sol píxel.
L'experiment parteix d'una pregunta absurda: es pot reproduir una fotografia sencera utilitzant únicament la propietat box-shadow de CSS? La resposta és sí. I el resultat és una sola línia de codi CSS amb desenes de milers d'ombres, cadascuna representant un píxel de la foto original.
Com funciona
L'eina és un script de Node.js que utilitza una llibreria anomenada Jimp per llegir una imatge píxel a píxel. Per cada píxel, extreu el color (vermell, verd, blau i transparència) i el converteix en una ombra CSS posicionada exactament on li toca.
El punt de partida és un div de 1x1 píxel. Un sol punt a la pantalla. A partir d'aquí, l'script genera una propietat box-shadow amb tantes ombres com píxels té la imatge. Cada ombra porta el color exacte del píxel original i es col·loca a la seva coordenada.
El resultat és un fitxer CSS amb una sola classe i una sola propietat. Tècnicament, és una imatge codificada en codi. Un "nou format d'imatge", si vols ser generós amb la definició.
Les quatre variables que ho canvien tot
Aquí és on l'experiment es posa interessant. L'script té quatre paràmetres que transformen completament el resultat visual. Modificant-los, la mateixa foto pot anar de la reproducció fidel a l'abstracció total.
Distància entre píxels
Controla la separació horitzontal i vertical entre cada ombra. Amb valor 1, la imatge es reconstrueix fidel a l'original. Si augmentes la distància, apareixen graelles, mosaics i trames visibles.
Difuminat
Aplica desenfocament a cada ombra individual. A zero, la imatge és nítida píxel a píxel. Si puges el valor, la foto es transforma en una versió borrosa, com un record vist a través d'un vidre.
Expansió
Controla la mida de cada ombra. Amb expansió baixa i distància alta, obtens punts de color flotant sobre fons negre, com una constel·lació.
Punt d'origen
L'script pot generar les ombres des del centre, des de qualsevol cantonada o des d'un punt arbitrari. Canviar l'origen canvia com es "desplega" la imatge visualment, com si l'obrissis des d'un punt diferent.
L'efecte cortina
Combinant distància vertical mínima amb distància horitzontal alta (o a l'inrevés), s'obtenen efectes de línies que recorden una persiana veneciana o les cordes d'una arpa. Amb la imatge de sota, el mateix píxel que genera la foto genera barres verticals deixant entreveure la imatge original.
I quan la densitat de línies és molt alta, la imatge quasi desapareix, com vista a través d'una reixeta metàl·lica.
El pes del "nou format"
Cal ser honestos: el CSS resultant és enorme. Una imatge de 400x266 píxels (la meitat de la resolució original) genera un fitxer CSS de diversos megabytes. Per al navegador, renderitzar desenes de milers d'ombres és costós i es nota.
Això no és un format per substituir el JPG. Ni de lluny. Però la gràcia és que el que perds en eficiència ho guanyes en control creatiu. Cada ombra és un element CSS independent, cosa que vol dir que pots animar-les amb transicions, canviar-ne els colors, aplicar-hi filtres, crear seqüències. Coses que amb una imatge normal simplement no pots fer.
Per a què serveix (i per a què no)
No serveix per a: carregar fotos en un web de producció, substituir formats d'imatge, ni res que requereixi que el navegador no pateixi.
Serveix per a: art generatiu, instal·lacions digitals, efectes visuals únics i explorar fins on arriba una propietat CSS que normalment fem servir per posar una ombreta suau sota un botó.
El codi complet és a GitHub per qui vulgui experimentar.
Un experiment que parteix d'una pregunta absurda i acaba revelant que
box-shadow, la propietat que fem servir per decorar botons, amaga un motor de dibuix complet. No és pràctic, però és d'aquelles coses que et fan entendre com funcionen les coses per dins.
