Dithering cu CSS: magia pixelilor revine în web

Vă amintiți cum pe calculatoarele cu 256 de culori imaginile arătau ca niște picturi abstracte? Dithering-ul era salvarea – amesteca pixelii pentru a imita nuanțe inexistente. Acum, cu ecrane Retina, pare că tehnica a murit. Dar nu, poate fi reînviată cu CSS, și nu e doar o joacă.

Dezvoltatorul Ikesau a găsit o metodă de a aplica dithering direct în browser, folosind filtre CSS și pseudoelemente. Ideea e simplă: peste imagine se adaugă un zgomot semitransparent, și gata – obții efectul unui monitor vechi. Dar trucul e că asta și ajută: dithering-ul reduce dimensiunea fișierului păstrând calitatea vizuală. Util mai ales pentru animații sau fundaluri, unde fiecare octet contează.

Desigur, poți spune: „De ce să mă complic, dacă am WebP?” În primul rând, e distractiv. În al doilea rând, dithering-ul CSS funcționează peste orice format și nu necesită recodificare. Și în al treilea rând, e o modalitate excelentă de a adăuga un farmec retro site-ului – clienții vor aprecia, dacă nu sunt designeri obsedați de gradienturi line.

Apropo, implementarea e surprinzător de simplă: câteva linii de CSS cu mix-blend-mode și background-image: repeating-radial-gradient. Fără Canvas, WebGL sau alte unelte grele. Adevărat, performanța pe mobil poate suferi, dar cui îi pasă de FPS când e vorba de nostalgie?

Comentariul echipei METABYTE: Dithering-ul e ca un prieten vechi care se dovedește util. Și nouă ne place să experimentăm cu CSS, dar de obicei ne limităm la gradienturi și umbre. Acum avem un motiv să impresionăm clientul cu un fundal „pixelat” în 5 minute. Important e să nu exagerăm, ca site-ul să nu arate ca Windows 95.