Las imágenes son mucho más impactantes y pueden transmitir un mensaje mejor y de una forma más clara y rápida que el texto.

Introducir gráficos en las páginas incrementa de una manera notable la presentación de las mismas, pero hay que tener en cuenta que mientras 1K de texto puede llenar toda la pantalla, este pequeño gráfico de la derecha ocupa 12Ks.

Incluya el atributo ALT="descripción" en todas las imágenes

Piense que no todas las personas poseen un navegador gráfico o que aún poseyéndolo, no tienen activada la opción de carga automática de imágenes. Para estar personas es de vital importancia que ponga una descripción de la imagen. Incluso los navegadores gráficos visualizan dicho texto hasta que la imagen es cargada.

Indicar tamaño de la imagen

Cuando cree un enlace a una imagen, es altamente recomendable que indique el tamaño de la imagen, también es de gran ayuda que cree un pequeño icono en el que se vea el contenido de la imagen. De esta manera:

Imágenes de fondo

Evite en lo posible usar imágenes de fondo en sus páginas Web, pero si desea usar imágenes de fondo elija unas que contengan poca información visual, de manera que el texto se pueda leer con facilidad. Cuando use imágenes de fondo use el formato JPEG con alta compresión, aunque la pérdida de calidad es notable, tenga en cuenta que al ser una imagen de fondo, la persona no presta prácticamente ninguna atención a la imagen. Otra recomendación de utilidad es elegir un color de fondo que se asemeje al color de la imagen de fondo, así mientras esta todavía se está cargando la imagen se puede leer el texto con comodidad

Limite el uso de gráficos meramente decorativos

Recuerde que los gráficos tardan en cargarse o que el usuario puede tener la opción de carga automática de gráficos desactivada. Si usa de manera indiscriminada gráficos decorativos, su página puede parecer extraña y confusa si no se visualizan dichos gráficos.

Limite el tamaño total de todas las imágenes

El tiempo que tarda la página en cargarse completamente es de gran importancia, recuerde que el usuario no va a esperar mas de 15 segundos a que la página termine de cargarse.

Use los atributos HEIGHT y WIDTH cuando inserte una imagen en la página

Esto produce que el navegador sepa el tamaño de la imagen antes de que empiece a cargarla, lo que le permite reservar espacio en la página. De esta manera la página se dibuja con los espacios vacíos que serán rellenados con las imágenes cuando estas se carguen. Con lo que se consigue que la página se visualice completa antes, sin tener que esperar a la carga de las imágenes.

Use la misma imagen tantas veces como le sea posible

De esta manera aprovecha la característica que disponen la mayoría de navegadores de almacenar en la caché las imágenes ya cargadas. Por consiguiente acelerará notablemente la carga de las páginas.

Formatos gráficos

Una misma imagen puede almacenarse en diferentes formatos. Los formatos más extendidos en Internet son GIF y JPEG (Joint Photographic Experts Group). La organización W3C recomienda el uso del formato PNG (Portable Network Graphic) para cubrir ciertas lagunas que dejan los otros formatos, dicho formato es de reciente aparición y todavía no es soportado por todos los navegadores.

GIF es el acrónimo de Graphic Image File Format. Fue desarrollado para el intercambio de imágenes en Compuserve y tiene como particularidad que el algoritmo de compresión es propietario, aunque se permite el uso a cualquier persona.

Las características de esto formato son:
•  Número de colores: 2, 4 , 8, 16, 32, 128 ó 256 de una paleta de 24 bits.
•  Compresión basada en el algoritmo de compresión LZW.
•  Formato de compresión sin pérdida.

Características añadidas en la versión 89a:
•  Carga progresiva.
•  Máscara de trasparencia de 1 bit.
•  Animación simple.

JPEG es el acrónimo de Joint Photographic Experts Group. Fue diseñado para la compresión de imágenes fotográficas, basándose en el hecho de que el ojo humano no es perfecto y no es capaz de captar toda la información que se puede almacenar el una imagen de 24 bits. El formato JPEG intenta eliminar la información que el ojo humano no es capaz de distinguir, por eso se dice que posee un formato de compresión con pérdida, porque elimina información.

Las características de este formato son:
•  Número de colores: 24 bits color o 8 bits B/N
•  Muy alto grado de compresión.
•  Formato de compresión con pérdida.
•  No permite trasparencia, ni canal alfa.
•  No permite animación.

Comparativa de formatos gráficos

Selección del formato. Uno de los grandes dilemas a la hora de incluir gráficos en sus páginas Web es elegir el formato adecuado para cada tipo de imagen, en esta sección vamos a intentar guiarle en la selección de este formato.

Imágenes fotográficas. Imágenes obtenidas a través de fotografías de personas o lugares. Para este tipo de imágenes el formato más recomendado es el JPEG porque consigue una gran compresión con una mínima perdida de calidad.

Imágenes renderizadas. Este tipo de imágenes son las obtenidas por un programa de generación de imágenes sintéticas mediante algún proceso de trazado de rayos o similar. Se caracterizan por degradados suaves y líneas muy bien definidas. Para este tipo de imágenes es recomendable usar el formato PNG. Tenga presente que el formato PNG es el más reciente y puede no estar soportado en todos los navegadores.

Imágenes sencillas. Para las imágenes sencillas con pocos colores y con formas muy delimitadas, el formato más recomendado es el GIF, ya que se puede adaptar al número de colores de una imagen. Con el paso del tiempo puede que el formato PNG desbanque al GIF ya que el primero es más avanzado, pero como su uso todavía no está muy extendido recomendamos el formato GIF.

Realice pruebas. Las recomendaciones dadas anteriormente no son indiscutibles, son recomendaciones basadas en la experiencia. Puede que para según que casos, no sean del todo acertadas, así que le recomendamos que pruebe a grabar las imágenes en distintos formatos y seleccione el que le parezca más adecuado.