El Formato de Imagen PNG Explicado

En el vasto universo de los formatos de imagen digital, el formato PNG ocupa un lugar especial. Diseñado como una evolución y mejora respecto al antiguo formato GIF, PNG (Portable Network Graphics, o Gráficos de Red Portátiles) se ha consolidado como una opción fundamental para imágenes en la web y gráficos digitales que requieren fidelidad y características avanzadas, especialmente en lo referente a la transparencia.

Los Orígenes y Propósito del PNG

El formato PNG nació en respuesta a las limitaciones y problemas de patentes asociados al formato GIF. Su objetivo principal fue proporcionar un formato de imagen de mapa de bits que utilizara un algoritmo de compresión sin pérdida, lo que significa que la imagen puede comprimirse y descomprimirse sin perder calidad ni detalles. Al no estar sujeto a patentes, se convirtió rápidamente en una alternativa libre y abierta para la comunidad digital.

Las imágenes en formato PNG son fácilmente identificables por la extensión de archivo .png y cuentan con un tipo MIME específico: image/png, aprobado oficialmente el 14 de octubre de 1996.

Estructura Técnica: Firma y Segmentos

Técnicamente, cada archivo PNG comienza con una firma de 8 bytes que sirve para identificar el archivo como PNG y ayudar a detectar posibles problemas de transmisión o interpretación. Estos bytes tienen valores hexadecimales específicos (89 50 4E 47 0D 0A 1A 0A) y decimales (137 80 78 71 13 10 26 10), cada uno con una función particular, como la detección de sistemas que no soportan datos de 8 bits o la identificación legible de "PNG" en un editor de texto, así como la detección de conversiones de final de línea entre sistemas operativos.

Después de esta firma inicial, el archivo PNG se compone de una serie de segmentos o "chunks". Cada segmento contiene información específica sobre la imagen. Esta estructura modular es clave porque permite que el formato sea extensible; los programas pueden ignorar segmentos que no entienden si estos están marcados como auxiliares, manteniendo la compatibilidad con versiones futuras o extensiones del formato.

Cada sección tiene una cabecera que indica su tamaño y tipo, seguida de los datos y un checksum para verificar la integridad. Los nombres de los segmentos son de 4 letras sensibles a mayúsculas y minúsculas, lo que proporciona información adicional a los decodificadores:

• La primera letra (mayúscula/minúscula) indica si el segmento es esencial (crítico) o auxiliar. Un decodificador debe entender los segmentos esenciales; si encuentra uno que no reconoce, debe abortar la lectura. Los auxiliares pueden ser ignorados.
• La segunda letra (mayúscula/minúscula) indica si el segmento es público (estandarizado) o privado (no estandarizado).
• La tercera letra siempre es mayúscula y está reservada.
• La cuarta letra (mayúscula/minúscula) indica si es seguro copiar el segmento en caso de no ser reconocido, dependiendo de si se han modificado segmentos críticos.

Segmentos Esenciales (Críticos)

Estos segmentos son fundamentales para la correcta visualización de la imagen y deben ser entendidos por cualquier decodificador PNG:

• IHDR: El primer segmento. Contiene la cabecera con información básica como dimensiones, profundidad de color, etc.
• PLTE: Contiene la paleta de colores para imágenes indexadas.
• IDAT: Contiene los datos de píxeles comprimidos de la imagen. Puede haber múltiples segmentos IDAT para facilitar la generación de imágenes en streaming, aunque esto incrementa ligeramente el tamaño del archivo.
• IEND: El último segmento. Marca el final del archivo PNG.

Segmentos de Metadatos (Auxiliares)

Estos segmentos almacenan información adicional sobre la imagen, pero no son estrictamente necesarios para su renderización básica. Incluyen:

