Tutoriales de multimedia - Uso de imágenes en la Web

Este artículo detalla en qué condiciones se deben usar imágenes y texto, cómo acelerar la descarga de imágenes y elegir el formato de imagen adecuado.

Cuándo usar imágenes

Para la mayoría de las imágenes, una imagen puede valer más que mil palabras. Sin embargo, hay que tener en cuenta que nadie presta atención a los que hablan mucho. Primero y más importante, es necesario que los gráficos del documento se utilicen como herramientas visuales y no como decoración sin razón. Deben apoyar el contenido del texto y ayudar a los lectores a navegar por el documento. El uso de imágenes puede hacer que el contenido del documento sea más claro y puede añadir comentarios o ejemplos. Las fotos, gráficos, curvas, mapas y dibujos que apoyan el contenido son opciones muy naturales y adecuadas. Por ejemplo, las fotos de productos son componentes muy importantes de catálogos en línea y guías de compra. Además, los iconos y símbolos impresos con función de enlace, incluidas las imágenes con efectos de animación, pueden ser muy efectivos como guías visuales para el contenido o recursos externos. Si alguna imagen no cumple con alguna de las funciones anteriores, debería desecharse!

Al considerar la adición de imágenes a un documento, otro factor importante a considerar es el retraso en la recuperación que conlleva la transmisión a través de la red, especialmente a través de una conexión de módem. Un documento común puede contener hasta 10-15 kilobytes, mientras que una imagen puede alcanzar fácilmente varios cientos de kilobytes. Además, el tiempo total de descarga de un documento no es solo la suma de todas sus partes, sino también el retraso causado por la carga de la red.

