El equipo de ingeniería de Layers logró reducir con éxito el tamaño del archivo de 103,802 puntos colocados a mano, pasando de unos masivos 175 MB de exportaciones de Illustrator a solo 82 KB. Esta optimización fue necesaria para asegurar que las ilustraciones complejas e interactivas pudieran renderizarse sin problemas en dispositivos de gama baja, sin saltos ni retrasos.

Una colección de 13 ilustraciones diferentes renderizadas a partir de puntos colocados a mano, que incluyen iconos de merchandising y categorías.
Las 13 ilustraciones de Layers renderizadas a partir de sus puntos colocados a mano, mostrando varios logotipos de productos e iconos de categorías.layers.engineering

Esta imagen ilustra el resultado final de los puntos colocados a mano utilizados en la interfaz de Layers.

Un gráfico de barras en escala logarítmica que compara los tamaños de archivo de las exportaciones SVG de Illustrator, las exportaciones Float32, el DOT2 sin comprimir y el DOT2 comprimido.
Un gráfico de barras en escala logarítmica que compara los tamaños de archivo de diferentes formatos de exportación, mostrando la reducción de 175 MB a 82 KB.layers.engineering

El gráfico visualiza la enorme reducción en la entrega de geometría lograda por el equipo de ingeniería.

Identificación de redundancia de datos

La obra original, creada por el diseñador de patrones Alberto Larizza, constaba de más de 100,000 puntos. Cuando se exportaron como SVGs, estos puntos se representaron como una mezcla de círculos, elipses y rutas, lo que resultó en una enorme cantidad de 175 MB de datos de origen.

El análisis de los datos reveló un patrón estructural significativo: debido a que el artista construyó los patrones fila por fila, entre el 78% y el 99% de los puntos compartían exactamente la misma coordenada Y. Por el contrario, las coordenadas X mantenían una alta entropía, con casi todos los valores siendo fraccionarios.

Un recorte de una ilustración de merchandising que muestra líneas tenues uniendo puntos en una fila, con tiras de datos que muestran deltas de y en cero.
Un análisis visual de los datos de los puntos que muestra que el 90% de los deltas de y son cero debido al flujo de trabajo del artista fila por fila.layers.engineering

Esta visualización explica el patrón estructural de los datos donde los puntos comparten la misma coordenada Y.

“Los planos hicieron la mayor parte, en realidad (más de la mitad). Una vez que es su propio flujo, Brotli verá miles de valores de fila repetidos en serie.”

— Shipping 103,802 Dots in 82 KB

El formato binario DOT2

Para reducir los datos, el equipo desarrolló 'DOT2', un formato binario personalizado. El proceso implica cuantizar las coordenadas a uint16, escalar los radios a uint8 y almacenar los valores como deltas desde el punto anterior. Crucialmente, los datos se almacenan en 'planos' —todos los deltas X, luego todos los deltas Y, luego todos los radios— en lugar de estar entrelazados.

Esta disposición planar permite que el algoritmo de compresión Brotli vea miles de valores de fila repetidos en un solo flujo. Si bien los deltas proporcionaron una pequeña ganancia, la organización planar representó más de la mitad de la reducción total de tamaño, llevando el tamaño final comprimido a 82 KB.

Un diagrama que muestra el diseño DOT2 para una ilustración de merchandising, desglosado en encabezado, deltas x, deltas y y radios.
La estructura del diseño DOT2, que muestra cómo se organizan los datos en planos para maximizar la eficiencia de la compresión Brotli.layers.engineering

Este diagrama ilustra la organización planar del formato binario personalizado.

Pasos de reducción de tamaño de ilustración: Fuente Float32 1.25 MB; Float32 + Brotli 224 KB; Quantized interleaved 227 KB; Quantized sorted interleaved 240 KB; Quantized sorted planar 83 KB; DOT2 82 KB
Pasos de reducción de tamaño de ilustraciónlayers.engineering

Gráfico elaborado por HN Digest a partir de cifras reportadas por layers.engineering; los valores se muestran como escritos en la fuente.

El formato es con pérdida, pero el equipo verificó que el error máximo de coordenada permanece por debajo de 0.011px y el error de radio es inferior a 0.0065px, lo cual es imperceptible para el usuario.

Optimizaciones de tiempo de ejecución y renderizado

Más allá de reducir el formato de transmisión, el equipo optimizó la forma en que el navegador maneja los puntos. Pasaron de un sistema basado en objetos —donde cada punto era un objeto JavaScript con once campos— a diez arrays tipados planos (Float64Array). Esto garantiza que los cálculos de física de resort permanezcan idénticos bit a bit al prototipo original.

El equipo también renovó el renderizado de la cuadrícula de fondo. El bucle antiguo visitaba cada celda de la cuadrícula en cada fotograma; el nuevo bucle solo visita las celdas activas y el cuadro delimitador específico del cursor del usuario. Este cambio permite que la página deje de solicitar fotogramas de animación por completo cuando la cuadrícula está inactiva.