Antes de ponernos a añadir imágenes cómo locos a nuestras páginas tenemos que hablar de tres temas cruciales. El "formato", el "tamaño" (o peso) y la resolución de las imágenes.
Respecto al formato
Cómo casi todo en informática, hay miles de formatos posibles en los que podemos guardar nuestras imágenes, dependiendo de la finalidad para la que vayamos a utilizarlas. No es lo mismo una imagen para un cartel de una valla publicitaria que ocupa 7 metros que un gráfico para una web que ocupa 20 centímetros. No todos los formatos se pueden utilizar en web.
Actualmente hay tres que se pueden utilizar:
Archivos Gif, (Graphic Interchange Format) adecuados para imágenes planas, dibujos. Admite fondos transparentes y animaciones.
Archivos .jpg: (Joint Photographic Experts Group) Adecuados para fotografías, dibujos complicados y todas aquellas imágenes que contengan sutiles cambios de color.
PNG (Portable Network Graphic), dicen que es el formato del futuro, fue desarrollado por Macromedia. Un png es mucho más pesado cualquiera de los dos formatos anteriores y no todos los navegadores lo soportan.
Resolución y tamaño
Al crear páginas en HTML es básico vigilar el tamaño de los fichero de imagen que incluimos en ellas. Cuantas más imágenes tenga un documento más tardará en cargar. Dado que el tiempo medio que un usuario medio está dispuesto a esperar no supera los 10 segundos, hay que vigilar cuidadosamente el tamaño de las imágenes.
La resolución es el numero de puntos por pulgada, cuantos más puntos por pulgada mayor será el tamaño del archivo resultante, normalmente en web se utiliza una resolución de 72pp.
Hoy día aplicaciones como photoshop de Adobe o Fireworks de Macromedia te dicen no sólo la resolución y el tamaño de la imagen sino también el tiempo de tardaría en cargarse en una web con los diferentes tipos de conexión.
Recuerda: NO TODO EL MUNDO TIENE BANDA ANCHA!.
CÓMO SE INCLUYE UNA IMAGEN EN UN DOCUMENTO
Para incluir una imagen se utiliza la etiqueta <img> con el atributo <src> img indica al navegador que se trata de una imagen y el atributo src le dice dónde está.
Supongamos que queremos incluir la imagen que tenemos archivada como tomita.gif
NOTA: En esta sección vamos a trabajar todo el rato con imágenes que estén guardadas en la misma carpeta que el archivo html en el que se ven. Al final veremos como incluir imágenes que están en otras carpetas.
|
Código: |
|
<img src="discovinillo.jpg" / > |
NOTA: img es otra de esas etiquetas que no tienen etiqueta de cierre por lo que utilizamos el espacio / para cerrar la etiqueta dentro de la propia etiqueta de apertura.
|
Código: |
|
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es">
<head>
<title>Disco de Vinillo</title>
</head>
<body>
<h1>Obsoleto formato musical: disco de vinilo</h1>
<img src="discovinillo.jpg" />
</body>
</html> |
Ahora bien esta información es un poco pobre, nos falta definir el tamaño de la imagen y un texto alternativo.
DEFINIR EL TAMAÑO DE LA IMAGEN
Aunque haya sido una práctica habitual no tomarse la molestia de hacerlo, los navegadores cargan mucho antes el texto que las imágenes (porque "pesa" menos y la información llega antes). Así en una página con gráficos y texto, mientras llegan las imágenes va pintando el texto y cuando tiene toda la información de la imagen la incorpora.
-
Si hemos definido previamente el tamaño de la imagen, el navegador sabe exactamente cuánto va a ocupar la imagen por lo que le reserva el espacio correspondiente al pintar el texto.
-
Asi mientras la imagen se carga, el texto se coloca en su sitio dejando espacio a la imagen.
-
Si no hemos definido previamente el tamaño de la imagen, el navegador no sabe cuanto espacio va a ocupar, así que no le reserva sitio y pinta el texto tranquilamente.
-
Cuando termina de recibir la imagen, MUEVE EL TEXTO para hacerle sitio a la imagen, lo cual produce un efecto sumamente desagradable a las personas que estén leyendo la información.
Visto esto, vamos a ver cuanto mide nuestra imagen y a incorporarlo en nuestro código:
|
Código: |
|
<img src="discovinillo.jpg" width="259" height="50" /> |
Podéis ver el alto y el ancho de cualquier imagen, pulsando sobre ella con el botón derecho del navegador y seleccionando el menú propiedades. En este menú verás exactamente dónde está, su tamaño y su "peso".
DEFINIR UN TEXTO ALTERNATIVO
Cómo su nombre indica el texto alternativo es un texto que aparece además de la imagen y en más de una ocasión en su lugar. Ya hemos dicho que las imágenes tardan más en cargar que el texto, si hemos definido bien nuestra imagen, mientras llega toda la información, el usuario verá el texto con un espacio reservado para la imagen y el texto descriptivo.
Pero además , muchas personas no pueden ver gráficos: bien porque sus navegadores no se lo permiten, bien porque padecen discapacidades visuales, bien porque no quieren. Para ellos es fundamental la información escrita sobre el gráfico.
Para las personas que sí disponen de gráficos cuando se pasa el ratón por encima de la imagen sale un cartelito con el texto definido lo que nos permite añadir información adicional sobre nuestra imagen.
Nuestra etiqueta quedaría ahora así:
|
Código: |
|
<img src="discovinillo.jpg" width="259" height="50" alt="Acueducto de Segovia. Casa Pepe está enfrente!" /> |
Pero podría suceder que nuestra imagen, no fuera un mero elemento decorativo, sino que fuera por ejemplo un gráfico representando el balance general de la empresa.
Sí sólo ofrecemos esta información mediante la imagen, todas aquellas personas que por una razón u otra no puedan ver imágenes, perderán toda esa información. En este caso tenemos dos opciones:
a) Ofrecer la misma información en la página explicando el gráfico cuidadosamente
b) Evitar la repetición utilizando el atributo longdesc
El atributo longdesc
Longdesc en inglés es Long description es una descripción en modo texto específicamente diririgida a navegadores especiales sin capacidad gráfica (lectores de pantalla, navegadores Braille…). Nos permite extendernos en nuestra descripción de forma muy detallada.
Supongamos, por ejemplo, que incluimos un gráfico que representa el balance de la empresa. Todas aquellas personas que no puedan ver gráficos por alguna razón perderían completamente esa información. Ahí es donde entra el atributo longdesc
|
Código: |
|
<img src="balance.gif" width="259" height="50" alt="Casa Pepe, Balance Año 200" longdesc="Este año ha sido magnífico para la empresa habiendo conseguido cumplir todos los objetivos y bla bla bla bla. Este año ha sido magnífico para la empresa habiendo conseguido cumplir todos los objetivos y bla bla bla bla. Este año ha sido magnífico para la empresa habiendo conseguido cumplir todos los objetivos y bla bla bla bla. Este año ha sido magnífico para la empresa habiendo conseguido cumplir todos los objetivos y bla bla bla bla." /> |
ALINEACIÓN DE IMÁGENES
La alineación de imágenes mediante HTML ya no se recomienda y debería hacerse con CSS. Pero dado que os lo encontraréis más de una vez, hay que saber cómo se hace.
Para alinear la imagen a la izquierda del documento y que el texto la rodee se utiliza el atributo align="left". Para alinear la imagen a la derecha del documento y que el texto la rodee se utiliza el atributo align="right"
ESPACIADO DE IMÁGENES
El espaciado de imágenes mediante HTML ya no se recomienda y debería hacerse con CSS. Pero dado que os lo encontraréis más de una vez, hay que saber cómo se hace.
Esto del espaciado sirve para añadir alrededor de la imagen un poco de espacio vacio, de forma que el texto no se pegue a la imagen: Vspace = vertical space Hspace = horizontal space.
NOTA: De momento, nuestras imágenes nos quedarán un poco feas pero mejorarán en cuanto aprendamos un poco de CSS.
¿CÓMO SE INSERTAN IMÁGENES QUE ESTÁN EN UN DIRECTORIO DISTINTO QUE EL DOCUMENTO HTML EN EL QUE QUIERO MOSTRARLAS?
Siempre podrías poner la dirección completa, <img src="http://www.midominio/eldirectorio/discovinillo.jpg"> pero esta solución tiene el inconveniente de que cambias de dominio, tus imágenes dejarán de funcionar.
Aquí tenemos nuestras carpetas y vemos como insertaríamos las imágenes dependiendo de su ubicación.
El documento y la imagen están en la misma carpeta:
|
Código: |
|
<img src="discovinillo.jpg"> |
El documento está en la carpeta a y la imagen está en la carpeta b
|
Código: |
|
<img src="b/discovinillo.jpg"> |
El documento está en la carpeta b y la imagen está en la carpeta a
|
Código: |
|
<img src="../discovinillo.jpg"> |
El documento está en la carpeta e y la imagen está en la carpeta a
|
Código: |
|
<img src="../discovinillo.jpg"> |
El documento está en la carpeta i y la imagen está en la carpeta a
|
Código: |
|
<img src="../../imagen.gif"> |
El documento está en la carpeta a y la imagen está en la carpeta i
|
Código: |
|
<img src="b/g/i/imagen.gif"> |