Basado en la velocidad de conexión (es decir, el ancho de banda,bandwidthNormalmente se expresa en bps o b/s y puede ralentizar la velocidad de conexión, para descargar un documento único que contiene una imagen de 100 KB, es posible que tenga que hacerlo a la una o dos de la mañana, cuando la mayoría de las personas duermen, utilizando un módem de 57.6 Kbps que tarda aproximadamente 15 segundos en completar la descarga, o puede que en el mediodía utilice un módem de 9600 bps y tarde más de 10 minutos en descargar. ¿Has recibido esta imagen?

Por supuesto, el uso de imágenes y otros medios multimedia impulsará a los proveedores de servicios de Internet a buscar formas más rápidas, mejores y más robustas para proporcionar contenido web. Pronto, las conexiones de调制解调ador de 56 Kbps se retirarán de la historia como los caballos y los carros (al igual que los调制解调adores de 9600 bps), y serán reemplazados por nuevas tecnologías como los módems por cable y ADSL. En realidad, la mayoría de las conexiones pronto superarán los 1Mbps de velocidad.

Con la disminución de los precios, el uso de la red está aumentando constantemente, lo que lleva a problemas de congestión. Si está intentando acceder a un servidor que está funcionando a toda velocidad, no importa cuán rápida sea su conexión a la red, no podrá accederse normalmente.

Cuándo usar texto

El texto no está obsoleto. Para algunos usuarios, el texto es la única parte de su documento que puede accederse. Recomendamos que, en la mayoría de los casos, el documento pueda ser accesible para cualquier persona, incluidos aquellos que no pueden ver las imágenes o aquellos que han desactivado la función de descarga automática de imágenes del navegador para mejorar el rendimiento de la conexión a Internet. Aunque el deseo de agregar imágenes al documento puede ser muy fuerte, a veces, un documento de texto puro tiene más sentido.

Los documentos convertidos de otros formatos a páginas Web rara vez contienen imágenes incrustadas, mientras que las referencias y otros contenidos serios suelen estar disponibles en forma de texto puro.

En momentos en que la velocidad de acceso es muy importante, debe crear documentos de texto puro. Si sabe que los usuarios pueden competir por obtener su documento, debe evitar usar imágenes en el documento para adaptarse a las necesidades de estos usuarios. En ciertos casos extremos, podría proporcionar una página de inicio (página de guía) para que los usuarios tengan la oportunidad de elegir entre dos copias de su obra: una que contiene imágenes y otra que no (los navegadores populares tienen iconos especiales de imágenes para dejar espacio para las imágenes que se deben descargar, y estos marcadores podrían arruinar la disposición del documento, incluso convertirse en algo que no se puede leer).

Si desea que su documento pueda ser fácilmente encontrado por los muchos servicios de indexación en la Web, el texto es la forma más adecuada - solo admite imágenes, sin decoraciones ni gráficos innecesarios. Sin embargo, estos motores de búsqueda suelen ignorar la existencia de las imágenes. Si el contenido principal de la página se proporciona a través de imágenes, la información sobre su documento en el catálogo en línea Web será muy escasa.

Acelerar la velocidad de descarga de las imágenes

Además de seleccionar cuidadosamente el contenido que se debe incluir en el documento, hay muchos métodos para mejorar los problemas de carga y retraso que traen las imágenes:

Mantener la simplicidad

Un gráfico de 24 bits a color completo ocupará la mayor parte del ancho de banda de la red, incluso después de reducir su tamaño mediante la compresión digital estándar (por ejemplo, GIF o JPEG). Por lo tanto, es mejor utilizar diversas herramientas de gestión de imágenes para optimizar el tamaño de las imágenes y reducir el número de píxeles de colores al mínimo. Simplifique su dibujo, evite usar fotos de paisajes y evite áreas de fondo en blanco grandes, así como bordes innecesarios y otros elementos que ocupan espacio. Además, evite el uso de efectos de deslumbramiento (mezclar dos colores cercanos para obtener un tercero), ya que esta técnica reducirá enormemente la compresibilidad de la imagen. En su lugar, utilice colores uniformes en grandes áreas, ya que se pueden comprimir fácilmente en formatos como GIF o JPEG.

Reutilizar imágenes

Esto es especialmente aplicable a iconos y animaciones GIF. La mayoría de los navegadores almacenan en la memoria local los componentes del documento introducidos, lo que permite una recuperación de datos más rápida y utiliza menos conexiones de red. Para archivos de animaciones GIF más pequeños, es recomendable preparar cada imagen consecutiva para actualizar solo las partes que han cambiado en la animación, en lugar de recargar toda la imagen (lo que también puede acelerar la visualización de la animación en sí).

Dividir documentos grandes

Este es un principio general para incluir imágenes. Muchos fragmentos pequeños de documentos se organizan utilizando enlaces de hipertexto (¡por supuesto, se utiliza!) y un directorio efectivo, lo que permite a los usuarios sentirse más cómodos con comparación con documentos grandes. En general, las personas prefieren navegar entre varias páginas en lugar de perder tiempo esperando que se descargue un gran documento (lo que se asemeja a la síndrome de navegación de canales de televisión). Una buena experiencia es mantener cada documento con un tamaño de aproximadamente 50 KB, de modo que incluso si el lector utiliza la conexión más lenta, no se sentirá abrumado.

Aislar gráficos grandes cuando sea necesario

Proporcionar un enlace específico para imágenes muy grandes, que podría ser una miniatura de la imagen, permitiendo al lector decidir si desea descargar la imagen completa y cuándo hacerlo. Además, dado que estas imágenes no se mezclan con otros elementos del documento como las imágenes en línea, son fáciles de identificar y almacenar localmente para su uso futuro de investigación.

Especificar el tamaño de la imagen

Finalmente, otra forma de mejorar el rendimiento es incluir la altura y anchura del borde rectangular de la imagen en su etiqueta. Al especificar estas dimensiones, se pueden omitir algunos pasos adicionales, y los navegadores con funcionalidades extendidas no necesitarán realizar pasos adicionales para descargar, verificar y calcular el tamaño de la imagen en el documento. Sin embargo, esta práctica tiene un inconveniente. Si el usuario desactiva la función de descarga automática de imágenes, el navegador aún mostrará el espacio reservado para la imagen con las dimensiones especificadas. Esto suele dejar un marco vacío para el lector, aunque aún no hay una solución para este problema, aún recomendamos que utilice estas propiedades de dimensiones, ya que promovemos cualquier comportamiento que pueda mejorar el rendimiento de la red.

JPEG o GIF?

Si la fuente de las imágenes o su software de herramientas prefiere un formato en particular, es posible que solo pueda usar una de las imágenes JPEG o GIF. Ahora, ambos formatos tienen un amplio soporte en los navegadores, por lo que no existe problema de que los usuarios puedan visualizarlos.

Sin embargo, aún recomendamos que utilice herramientas específicas para crear o convertir estos formatos para aprovechar al máximo sus funciones respectivas. Por ejemplo, se puede aplicar la transparencia de GIF a iconos y símbolos decorativos pequeños. Y utilizar JPEG para comprimir imágenes de gran tamaño y rica en colores, para acelerar la velocidad de descarga.

Etiqueta <img>

La etiqueta <img> permite referenciar o insertar imágenes en el flujo actual del documento. Para obtener más detalles sobre esta etiqueta, consulte: