© 1996, etsimo WWW team

Haga click aquí para acceder a los sitios espejo


GIF Animation on the WWW
[Overview] [Gallery] [Software Toolbox]


Conservación del tamaño de página
Haciendo GIFs pequeños

Salvar un bit...

El que se agote el ancho de banda de la página es por hablar demasiado. Si tienes alguna cosa interesante que decir, la gente no lo piensa. Incluso si lo que dices no tiene demasiada importancia, probablemente te puedas entretener. Sin embargo es intolerable hablar demasiado y no decir nada consecuente.

QEs el ancho de banda?

Siempre hay que ser consciente del ancho de banda. El ancho de banda se refiere a la cantidad de datos que puedes enviar por la línea telefónica. La media de usuarios está todavía usando un modem 14.4 . La mejor media es aproximadamente de 1.7 KB de datos por segundo del ancho de banda. Esto asume tener que resetear la conexión, estar conectado a un nivel de comprensión óptimo, sin ruidos telefónicos, el PC y modem debe ser capaz de guardar el porcentaje de datos que entran, tu acceso al proveedor (Netcom, UUNET, AOL, Compuserve, Prodigy) es capaz de guardar un alto porcentaje de transferencia y la fuente de los datos (algún lugar en la red internet) igualmente son capaces de ser alimentados por datos de afuera. Si éstos están ocupados el porcentaje de media transferido será más bajo.

Como de Grande Es un BIG?

La mayoría de la gente tiene problemas con esto ;-) Es cierto, es todo relativo. Sin embargo, usando la media del modem y las velocidades de acceso de los navegadores a las páginas nos dará una cota decente. Laura Lemay, en su muy recomendado libro Teach Yourself Web Publishing With HTML in 14 Days (Premier Edition) (Sams.net Publishing ISDN: 1-57521-014-2) sugiere que 1K por segundo es un buen medidor de páginas Web. Esta es una modesta medida como la mayoría de los sitios y el modem debería ser capaz de exceder esto. Inafortunadamente, han tenido un número de servicios, en diversos tiempos, esto demuestra como pueden obtenerse más bajas conexiones. Una página Web con un total de 30k de texto y gráficos tardará en ser visualizados unos 30 segundos. 100k=1 minutio 40 segundos. Yo pienso que es una buena medida para saber el estado de internet hoy. Muchos sitios y proveedores no se mantienen más allá de los niveles que encadenan la capacidad de 28.8 kbps (kbps=kilobits por segundo, donde ocho bits equivalen a un byte de datos) modems(3.4 kilobytes por segund). El servicio más popular y al mismo tiempo el más usado, puede llegar a relantizar las cosas. Por este mismo estandar, la página principal ha sido oscenamente larga sobre 200K. El principal título animado es 118K sólo. A lo mejor, mi página se carga en 114 segundos, por la medida aquí discutida, casi dos minutos. Sin embargo, el 500 por 135 animaciones juegan casi con 35 segundos en mí 486DX2-66. Esto fue reducido desde los 500k del proyecto original. Ito es un excelente ejemplo de animación diferencial o animación delta (se verá más adelante).

Tiempo Mínimo para Cargar las Páginas Web
en Segundos por Velocidad de Modem(baudios)

PAGE
SIZE
2400
baud
9600
baud
14400
baud
28800
baud
ISDN
(64k)
ISDN
(128k)
1k 3.4 0.9 0.6 0.3 0.1 0.1
5k 17.1 4.3 2.8 1.4 0.6 0.3
10k 34.1 8.5 5.7 2.8 1.3 0.6
20k 68.3 17.1 11.4 5.7 2.5 1.3
30k 102.4 25.6 17.1 8.5 3.8 1.9
40k 136.5 34.1 22.8 11.4 5.0 2.5
50k 170.7 42.7 28.4 14.2 6.3 3.1
75k 256.0 64.0 42.7 21.3 9.4 4.7
100k 341.3 85.3 56.9 28.4 12.5 6.3
125k 426.7 106.7 71.1 35.6 15.6 7.8
150k 512.0 128.0 85.3 42.7 18.8 9.4
175k 597.3 149.3 99.6 49.8 21.9 10.9
200k 682.7 170.7 113.8 56.9 25.0 12.5
300k 1024.0 256.0 170.7 85.3 37.5 18.8
400k 1365.3 341.3 227.6 113.8 50.0 25.0
500k 1706.7 426.7 284.4 142.2 62.5 31.3
1 Mb 3495.3 873.8 582.5 291.3 128.0 64.0
2 Mb 6990.5 1747.6 1165.1 582.5 256.0 128.0

Esta tabla muestra el mejor rendimiento para datos comprimidos. La comprensión puede incrementar el rendimiento sobre estos números, pero GIF y JPG han sido ya comprimidos, asi que no se puede contar con ellos. La mayoría de la gente estará de acuerdo con una página en el bajo rango de treinta segundos. En los30 a 90 segundos deberías estar seguro de que la página tenga inmediatamente algo que ofrecer mientras carga la mayor parte. Empezamos aplicando técnicas para reducir el tamaño de las imagenes, volver a usar imagenes cacheadas, y acelerando la visualización de la página. Usa JPGs con comprensión (por encima de 30 en una escala de trabajo de 255 ) en vez de GIFs. De 90 a 120 segundos está dinámico. Ojala hayaun montón de páginas que leer o todos estos graficos son extraordinarios. De 2 a 10 minutos tenemos que asumir tenemos algunas películas o descargas de sonido gigantes. Ello no puede interferir con todo el contenido. Si un usuario tiene que esperar dos minutos para ver la página, abandonan incluso antes de verla. Considerar la rotura de las páginas en trozos más pequeños, las menores cantidades y sonidos que nos ofrece el FTP mayor que otros. Para las areas de más de 10 minutos , se considera un HTML no formateado. PDF podría componer tu página más eficientemente. La animación de GIF no es siempre la mejor, usa un formato de video para imagenes más complejas. Las animaciones GIF pueden ser usadas como una previa muestra corrida de la película completa. Los primeros formatos AVI no tienen comprensión real alguna. Mira la más reciente comprensión de IV32, o usa mejor aún MPG. Ofrece grandes ficheros para FTP no como parte de la página. Los curiosos, tal como Netscape, crn programa separado para la descarga de f ficheros así en último término, el usuario puede continuar mirando en otros lugares. Avisar a los usuarios del tamaño y del tiempo.

Qué se puede Hacer?

El Internet está muy concurrido. Millones de páginas de entretenimento inusadas y de propia promoción están cambiando servidores y T1s. Hay un montón de pequeñas cosas que puedes hacer a la pequeña esquina de la página.

La Importancia de las Imagenes

Las imagenes varían entretenimientos a una función vital de una una página. De ti depende decidir cual de ellas aplicar. Recuerda, el ancho mundo de las redes usado paraser un lugar de TEXT, información, ideas, e intercambio. Mientras las principales corporaciones pinchan la red con obstentosos lugares para fijarse en lo más nuevo e marketing manía, ojala en un grato o entretenido camino. La imagen debería decir algo o proporcionar alguna función. Algunas imagenes dan un grato sentir a la página, es fantástico. Sin embargo, el diseño de la página nunca le quita sus funciones. Un texto dasado en menús trabaja más rápidamente y fácilmente que el mayor mapa de imagen hecho algún día.

Reusar Imagenes

Una vez que una image ha sido descargada por un curioso esto es almacenado en una memoria cache del PC. Si se llama a la imagen desde cualquier tra página(usando exactamente la misma dirección) la imagen será llamada instantáneamente desde el cache del disco, no recargada desde internet.Esto aumentará considerablemente la velocidad de las páginas. Usando la misma imagen también haces la página más consistente. Aparecen conexas. Volver a utilizar la imagen fuera de tu servidor repetidamente para conservar el ancho de banda.

Una trampa que posiblemente quieras usar es cambiar el tamaño de un GIF através de la altura y la anchura. Netscape 1.2 o mejor escalará un GIF para conformar al tamaño conjunto de los puntos en los atributos anchura y altura de un IMG. Podrías tomar un enorme gráfico cargado en una página y escalarlo para usarlo como un botón o icono. Las imagenes pequeñas pueden ser escaladas, pero no aumentará la resolución, así la imagen llega a ser en apariencia.

No es Problema cuanto Menor sea

Correcto, el tamaño no es problema!! Oh desde luego! Pero los problemas son más las funciones, el que hacer con ellas. Una imagen serí tan pequeña como pueda ser sin ser in&uacte;til o inconsistente con los visualizadores de la página. Si generas un GIF y es demasiado grande no se usan las etiquetas de la anchura y la altura para reducirlo. Un GIF grande reducido llevará un tiempo de carga grande. to reduce it. A big GIF squeezed down will still take a long time to load. Haz tu GIFs del amaño.

Imagenes Apropiadas

Las animaciones basadas en el GIF89a necesita la comprensión de LZW (un algorítmo propietario patentado por Unisys Corp.) Está comprensión es muy usada para la línea de arte dibujo por ordenado. Un rayo de luz trazado y las imagenes fotorealisticas no se comprimen bien con GIF y están mejor orientadas hacia JPG, PNG, y formatos de movimiento tal como MPeG, AVI, y QuickTime, y Shockwave/Director. Usando imagenes de tonos continuos complejas resultar pesado, lento de cargar GIFs. Posiblemente quieras considerar otro formato para estos tipos de animación.

Optimizando GIFs Animados

Para conservar el ancho de banda, puedes hacer que la imagen sea compacta y pequeña. Hay un par de areas de trabajo. Empecemos con las imagenes individuales.

Los GIF permiten permiten cualquier número de colores entre 2 y 256. Los mínimos colores, el mínimo de datos y los ficheros de graficos más pequeños. No todo el software te permitirá conjuntos de bits por pixels para GIFs o los colores de la paleta. Una pendiente gradual de rojos reducirá a 5 o 6 rojos disponibles en la paleta estandar. Pensando en ello como un pintor vago que no le gusta mezclar colores para coseguir el correcto. Cualquier color disponible en la paleta puede usarse. Algunos programas simplifican esto mejor que otros. Aprende cual de estos son los mejores.

Todos los programas que sigen te permiten obtener la profundidad del color de un pixel en un GIF. Entre corchetes al lado de cada nivel de color que se puede usar. Un asterisco indica el software que optimiza las paletas cuando se reduce. Una T indica el soporte de transparencia solamente o "89a" indica lleno o casi lleno conforme a 89a. Una E indica la imagen completa del editor. Una C las capacidades de conversión fuertes.

También, hay que tener cuidado con el editor que usas para editar tus GIFs. Muchos (y al menos el software especificamente transparente mencionado) grabará tus GIFs en formato GIF87a. Este es el formato más viejo. Si lo tienes transparente entonces, edita tus GIFs en uno de estos programas y perderás el color transparente y cualquier otra información del formato 89a (imagenes múltiples, comentarios, etc). Si tu editas una animación con muchos de estos programas perderás todo salvo el primer frame de la animación.

La siguiente optimación también tiene que hacerse con paletas.Los GIFs tienen una paleta global simple al comenzar el fichero. Esta paleta es la usada por todas las imagenes por defecto.Sin embargo, los GIFs tienen la capacidad de ser almacenados en una paleta local dentro de él con cada imagen.Las paletas de GIF usan 3 bytes por cada color. Esto es 768 bytes para 256 colores, 48 para 16 colores, y 6 para 2 colores.(Nota: Muchos programas software listan 2 GIFs de color como Blanco y Negro. Esto es incorrecto.Los dos GIF de color pueden usar cualquiera de los dos colores. Esto es una innecesaria limitación de los paquetes software para esos coloresque son blanco y negro solamente.) Así, unos 10 frames 256 color GIF podría usar unos simples 768 bytede la paleta global o 7,680 bytes de las paletas locales. Usar´s las paletas globales para todas las imagenes que sean posibles.

Como construir la animación que puede hacer una larga diferencia. Una gran ventaja de las animaciones GIF89a es la posibilidad de hacer "delta frames" con su propio desplazamiento. No pasa nada.... No usando cálculos o trigonotría no básico. Simplemente Delta se refiere a la diferencia. Piensa en una gran canción, usaremos esta:

A esta canción queremos añadir la siguiente letra en blanco:

Los GIF nos permite dar las coordenadas x, y (o arriba e izquierda) de cada frame subsecuente.Pondemos poner las letras en la posición dentro del GIF.Esto permite redibujar y transmitir las entradas a los GIF.Ocho frames de los cuadros de entrada serán sobre 16,000 bytes.Nuestra animación usando "delta" frames es solamente 3,759 bytes.

La animación resultante es más pequeña en tamaño, y puede ejecutarse más rápido. He añadido retrasos entre cada letra para parar la animación y que no se ejecute tan aprisa.Los programas de animación lo hacen por ti automáticamente.Si repetidamente exportas frames de un producto tal como CorelDrawn cada frame no será absolutamente igual. Ocurrirán las menores variaciones en pixels. Esto es porque la imagen está siendo rasterizada(convertida en una imagen de pixels). Algunas veces hacia arriba y otras hacia abajo.Consecuentemente, aunque no se altere una parte de la imagen, los colores de los pixels y movimientos pequeños ocurren. Algunas veces esto produce nieve en la pantalla de la TV. Los programas que detectan estas diferencias no reducen mucho estas animaciones My Guestbook animation tiene este problema. Pequeñas fluctuaciones en los margenes de las páginas fuerzan el cargar la imagen entera de nuevo y no solamente el pincel. Al menos que estes trabajando con productos que repetidamente producen imagenes iguales , poniendolas juntas serán más eficientes. El delta technique and extensions será explicado más adelante en el tutorial.

Volveremos a mencionar las imagenes previamente cargadas, usando la escala de atributos y múltiples veces de una animació simple en la página.Cada una de estas causas no adiccionales se cargan através de un modem.Para recurrir a imagenes simplemente hay que traerlas desde el disco. Encontrarás que muchas copias de una animación se mueve muy rápido, dando la posibilidad de hacer interesante mosaic animations.

Tan pronto como encuentre tras ideas para ahorrar ancho de banda, las añadiré aquí junto con las explicaciones detalladas en la sección de tutoriales.

Para más información sobre el ancho de banda, consultar la página Bandwidth Conservation Society

Ir al MENÚ en la parte superior de esta página

Previous Page Next Page