Tutoriales de multimedia - Imágenes GIF

GIF es uno de los principales formatos de imágenes utilizados en la Web.

Este artículo detalla las características y técnicas de uso de las imágenes GIF.

Comprender los formatos de imágenes

Tanto HTML como XHTML no especifican un formato oficial para las imágenes. Sin embargo, los navegadores populares han especificado ciertos formatos de imágenes: generalmente GIF y JPEG. La mayoría de los formatos multimedia no necesitan aplicaciones auxiliares especiales, y cada usuario de navegador debe obtener, instalar y operar correctamente estas aplicaciones para poder ver o escuchar estos archivos especiales. Por lo tanto, no es de extrañar que GIF y JPEG se hayan convertido en estándares reales en la Web.

Antes de que apareciera la Web, estos dos formatos de imágenes ya se habían utilizado ampliamente, por lo que hay una gran cantidad de software de apoyo que nos ayuda a crear imágenes en estos dos formatos. Sin embargo, cada uno de estos formatos tiene sus propias ventajas y desventajas, y algunos navegadores utilizan sus características para lograr efectos de visualización especiales.

GIF

El formato GIF se refiere al formato de intercambio de imágenes (Graphics Interchange Format, GIF), que fue desarrollado originalmente por CompuServe para transmitir imágenes a sus usuarios de servicios en línea.

Características del formato GIF

El formato GIF tiene muchas características, por lo que es muy común en HTML/XHTML.

La segunda característica del formato GIF es que utiliza una técnica de compresión especial que puede reducir significativamente el tamaño del archivo de imagen, permitiendo una transferencia más rápida en la red. Además, la compresión GIF es de

Además, las imágenes GIF son muy fáciles de implementar efectos de animación.

Versiones y colores del formato GIF

A pesar de que todos los archivos de imágenes GIF utilizan .gif (o .GIF) como sufijo de nombre de archivo, realmente hay dos versiones de GIF: el original GIF87 y GIF89a, que admite muchas nuevas características, incluyendo fondo transparente, almacenamiento cruzado y animación, que son muy comunes en el uso de creadores web.

Los navegadores populares ahora admiten estos dos formatos GIF, que se mapean a una tabla de colores mediante el mismo esquema, lo que permite que cada imagen tenga hasta 256 colores.

La mayoría de las imágenes GIF tienen menos colores reales, y algunas herramientas especiales (como Macromedia Fireworks) pueden simplificar estos colores en imágenes más detalladas. Al simplificar los colores, se pueden crear imágenes de color más pequeñas y fortalecer la redundancia de los píxeles, lo que permite una mayor compresión del archivo y una velocidad de descarga más rápida.

Sin embargo, debido a la cantidad limitada de colores, las imágenes codificadas en GIF no siempre son aplicables, especialmente para imágenes con efectos fotográficos realistas. GIF se puede usar para crear iconos y gráficos con pocos colores y muy bonitos.

Incluso los creadores muy exigentes elegirán GIF

Debido a que la mayoría de los navegadores de gráficos admiten explícitamente el formato GIF, ahora es el formato de codificación de imágenes más aceptado en la web. Las imágenes en línea y las imágenes enlaces externos pueden usar este formato. Si tienes dudas sobre la elección del formato de imagen, usar GIF es una elección correcta. Funciona prácticamente en todas las circunstancias.

Técnicas de imágenes GIF

Las imágenes GIF tienen tres técnicas especiales: escaneo entrelazado (interlacing), transparencia (transparencia) y animación (animación).

Escaneo entrelazado

A través de la escaneo entrelazado, las imágenes GIF pueden aparecer en la pantalla de una vez, en lugar de mostrarse paso a paso de arriba hacia abajo. En general, las imágenes codificadas en GIF son una secuencia de datos de píxeles que se organizan en orden de arriba hacia abajo, fila por fila, desde la parte superior de la imagen hasta la inferior. Por lo tanto, las imágenes GIF comunes que se muestran en la pantalla parecen abrir una cortina de una vez, mientras que las imágenes GIF con escaneo entrelazado se parecen a enrollar una persiana. Esto se debe a que la secuencia de datos de píxeles se entrelaza cada 4 filas. El usuario solo necesita usar la cuarta parte del tiempo para descargar y mostrar toda la imagen, y puede ver una imagen completa de arriba hacia abajo, aunque sea borrosa. Esta imagen que solo ha completado una cuarta parte ya es suficientemente clara, por lo que los usuarios con conexión a internet más lenta pueden determinar si es necesario dedicar tiempo a descargar el resto de la imagen.

