ALLONLINE STORIES · VOL. III · TRANSPARENCIA EXPLICADA
PNG
La transparencia se convirtió en información. Cómo un formato abierto convirtió alpha, filtros de scanline y compresión sin pérdida en una de las formas más fiables de transportar gráficos digitales.
Scroll para entrar en las capas
01 · POR QUÉ PNG
PNG no intenta adivinar qué puedes dejar de ver. Conserva lo que exportaste.
Nació en 1996 como una alternativa abierta para gráficos web y terminó ocupando un lugar muy concreto: interfaces, capturas, ilustraciones y assets donde los bordes, el color y la transparencia necesitan sobrevivir intactos.
ABIERTOPNGlossless · alpha · color
02 · ANATOMÍA
Un PNG es una secuencia de chunks con reglas muy claras.
La firma identifica el archivo. IHDR define sus propiedades esenciales. Uno o varios IDAT contienen los datos comprimidos. IEND cierra la estructura. Entre ellos pueden vivir paletas, perfiles de color, texto y otras piezas auxiliares.
PNG SIGNATURE
La firma de ocho bytes permite reconocer el archivo antes de interpretar ningún chunk.
03 · RGBA
La transparencia no es un efecto. Es información por píxel.
En truecolor con alpha, cada píxel puede almacenar rojo, verde, azul y un canal alpha independiente. Separarlos ayuda a entender por qué un PNG puede conservar bordes suaves sin pintar un fondo dentro de la imagen.
RGBA
4 canales activos · color completo + transparencia
04 · ALPHA COMPOSITING
El mismo píxel puede vivir sobre cualquier fondo.
Alpha describe cobertura u opacidad. El navegador mezcla el color del píxel con lo que existe detrás. Por eso un borde semitransparente puede verse natural sobre blanco, negro, color o una imagen.
PNG
05 · FILTROS
Antes de DEFLATE, PNG intenta volver cada scanline más predecible.
Cada fila puede usar None, Sub, Up, Average o Paeth. El filtro no elimina información: transforma temporalmente los valores para que aparezcan patrones y diferencias pequeñas que después comprimen mejor.
SUBguarda diferencias respecto al píxel anterior de la fila
06 · DEFLATE
Sin pérdida significa reconstruir exactamente los mismos valores.
Después del filtrado, PNG usa DEFLATE: combina búsqueda de secuencias repetidas con codificación estadística. El objetivo es describir los mismos datos con menos bits, no aproximarlos.
07 · PALETA VS TRUECOLOR
A veces 32 colores son más inteligentes que millones.
PNG puede almacenar color indexado mediante una paleta o color directo por píxel. Para iconos, pixel art y gráficos con pocos tonos, una paleta compacta puede reducir mucho el archivo sin convertirlo en lossy.
INDEXEDMuy eficiente para gráficos con color limitado
08 · ADAM7
Una imagen interlazada puede revelarse en siete pases.
Adam7 reparte los píxeles en siete mapas. Los primeros ofrecen una estructura muy dispersa; cada pase posterior rellena huecos hasta reconstruir la imagen completa. No cambia el resultado final, solo el orden en que llega.
Pase 1 / 7
09 · APNG
PNG también aprendió a moverse.
APNG añade múltiples frames, duración, blending y disposal al ecosistema PNG. Es útil cuando necesitas animación con transparencia, aunque en delivery web conviene comparar peso y soporte con WebP y otros formatos modernos.
FRAME 01 → 04
10 · COLOR Y METADATA
Un PNG puede transportar más contexto del que ves.
Chunks auxiliares pueden describir gamma, cromaticidades, perfiles ICC, intención sRGB y texto. Esa información puede mejorar consistencia entre aplicaciones, pero también añade bytes y complejidad que conviene conservar de forma deliberada.
11 · CUÁNDO USARLO
PNG gana cuando cada píxel importa. Pierde cuando cada byte importa más.
Interfaces, logos rasterizados, capturas, gráficos con texto y transparencia son territorio natural de PNG. Una fotografía grande suele comprimir mucho mejor con formatos diseñados para pérdida perceptual.
Texto, iconos y bordes duros permanecen nítidos porque la compresión no aproxima los píxeles.
Prioriza dimensiones correctas y compresión sin pérdida.12 · WORKFLOW
Optimizar PNG es elegir estructura antes de perseguir un número de KB.
Recorta dimensiones, decide si necesitas alpha, reduce paleta cuando sea apropiado, conserva solo la metadata útil y comprueba si WebP encaja mejor en el destino.
- 01Dimensiona al tamaño real de uso.
- 02Decide si necesitas alpha, truecolor o paleta.
- 03Optimiza filtros, paleta y metadata.
- 04Compara con WebP cuando el objetivo sea delivery web.
De la transparencia a la acción
Conserva cada píxel. Elimina solo lo que sobra.
Comprime PNG, comprueba alpha, extrae paletas o compara una salida WebP. Todas las herramientas funcionan directamente en tu navegador.
AllOnline Stories · Entender la transparencia cambia la forma de exportarla.