Las imágenes son uno de los elementos más importantes de las páginas web. De hecho, prácticamente todas las páginas web contienen alguna imagen y la mayoría incluyen decenas de imágenes. Dentro de las imágenes que se pueden incluir en una página HTML se deben distinguir dos tipos: las imágenes de contenido y las imágenes de adorno.
Las imágenes de contenido son las que proporcionan información y complementan la información textual. Las imágenes de adorno son las que se utilizan para hacer bordes redondeados, para mostrar pequeños iconos en las listas de elementos, para mostrar fondos de página, etc. Las imágenes de contenido se incluyen directamente en el código HTML mediante la etiqueta <img> y las imágenes de adorno no se deberían incluir en el código HTML, sino que deberían emplearse hojas de estilos CSS para mostrarlas.
A continuación se muestra la definición de la etiqueta <img>, utilizada para incluir las imágenes en las páginas HTML:
| Etiqueta | <img> |
|---|---|
| Atributos comunes | básicos, internacionalización y eventos |
| Atributos propios | src = "url" – Indica la URL de la imagen que se muestraalt = "texto" – Descripción corta de la imagenlongdesc = "url" – Indica una URL en la que puede encontrarse una descripción más detallada de la imagenname = "texto" – Nombre del elemento imagenheight = "unidad_de_medida" – Indica la altura con la que se debe mostrar la imagen (no es obligatorio que coincida con la altura original de la imagen)width = "unidad_de_medida" – Indica la anchura con la que se debe mostrar la imagen (no es obligatorio que coincida con la anchura original de la imagen) |
| Tipo de elemento | En línea y etiqueta vacía |
| Descripción | Se emplea para incluir imágenes en los documentos |
Los dos atributos requeridos son src y alt. El atributo src es similar al atributo href de los enlaces, ya que establece la URL de la imagen que se va a mostrar en la página. Las URL indicadas pueden ser absolutas o relativas. El atributo alt permite describir el contenido de la imagen mediante un texto breve. Las descripciones deben tener una longitud inferior a 1024 caracteres y son útiles para las personas y dispositivos discapacitados que no pueden acceder a las imágenes.
Ejemplo sencillo para incluir una imagen:
<img src="logotipo.gif" alt="Logotipo de Mi Sitio" />
Como <img> es una etiqueta vacía, no tiene etiqueta de cierre. No obstante, para que la página XHTML sea válida, todas las etiquetas deben estar cerradas. Como ya se explicó anteriormente, para cerrar una etiqueta vacía se incluyen los caracteres /> al final de la etiqueta.
HTML no impone ninguna restricción sobre el formato gráfico que se puede utilizar en las imágenes, por lo que en principio la etiqueta <img> puede incluir cualquier formato gráfico existente. Sin embargo, si la imagen utiliza un formato poco habitual, todos o algunos navegadores no serán capaces de mostrar esa imagen.
La recomendación es utilizar uno de los tres siguientes formatos gráficos que entienden todos los navegadores modernos: GIF, JPG y PNG. El formato PNG presenta el inconveniente de que los navegadores obsoletos como Internet Explorer 6 no muestran correctamente las imágenes con transparencias de 24 bits.
El atributo longdesc no se utiliza de forma habitual, pero permite indicar la URL en la que se puede encontrar más información sobre la imagen. Como el atributo alt sólo permite incluir descripciones de hasta 1024 caracteres, el atributo longdesc se emplea con las imágenes complejas que necesitan mucha información para ser descritas:
<img src="/imagenes/proyecto1.png" alt="Imagen del Proyecto 1" longdesc="/portfolio/proyecto1.html" /> <img src="/imagenes/proyecto2.jpg" alt="Imagen del Proyecto 2" longdesc="/mas_informacion.html" />
En el ejemplo anterior, las dos imágenes se encuentran en el mismo directorio del servidor (/imagenes/). Se trata de una estrategia habitual en la mayoría de sitios web: guardar todas las imágenes de contenido en un directorio especial independiente del resto de contenidos HTML. Además, el directorio siempre suele llamarse de la misma manera: «imagenes» o «images» en inglés.
Los atributos width y height se utilizan para indicar la anchura y altura con la que se muestran las imágenes, por lo que son los más contradictorios. Como ya se ha comentado, HTML estructura de forma correcta los contenidos de la página y CSS define el aspecto gráfico con el que se muestran los contenidos. En principio, la anchura y la altura con la que se muestra una imagen es parte de su aspecto gráfico, por lo que debería ser propio de CSS y no de XHTML.
Sin embargo, en la práctica no es viable establecer la anchura y altura de todas las imágenes de contenidos mediante CSS. Si el sitio web dispone de muchas imágenes, la sobrecarga de estilos diferentes que debería definir CSS sería contraproducente. Por este motivo, los atributos width y height son la excepción a la norma de que el código HTML no haga referencia al aspecto de los contenidos.
<img src="/imagenes/foto1.jpg" alt="Fotografía de un paisaje" width="200" height="350" /> <img src="/imagenes/foto2.jpg" alt="Fotografía de un atardecer en la playa" width="330" height="220" />
Si el valor del atributo width o height se indica mediante un número entero, el navegador supone que hace referencia a la unidad de medida píxel. Por tanto, en el ejemplo anterior, la primera foto se muestra con una anchura de 200 píxel y una altura de 350 píxel.
También es posible indicar la anchura y altura en forma de porcentaje. En este caso, el porcentaje hace referencia a la altura/anchura del elemento en el que está contenida la imagen. Si la imagen no se encuentra dentro de ningún otro elemento, hace referencia a la anchura/altura total de la página.
<div> <img src="/imagenes/foto1.jpg" alt="Fotografía de un paisaje" width="30%" height="350" /> </div>
El ejemplo anterior mezcla los dos tipos de medidas que se pueden utilizar, para indicar que la foto tiene una anchura igual al 30% de la anchura del elemento <div> que la contiene y una altura de 350 píxel.
La anchura/altura con la que se muestra una imagen no tiene que coincidir obligatoriamente con la anchura/altura real de la imagen. Sin embargo, cuando estos valores no coinciden, las imágenes se muestran deformadas y el aspecto final es muy desagradable.
Si solamente se establece la altura de la imagen, el navegador calcula la anchura necesaria para que se mantenga la proporción de la imagen. De la misma forma, si sólo se establece la anchura de la imagen, el navegador calcula la altura que hace que la imagen se siga viendo con las mismas proporciones.
Ejercicio de Imágenes con títulos y párrafos
Crear un artículo de receta con un título principal, con dos subtítulos y con un párrafo y una imagen cada uno. Recordemos poner también un botón o un enlace que nos lleve al inicio de nuestra página.
Un ejemplo podría ser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio con imagenes</title>
</head>
<body>
<p><a href="...\nuevo proyecto\indice.html" title="Ir al Home" rel="index">Volver a la página principal</a></p>
<h1>Espaguetis a la carbonara</h1>
<p>Aprende cómo preparar la auténtica receta de espaguetis a la carbonara adaptándola a productos nacionales pero sin sacrilegios.</p>
<h2>Freír ajos y panceta</h2>
<p>Cogemos una sartén con algo de profundidad. Calentamos a fuego medio. Agregamos la mantequilla y nada más comience a derretirse, la repartimos por toda la superficie. Vertemos el diente de ajo troceado al gusto. Damos un par de meneos para que el sabor de la mantequilla filtre bien al ajo. Nada más coja color, agregamos toda la panceta...</p>
<p><img src="...nuevo proyecto\pasta1.jpg" title="Imagen del Pasta 1" height="200"/></p>
<h2>Hervir la pasta</h2>
<p>Aplicamos las leyes físicas de cualquier plato de pasta: llenamos una olla con agua y la llevamos a ebullición. Opcionalmente, podemos agregar dos hojas de laurel.
<br>
Como en cada casa se tienen preferencias distintas, cuece la pasta a tu gusto. Unos, la prefieren hecha casi papilla. Otros, al dente. Por lo general, entre 8-10 minutos es suficiente, según fabricante.
<br>
Si sigues nuestra receta con exactitud, te recomendamos 7 minutos. En el último paso, te explicamos el porqué. Mientras se cuece la pasta, preparamos la carne.
</p>
<p><img src="...\nuevo proyecto\pasta2.jpg" title="Imagen del Pasta 2" height="200" /></p>
</body>
</html>