Si bien no es muy útil en la Web moderna, GIF (formato de intercambio de gráficos) proporciona una introducción sólida a los conceptos centrales de la codificación de imágenes.
El GIF puede considerarse un wrapper de datos de imágenes. Tiene un viewport, en cierto orden, denominado "pantalla lógica", en el que se dibujan los marcos individuales de datos de imagen, similar a las capas de un documento de Photoshop. Así es como GIF admite su animación similar a un Flipbook: Se dibuja un solo marco en la pantalla lógica y, luego, se reemplaza por otro y, luego, por otro. Por supuesto, esta distinción no es importante cuando se trata de un GIF estático compuesto por un único fotograma dibujado en la pantalla lógica.
GIF usa un método de compresión de datos sin pérdida, una variante del algoritmo "Lempel–Ziv-Welch", si te interesa. Los detalles más finos sobre el funcionamiento de este algoritmo son más de lo que debemos explicar aquí, pero a un alto nivel: funciona de forma similar a un código JavaScript “sugónico”, en el que las strings repetidas de caracteres en todo el archivo se guardan en una especie de diccionario interno para que se pueda hacer referencia a ellos en lugar de repetirlos cada vez que aparezcan.
De acuerdo, el algoritmo no es tan simple como pintar por número. Vuelve a revisar la tabla de códigos de color generada para encontrar secuencias repetidas de colores de píxeles y crea una segunda tabla de códigos referidos. Sin embargo, en ningún momento se perderán los datos de imágenes, sino que solo se ordenarán y reorganizarán de una manera que se pueda leer sin cambiar fundamentalmente.
Si bien, técnicamente, GIF usa compresión sin pérdida, tiene una limitación importante que afecta gravemente la calidad de las imágenes: guardar una imagen como GIF siempre generará una menor fidelidad, a menos que la imagen ya use 256 colores o menos.
Cada marco dibujado en la pantalla lógica del GIF solo puede contener un máximo de 256 colores. GIF también admite la "transparencia del índice", donde un píxel transparente hará referencia al índice de un "color" transparente en la tabla de colores.
La práctica de reducir un rango de valores a un conjunto aproximado de valores de salida más pequeño se denomina cuantización, un término que verás mucho cuando aprendas sobre las codificaciones de imágenes. Los resultados de esta cuantización de paleta suelen ser obvios:
Para comprender mejor este proceso, piensa en la cuadrícula de imágenes de trama que pudiste recrear a partir de mi descripción.
Esta vez, agrega un poco más de detalle a la imagen original: algunos píxeles más, uno de los cuales es un tono de azul ligeramente más oscuro:
Al no tener ninguna compresión, por decirlo de algún modo, podrías describir esta cuadrícula de la siguiente manera:
La fila uno, la columna uno es #0000FF. La fila uno, la columna dos es #0000FF. La fila uno, la columna tres es #0000FF. La fila uno, la columna cuatro, es #FF0000. La fila dos, la columna uno, es #0000FF. La fila dos, la columna dos, es #000085. La fila dos, la columna tres, es #0000FF. La fila dos, la columna cuatro, es #FF0000.
Si usas algo similar a la indexación de colores y la compresión de datos sin pérdida de GIF, podrías describirlo de la siguiente manera:
A: #0000FF, B: #FF0000, C: #000085. La fila uno, las columnas uno a tres son A. La fila uno, la columna cuatro es la B. La fila dos, la columna uno es A. La fila dos, la columna dos, es C. La fila dos, la columna tres es A. La fila dos, la columna cuatro, es la B.
Esto logra condensar la descripción píxel por píxel en algunos lugares (“las columnas uno a tres son...”) y guarda algunos caracteres definiendo los colores repetidos en un diccionario, por orden, por adelantado. No hay cambios en la fidelidad visual. La información se comprimió sin pérdidas.
Sin embargo, como puedes ver, el único píxel azul oscuro tiene un gran impacto en el tamaño de nuestra codificación. Si me limitara a una paleta de colores cuantizada, podría reducirse mucho más:
A: #0000FF, B: #FF0000. La fila uno, las columnas uno a tres son A. La fila uno, la columna cuatro es la B. La fila dos, las columnas uno a tres, son A. La fila dos, la columna cuatro, es la B.
Lamentablemente, el resultado final de esos bytes guardados es que perdiste la perfección de píxeles.
Por supuesto, tú, el motor de renderización, no lo sabías: el detalle del píxel azul más oscuro quedó fuera de la codificación de mi imagen de origen. Renderizaste la imagen exactamente como la codificó, según nuestra comprensión compartida de los colores que tenemos a mano.
Ahora, en este ejemplo exagerado, reducir tres colores a dos marca una diferencia evidente en la calidad. En una imagen más grande y detallada, los efectos podrían no ser tan perceptibles, pero aún serían visibles.
Cuando se codifican como GIF, se ven moteados sutiles gradientes, como sombras, y los píxeles individuales se destacan del entorno:
En la práctica, la combinación de compresión sin pérdida y cuantización de paleta significa que el GIF no es muy útil en el desarrollo web moderno. La compresión sin pérdida no hace lo suficiente para reducir el tamaño de los archivos, y una paleta reducida implica una reducción evidente en la calidad.
En última instancia, GIF solo es un formato eficiente para codificar imágenes simples que ya usan paletas de colores limitadas, bordes rígidos en lugar de suavizado de contorno, y colores sólidos en lugar de gradientes; todos estos casos de uso son mucho más adecuados con otros formatos. El PNG más pequeño y con más características suele ser una mejor opción para las imágenes de trama, aunque ambos son muy inferiores a SVG en términos de tamaño de archivo y fidelidad visual para casos de uso como íconos o arte lineal, en los que se destaca el vector. El caso de uso moderno más frecuente para GIF es la animación, pero existen formatos de video modernos mucho más eficientes y accesibles para cumplir ese propósito.