A pesar de que todos los navegadores gráficos pueden mostrar GIF de escaneo entrelazado, no todos los navegadores pueden mostrar el efecto de claridad gradual. Incluso aquellos navegadores que pueden lograr este efecto, los usuarios pueden elegir mostrar la imagen después de que se descarga y se decodifica completamente para suprimir este efecto. Los navegadores antiguos siempre muestran la imagen después de que se descarga y se decodifica completamente, por lo que no admiten este efecto.

Transparencia

Otra efecto común de las imágenes GIF (de hecho, de la imagen en formato GIF89a) es que permite que una parte de la imagen sea transparente, de modo que el contenido debajo de la imagen (generalmente el fondo de la ventana del navegador) se puede mostrar a través de la parte transparente. Las imágenes GIF transparentes utilizan un color específico en su mapeo de colores como color de fondo, permitiendo que el fondo de la ventana de visualización se vea a través. Al cortar cuidadosamente el tamaño de la imagen y elegir un color de fondo cercano a un color puro, las imágenes transparentes pueden hacerse parecer como si estuvieran completamente incrustadas en la página web o flotando sobre ella.

Las imágenes GIF transparentes son adecuadas para cualquier gráfico que desee integrarse en el documento pero no quiera parecer un cuadro. Los logotipos GIF transparentes son muy comunes, como íconos o símbolos impresos, etc. - cualquier imagen con una forma natural puede usar este efecto. También se pueden insertar imágenes en línea transparentes en texto tradicional para mostrar caracteres simbólicos especiales.

El problema de la transparencia en las imágenes GIF es que si se incluye dentro de un enlace ancla (<a>) sin quitar su borde o se lo encierra con un cuadro especial, se verá muy mal. Además, el contenido restante se mostrará alrededor del borde rectangular de la imagen, en lugar de cerca del borde opaco de la imagen. Este resultado es innecesariamente aislar la imagen o hacer que la página web se vea muy extraña.

Animación

La tercera característica única del formato de imagen GIF89a es que puede lograr animaciones de cuadro a cuadro simple. Al utilizar un software especial de animación GIF, se puede colocar una serie de imágenes GIF en un solo archivo GIF89a. El navegador mostrará sucesivamente cada imagen del archivo, como esos libretos de animación que solíamos jugar (incluso dibujar) de niños, que crean efectos de animación mediante la rápida翻页. En el archivo GIF, cada imagen tiene una sección de control especial que se puede usar para configurar el número de veces que el navegador muestra toda la secuencia (en bucle), el tiempo de pausa entre dos imágenes, y si se debe borrar el espacio de imagen de fondo antes de mostrar la siguiente imagen, etc. Al combinar estas características con las características habituales del GIF (incluidas la tabla de colores individual, la transparencia, el escaneo interlíneo, etc.), se pueden crear imágenes muy atractivas y muy detalladas.

Otra razón importante por la que los GIF animados tienen un efecto poderoso es que no es necesario escribir programas específicos para documentos HTML para obtener efectos de animación. Pero también tiene un gran defecto: se limita a gráficos muy pequeños como los iconos o a gráficos que ocupan una muy estrecha franja en la ventana del navegador: incluso si se es muy cauteloso y no se repiten partes estáticas en unidades de animación continuas, las animaciones GIF son muy fáciles de volverse grandes. Por lo tanto, si el documento contiene múltiples animaciones, el tiempo de descarga de estas imágenes puede resultar muy desagradable para el usuario. Si hay alguna característica que merece ser tratada con mucho cuidado para evitar su abuso, esa es la animación GIF.

Resumen

Las animaciones GIF simples tienen un efecto poderoso por otra razón importante: no es necesario escribir programas específicos para documentos HTML para obtener efectos de animación. Pero también tiene un gran defecto, es que se limita a gráficos muy pequeños como los iconos o a gráficos que ocupan una muy estrecha franja en la ventana del navegador: incluso si se es muy cauteloso y no se repiten partes estáticas en unidades de animación continuas, las animaciones GIF son muy fáciles de volverse grandes. Por lo tanto, si el documento contiene múltiples animaciones, el tiempo de descarga de estas imágenes puede resultar muy desagradable para el usuario. Si hay alguna característica que merece ser tratada con mucho cuidado para evitar su abuso, esa es la animación GIF.