Curso de Diseño Web V - Imágenes

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. En la primera entrada hablamos brevemente del funcionamiento de Internet y una pequeña introducción a HTML, en la segunda entrada hablamos sobre enlaces entre páginas, en la tercera hablamos de la metodología de trabajo cuando nos enfrentamos a un proyecto Web y en la cuarta sobre publicar nuestro proyecto Web en Internet. En esta entrada trataremos uno de los elementos más importantes, las imágenes

En primer lugar hay que entender como funciona la carga de de un archivo HTML con imágenes en un navegador. El navegador comienza con un lienzo en blanco que ha de pintar con las respuestas que le proporciona el servidor tal y como se muestra en la siguiente imagen:

El servidor manda el archivo HTML pedido, que el navegador comienza a pintar. El navegador examina el archivo recibido y se da cuenta que éste contiene imágenes. Al no disponer de estas imágenes todavía no puede pintarlas. Pide estas imágenes al servidor, como se muestra en la siguiente imagen. En HTML usamos para incluir imágenes el elemento img.

Conforme va recibiendo las imágenes, el navegador las muestra y continua pidiendo las restantes.

Es posible que no nos demos cuenta de este proceso porqué los navegadores más modernos realizan la petición de imágenes en paralelo y porqué en la actualidad disponemos de conexiónes a Internet bastante rápidas.

Como hemos visto en los gráficos anteriores las imágenes se cargan después de leer el HTML. Podemos usar los atributos width y height para ayudar al navegador a dibujar nuestra página al decirle que ancho y alto van a tener nuestras imágenes. Si no usamos estos atributos el navegador tiene que identificar ambos valores al recibir las imágenes. Siempre que podamos es bueno ayudar al navegador, para obtener una carga más rápida de nuestras páginas Web.

¿Qué tipo de imágenes podemos usar en Internet?

Podemos usar imágenes en formato JPEG, GIF y PNG. En la entrada ¿Cuál es la diferencia entre JPEG y GIF? discutíamos cuando usar un formato u otro.

¿Cómo mejorar la accesibilidad de las imágenes

A continuación se muestra un extracto de HTML que usa el atributo alt. Este atributo se usa para ofrecer un texto alternativo.

<img src="http://softamo.com/images/logo.gif" alt="Logotipo de la empresa Softamo"/>

• El atributo alt debe ser un texto corto que describa la imagen
• Si la imagen no se encuentra (fallo en el código, se ha movido a otro directorio), algunos navegadores, muestra este texto alternativo en su lugar.
• Los lectores de pantalla usan este texto alternativo para describir a los usuarios con minusvalías visuales lo que verían en pantalla.

¿Podemos crear enlaces a otras páginas por medio de imágenes?

Sí, de hecho es muy fácil crear enlaces por medio de imágenes. Para ello debes rodear el elemento imagen (img) con el elemento enlace (a), que presentábamos en la segunda entrada de este curso, tal y como se muestra a continuación.

<a href="http://brihuega.es"> <img src="miniaturas/escudo_de_brihuega.gif" /></a>

Resumen

• Use el elemento <img> para posicionar imágenes en su portal Web.
• Los navegadores tratan los elementos <img> de un modo algo diferente que el resto de los elementos. Después de mostrar el HTML de la página, el navegador obtiene cada imagen del servidor Web y la muestra.
• Si tiene más de una imagen grande en su página Web, puede hacer la página más usable y más rápida creando miniaturas - imágenes que el usuario puede pulsar para ver una versión más grande de la imagen.
• El atributo src es como especificas la localización de la imagen. Puede incluir las imágenes de su portal usando caminos relativos en el atributo src, o imágenes desde otros portales usando una URL.
• El atributo alt del elemento <img> es una descripción significativa. Es mostrada por algunos navegadores si la imagen no puede ser encontrada, y es usada por lectores de pantalla para describir la misma a las personas con minusvalías visuales.
• Un ancho de menos de 800 pixeles es una buena general para la imágenes de un portal Web. La mayoría de los imágenes creadas por cámaras digitales son demasiado grande para usarlas en páginas Web, así que hay que reducir su tamaño.
• Imágenes demasiado grandes para un navegador hace que los portales Web sean menos usables y más lentos para descargar y mostrar.
• Un pixel es el punto más pequeño que se puede representar en la pantalla. Cada imágenes está compuesta por miles de pixeles. Dependiendo del monitor, puede haber desde 72 pixeles por pulgada a 100 pixeles por pulgada.
• JPEG y GIF son dos formatos para imágenes que están soportados extensamente por todos los navegadores.
• El formato JPEG es más adecuado para fotografías y otras imágenes complejas.
• El formato GIF es más adecuado para logotipos y otras imágenes simples con colores sólidos, lineas y texto. Las imágenes JPEG se pueden comprimir en diferentes calidades. Debe escoger un balance entre calidad y tamaño de archivo según sus necesidades.
• El formato GIF permite tener imágenes con fondo transparente.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, Web Design