• bKGD: Color de fondo predeterminado.
• cHRM: Balance de blanco.
• gAMA: Especifica el valor gamma.
• hIST: Histograma de colores.
• iCCP: Perfil de color ICC (soporte para sistemas de gestión de color como sRGB).
• iTXt: Texto en formato UTF-8 (comprimido o no).
• pHYs: Dimensiones físicas del píxel o relación de aspecto.
• sBIT: Indica la precisión de los colores.
• sPLT: Paleta sugerida (para reducir la paleta completa si es necesario).
• sRGB: Indica el uso del espacio de color sRGB estándar.
• tEXt: Texto en formato ISO 8859-1 (nombre=valor).
• tIME: Fecha y hora de la última modificación.
• tRNS: Información de transparencia. Para imágenes indexadas, especifica el canal alfa para entradas de la paleta. Para imágenes en color real o escala de grises, puede indicar un píxel de color específico que debe ser tratado como completamente transparente.
• zTXt: Texto comprimido (similar a tEXt).

La presencia de la primera letra en minúscula en estos nombres de segmento indica que no son obligatorios según la especificación PNG, y la última letra en minúscula asegura que es seguro copiarlos incluso si el programa que procesa el archivo no los comprende.

Profundidad de Color y Canales

Una de las grandes fortalezas de PNG es su flexibilidad en cuanto a la profundidad de color. Las imágenes pueden ser de paleta indexada (con un máximo de 256 colores) o estar compuestas por uno o varios canales. La profundidad de color total de una imagen PNG se deriva de la profundidad de bits por canal multiplicada por el número de canales presentes.

Los canales permitidos son:

• Escala de grises (1 canal).
• Escala de grises con canal alfa (2 canales).
• Color verdadero (RGB - Rojo, Verde, Azul, 3 canales).
• Color verdadero con canal alfa (RGBA - Rojo, Verde, Azul, Alfa, 4 canales).

Para imágenes indexadas, la paleta tiene un máximo de 256 entradas, con una profundidad de canal de 8 bits. Sin embargo, la paleta puede tener menos de 256 colores si la imagen no los utiliza todos.

La especificación PNG soporta varias profundidades de bits por canal (1, 2, 4, 8, 16 bits), dependiendo del tipo de imagen. La combinación de tipos de imagen y profundidades de bits por canal resulta en la profundidad de color total (bits por píxel), como se muestra en la siguiente tabla basada en la especificación:

Las celdas vacías (que en el texto original estaban marcadas en rojo) representan combinaciones que no están soportadas por el estándar PNG. Aunque el estándar requiere que los decodificadores puedan leer todos los formatos válidos, no todos los programas de edición de imágenes pueden generar archivos en todas estas combinaciones.

La Transparencia Avanzada con Canal Alfa

Uno de los avances más significativos de PNG respecto a GIF es su manejo de la transparencia. Mientras que GIF solo permite una transparencia binaria (un píxel es completamente transparente o completamente opaco), PNG introduce el concepto del canal alfa. Este canal adicional permite definir diferentes niveles de opacidad para cada píxel, lo que posibilita efectos de semitransparencia o translucidez, cruciales para superponer imágenes de forma suave o crear elementos gráficos complejos con bordes difuminados o sombras.

En imágenes indexadas, el canal alfa se puede añadir a las entradas de la paleta. El número de valores alfa almacenados puede ser menor que el total de entradas de la paleta, asumiendo que las entradas restantes son completamente opacas. Para imágenes en color real o escala de grises, se puede usar un canal alfa completo (por ejemplo, de 8 o 16 bits, ofreciendo 256 o 65536 niveles de transparencia, respectivamente) o simplemente designar un color específico como transparente.

Compresión Eficiente y Métodos de Filtrado

El formato PNG utiliza el algoritmo de compresión conocido como Deflate. Este es un algoritmo sin pérdida, lo que garantiza que la calidad de la imagen original se mantenga intacta después de la compresión y descompresión. Deflate es el mismo algoritmo utilizado en formatos populares como ZIP y Gzip.

Además de Deflate, PNG incorpora métodos de filtrado aplicados a los datos de la imagen antes de la compresión. Estos filtros intentan predecir el valor de cada píxel basándose en los píxeles vecinos y almacenan la diferencia entre el valor real y el predicho. Al reducir la variabilidad de los datos, se mejora la eficiencia de la compresión Deflate. La especificación 1.2 define cinco modos de predicción de píxeles (None, Sub, Up, Average y Paeth) que se pueden aplicar a cada línea de la imagen (scanline). El algoritmo de compresión puede elegir el método de filtrado óptimo para cada línea para maximizar la reducción del tamaño del archivo.

