HTML. Imágenes

El atributo src de <img>

El atributo src contiene el camino absoluto o relativo a la imagen desde la página web. Para que el navegador pueda mostrar la imagen, el archivo referenciado debe estar disponible. Si los archivos de las páginas web o de las imágenes se cambian de carpeta o de nombre, hay que actualizar los atributos src para que apunten a la dirección correcta.

Los ejemplos siguientes muestran una dirección absoluta y una relativa en el atributo src.

<img src="https://www.w3.org/Icons/w3c_main.png" alt="Logotipo del W3C en el sitio web del W3C">

<img src="w3c-main.png" alt="Logotipo del W3C en el sitio web de mclibre">

El atributo alt de <img>

El atributo alt contiene el texto que deben mostrar los navegadores si la imagen no está disponible. El atributo alt es obligatorio en HTML, aunque puede tener un valor vacío.

Los ejemplos siguientes muestran cómo los navegadores muestran la imagen cuando la imagen se encuentra disponible o el texto del atributo alt cuando la imagen no se encuentra disponible.

<img src="tux.jpg" alt="Tux, el pingüino">

<img src="tux2.jpg" alt="Tux, el pingüino">
<!-- Imagen no disponible -->

El atributo title de <img>

El atributo title contiene el texto que se muestra en forma de "tip" (cuadrito amarillo que aparece cuando se sitúa el ratón encima de la imagen). El atributo title es optativo.

Los ejemplos siguientes muestran cómo el texto del atributo title se muestra siempre, independientemente de que la imagen se encuentre o no disponible.

<img src="tux.jpg" alt="Este es el atributo alt de una imagen que tiene los atributos alt y title" title="Este es el atributo title de una imagen que tiene los atributos alt y title">

<img src="tux2.jpg" alt="Este es el atributo alt de una imagen que tiene los atributos alt y title" title="Este es el atributo title de una imagen que tiene los atributos alt y title">
<!-- Imagen no disponible -->

Los atributos width y height de <img>

Los atributos width y height establecen la anchura y altura de la imagen. Si estos atributos no están definidos, la imagen se muestra con su tamaño original, pero si los atributos están definidos, la imagen se adapta a esos valores. Los valores numéricos se interpretan como píxeles.

Es conveniente establecer los atributos width y height para que el navegador sepa el tamaño de las imágenes antes de recibirlas y reserve el espacio necesario en la página. Cuando se abre una página web, el navegador recibe primero el fichero html y después pide las hojas de estilo css y las imágenes. En cuanto llegan las hojas de estilo y antes de que terminen de llegar las imágenes, los navegadores ya muestran la página. Si el navegador no sabe qué tamaño ocupan las imágenes y no ha podido reservar el espacio necesario, a medida que van llegando las imágenes el navegador debe redibujar la página, desplazando el texto, lo que resulta molesto para su lectura. pero si el navegador sabe qué tamaño ocupan las imágenes, a medida que van llegando las imágenes simplemente se van completando los huecos.

Lógicamente, si se establecen los atributos width y height y posteriormente se cambia el archivo de la imagen por otra de diferente tamaño, es necesario corregir los valores en la página web si no quiere verse la imagen deformada.

<img src="estrella-svg.svg" alt="estrella SVG" >

<img src="estrella-png.png" alt="estrella PNG" >

<img src="estrella-svg.svg" alt="estrella SVG"
  width="170" height="165">

<img src="estrella-png.png" alt="estrella PNG"
  width="170" height="165">

Si los valores no son proporcionales a la imagen original, la imagen de mapa de bits se deforma, pero la imagen vectorial se ajusta al menor tamaño sin deformarse.

<img src="estrella-svg.svg" alt="estrella SVG"
  width="85" height="165">

<img src="estrella-png.png" alt="estrella PNG"
  width="85" height="165">

<img src="estrella-svg.svg" alt="estrella SVG"
  width="170" height="82">

<img src="estrella-png.png" alt="estrella PNG"
  width="170" height="82">

Si los valores son proporcionales a la imagen original, la imagen se amplia o reduce. Al ampliar la imagen, se puede observar cómo la imagen SVG conserva la calidad, mientras que la imagen de mapa de bits pierde calidad.

<img src="estrella-svg.svg" alt="estrella SVG"
  width="85" height="82">

<img src="estrella-png.png" alt="estrella PNG"
  width="85" height="82">

<img src="estrella-svg.svg" alt="estrella SVG"
  width="340" height="330">

<img src="estrella-png.png" alt="estrella PNG"
  width="340" height="330">

Si sólo se establece uno de los dos atributos, la imagen se amplia o reduce de forma proporcional.

<img src="estrella-svg.svg" alt="estrella SVG"
  width="85">

<img src="estrella-png.png" alt="estrella PNG"
  width="85">

<img src="estrella-svg.svg" alt="estrella SVG"
  height="82">

<img src="estrella-png.png" alt="estrella PNG"
  height="82">

En HTML 4 / XHTML 1 los atributos width y height se podían expresar en porcentajes, como se comenta en la lección sobre elementos obsoletos, pero en HTML no está permitido.