PNG y la Animación: Una Historia de Extensiones

A diferencia de su predecesor GIF, el formato PNG estándar no fue diseñado para soportar animación. Esto fue una limitación notable en sus primeros años en la web.

En un intento por añadir animación a la familia PNG, se desarrolló en 2001 el formato MNG (Multiple-image Network Graphic). MNG se basó en ideas de PNG, pero resultó ser un sistema más complejo y, crucialmente, no permitía la visualización de una sola imagen estática en visores que no soportaran la animación. Por esta razón, y porque GIF ya estaba firmemente establecido para animaciones simples, MNG no logró una amplia adopción.

Posteriormente, surgió APNG (Animated Portable Network Graphics), una extensión de PNG que sí soporta animación. APNG tiene la ventaja de ser compatible con versiones anteriores; si un decodificador no entiende la animación APNG, mostrará la primera imagen estática del archivo como un PNG normal. APNG ha ganado soporte en varios navegadores web, manteniendo la extensión de archivo .png.

Comparación Técnica: PNG vs. GIF y JPEG

Es útil comparar PNG con los otros dos formatos de imagen más comunes en la web para entender cuándo es la mejor opción.

PNG vs. GIF

PNG fue diseñado en gran medida para superar las deficiencias de GIF. Las principales diferencias son:

• Compresión: En la mayoría de los casos, PNG comprime mejor que GIF para el mismo tipo de imagen (indexada), aunque la eficacia puede depender de la implementación del software.
• Profundidad de Color: GIF está limitado a una paleta de 256 colores. PNG soporta color verdadero (millones de colores) y profundidades de bits por canal mayores, ofreciendo una gama de colores mucho más rica y precisa.
• Transparencia: GIF solo soporta transparencia binaria (completamente transparente o completamente opaco). PNG soporta transparencia avanzada mediante el canal alfa, permitiendo múltiples niveles de opacidad (semitransparencia).
• Animación: GIF soporta animación de forma nativa. El PNG estándar no; la animación requiere extensiones como APNG.

PNG es superior a GIF para imágenes estáticas que requieren alta fidelidad de color o transparencia variable. GIF sigue siendo popular para animaciones simples.

PNG vs. JPEG

PNG y JPEG están diseñados para propósitos diferentes:

• Compresión: PNG usa compresión sin pérdida, ideal para imágenes con áreas de color plano, texto o gráficos con bordes definidos (logos, iconos, diagramas). JPEG usa compresión con pérdida, que descarta parte de la información para lograr tamaños de archivo mucho más pequeños, ideal para fotografías e imágenes con muchas variaciones tonales y detalles sutiles.
• Transparencia: PNG soporta transparencia (incluido el canal alfa). JPEG no soporta transparencia en absoluto.
• Uso: PNG es excelente para gráficos web, capturas de pantalla, imágenes con texto. JPEG es el estándar para fotografías digitales donde una pequeña pérdida de calidad es aceptable a cambio de un archivo mucho más pequeño.
• Modos de Color: PNG no soporta el modo de color CMYK, lo que lo hace menos útil para trabajos de impresión profesional donde este modo es común. JPEG sí puede soportar CMYK.

En resumen, elige PNG cuando necesites fidelidad perfecta, gráficos con bordes nítidos o transparencia. Elige JPEG para reducir drásticamente el tamaño de archivo de fotografías.

La Adopción de PNG en la Web y Desafíos Históricos

A pesar de sus ventajas técnicas, la adopción de PNG en la web fue inicialmente lenta. Esto se debió en parte a comparaciones erróneas con GIF (ignorando las capacidades de color verdadero y transparencia avanzada de PNG) y a algunas desventajas técnicas históricas.

Uno de los problemas principales fue la compatibilidad con navegadores web antiguos (aunque estos entraron en desuso en la primera década del siglo XXI). Algunos navegadores presentaban problemas con la administración del color, aplicando valores de corrección gamma incluso cuando no estaban especificados, o mostrando errores de visualización.

Navegadores conocidos con problemas históricos incluían Internet Explorer 5.5 y 6, Netscape 7.0 a 7.2 y versiones antiguas de Opera (anteriores a la 7.50). Estos problemas podían hacer que los colores de las imágenes PNG no coincidieran con el esquema de color del resto de la página web.

Para mitigar estos problemas y asegurar la mejor visualización posible en ese momento, se desarrollaron utilidades que permitían recodificar o optimizar los archivos PNG, a menudo truncando ciertos atributos problemáticos o aplicando una compresión más agresiva sin pérdida. Ejemplos de estas herramientas incluyen PNGOUT, un programa de DOS para recomprimir PNGs al mínimo tamaño sin pérdida, Superpng, un plugin gratuito para Photoshop, y OptiPNG, otra utilidad gratuita para recomprimir PNGs de forma optimizada.

Hoy en día, con la obsolescencia de esos navegadores antiguos, los problemas de compatibilidad con PNG son mínimos, y el formato es ampliamente soportado y utilizado en la web moderna.

Preguntas Frecuentes sobre PNG

Aquí respondemos algunas dudas comunes sobre el formato PNG:

¿Qué significa exactamente la sigla PNG?

Significa Portable Network Graphics, que se traduce como Gráficos de Red Portátiles. Fue diseñado pensando en su uso y transferencia a través de redes, como Internet.

¿El formato PNG utiliza compresión? ¿Es con pérdida o sin pérdida?

Sí, PNG utiliza el algoritmo de compresión Deflate, que es un método sin pérdida. Esto asegura que la imagen descomprimida sea idéntica a la original antes de la compresión, sin degradación de calidad.

¿Cuál es la principal ventaja de PNG sobre GIF?

La principal ventaja de PNG sobre GIF es su soporte para color verdadero (millones de colores) y, especialmente, su manejo avanzado de la transparencia a través del canal alfa, que permite niveles de opacidad intermedios (semitransparencia), a diferencia de la transparencia binaria de GIF.

¿PNG es adecuado para fotografías?

PNG puede almacenar fotografías con perfecta fidelidad (al ser sin pérdida), pero los archivos resultantes suelen ser mucho más grandes que los JPEG para la misma imagen, especialmente si la fotografía tiene muchos detalles y variaciones de color. Por lo tanto, PNG no es el formato más eficiente ni práctico para la distribución masiva de fotografías, aunque es excelente para capturas de pantalla o imágenes donde la calidad pixel a pixel es crítica.

¿Existe alguna forma de tener animación en PNG?

El formato PNG estándar no soporta animación. Sin embargo, existe una extensión llamada APNG (Animated Portable Network Graphics) que sí lo permite y es compatible con algunos navegadores web modernos. MNG fue otro intento anterior que no tuvo éxito.

¿Por qué a veces los colores de un PNG se veían mal en navegadores antiguos?

Esto se debía a problemas históricos de compatibilidad de algunos navegadores (principalmente versiones antiguas de Internet Explorer, Netscape y Opera) con la correcta interpretación de los metadatos de color o gamma incluidos en el archivo PNG. Utilidades de optimización ayudaban a mitigar estos problemas en su momento.

¿Qué son los "chunks" en un archivo PNG?

Los "chunks" o segmentos son bloques de datos dentro del archivo PNG que contienen información específica, como la cabecera de la imagen (IHDR), la paleta de colores (PLTE), los datos de los píxeles (IDAT) o metadatos (como tRNS para transparencia o tIME para la fecha). Esta estructura modular permite flexibilidad y extensibilidad del formato.

En conclusión, el formato PNG es una pieza fundamental en el panorama de las imágenes digitales, especialmente en la web. Su naturaleza sin pérdida, su avanzado manejo de la transparencia gracias al canal alfa y su estructura flexible basada en chunks lo convierten en la elección preferida para gráficos, iconos y cualquier imagen donde la calidad y la fidelidad pixel a pixel son primordiales, marcando una clara diferencia con formatos como GIF y complementando el uso de formatos como JPEG.

Si quieres conocer otros artículos parecidos a El Formato de Imagen PNG Explicado puedes visitar la categoría Automóviles.