Imágenes en HTML

Estás leyendo la versión en inglés del artículo porque aún no existe una traducción para este idioma. ¡Ayúdanos a traducir este artículo!

Al principio, la Web sólo era texto, y eso era realmente aburrido. Afortunadamente, no pasó mucho tiempo antes de que se añadiera la capacidad de insertar imágenes (y otros tipos de contenido más interesantes) dentro de las páginas web. Hay otros tipos de archivos multimedia que tomar en cuenta, pero es lógico comenzar con el humilde elemento img <img>, utilizado para insertar una imagen simple en una página web. En este artículo, veremos cómo usarlo en profundidad, incluidos los conceptos básicos, anotándolo con subtítulos (comentario al pie de foto) utilizando y detallando cómo se relaciona con las imágenes de fondo de CSS.

Prerrequisitos: Conocimientos básicos de informática, software básico instalado, conocimiento básico del trabajo con archivos, familiaridad con los principios básicos de HTML (como se describe en Primeros pasos con HTML).
Objetivo: Aprender cómo insertar imágenes simples en HTML, anotarlas con subtítulos y cómo las imágenes HTML se relacionan con las imágenes de fondo de CSS.

¿Cómo ponemos una imagen en una página web?

Para poner una imagen simple en una página web, utilizamos el elemento <img> . Este es un elemento vacío (lo que significa que no contiene texto o etiqueta de cierre) que requiere de por lo menos un atributo para ser utilizado — src (a veces llamado completamente como, source). El atributo src contiene una ruta que apunta a la imagen que quieres poner en la página, que puede ser una URL relativa o absoluta, de la misma forma que <a> los valores de atributo del elemento href.

Nota: Debes leer A quick primer on URLs and paths para refrescar tu memoria en URLs relativas y absolutas antes de continuar.

Por ejemplo, si tu imagen se llama dinosaur.jpg, y está en el mismo directorio que tu página HTML, deberás incrustar la imagen de la siguiente manera:

<img src="dinosaur.jpg">

Si la imagen estaba en el subdirectorio images, que estaba en el mismo directorio que la página HTML (que Google recomienda para  SEO/indexing propósitos), entonces deberías incrustar la imagen así:

<img src="images/dinosaur.jpg">

y así.

Nota: Los motores de búsqueda también leen los nombres de archivo de imágen y esto cuenta para un SEO.  Por lo tanto, dale a tu imagen un nombre descriptivo; dinosaur.jpg es mejor que img835.png.

Puedes incrustar la imagen usando la URL absoluta, por ejemplo:

<img src="https://www.example.com/images/dinosaur.jpg">

Pero esto no tiene sentido, solo hace que el navegador trabaje más, buscando la dirección IP desde el servidor DNS todo de nuevo, etc. Casi siempre mantendrás las imágenes para tu sitio web en el mismo servidor de tu HTML.

Advertencia: La mayoria de imágenes tienen derechos de autor. NO muestres una imagen en tu página web a menos que:

1) seas dueño de la imagen,
2) has recibido explicitamente, permiso escrito de el dueño de la imagen ó 
3) tengas amplias pruebas que la imagen es, de hecho, de dominio público.

La violación de Derechos de Autor es ilegal y poco ético. Por lo tanto, nunca apuntes tu atributo src a una imagen hospedada en sitio web al que no tengas permiso de enlazarlo. Esto es llamado "hotlinking". Nuevamente, robar el ancho de banda de alguien es ilegal.  También ralentiza tu página, dejándote sin control sobre la imagen si es eliminada o reemplazada por algo incluso vergonzoso.

Nuestro código anterior debería darnos el siguiente resultado:

A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it

Nota: Los elementos como <img> y <video> a veces se denominan elementos reemplazados. Esto se debe a que el tamaño y contenido del elemento están contenidos en un recurso externo (como un archivo de imagen o video),  no por el contenido del elemento en sí.

Nota: Puedes encontrar el ejemplo finalizado en esta sección running on Github (ver el  código fuente también.)

Texto alternativo

El próximo atributo que veremos es  alt.  Este valor se supone que es una descripción textual de la imagen, para usarlo en situaciones en que la imagen no pueda ser vista/mostrada. Por ejemplo, nuestro anterior código podría ser modificado así:

<img src="images/dinosaur.jpg"
     alt="La cabeza y el torso de un esqueleto de dinosaurio;
           tiene una cabeza grande con dientes largos y filosos">

La forma más fácil de probar el texto alt es escribir mal el nombre de archivo. Si por ejemplo nuestro nombre de imagen fue escrito  dinosooooor.jpg, el navegador no podrá mostrar la imagen, y mostrará el texto alternativo en su lugar:

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

Entonces, ¿Por qué alguna vez verías o necesitarías el texto alternativo? Esto puede ser por varias razones:

  • El usuario tiene problemas de visión, y utiliza un  screen reader para poder leer  el contenido de la web. De hecho, tener texto alternativo disponible para describir las imágenes es útil para la mayoría de los usuarios.
  • Como se describió anteriormente, es posible que se haya escrito mal el nombre del archivo o su ruta.
  • El navegador no soporta el tipo de imagen. Algunas personas aún usan navegadores de solo texto, como Lynx, que alternativamente muestran el texto del atributo alt.
  • Podrías querer proporcionar texto para que los motores de búsqueda lo utilicen. Por ejemplo, los motores de búsqueda pueden hacer coincidir el texto alternativo con la consulta de búsqueda.
  • Los usuarios han desactivado las imágenes para reducir el volumen de transferencia de datos y distracciones. Esto sucede especialmente en los teléfonos móviles, y en países donde el ancho de banda es limitado y caro.

¿Qué exactamente deberías escribir en el atributo alt? Esto depende en primer lugar de por qué la imagen está en ese lugar. En otras palabras, qué pierdes si tu imagen no aparece:

  • Decoración. Si la imagen es sólo para decoración y no es parte del contenido, agregar un alt=""en blanco. Por ejemplo, un lector de pantalla no pierde el tiempo leyendo contenido que no es de necesidad básica para el usuario. Las imágenes decorativas no pertenencen realmente a tu HTML. CSS background images debería ser usado para insertar decoración, pero es inevitable, alt="" es la mejor forma de hacerlo.
  • Contenido. Si tu imagen provee información significante, provee la información en un  breve texto alternativo . O mejor aún, en el texto principal que todos pueden ver. No escribas texto alternativo redundante. ¿Qué tan molesto sería para un usuario si todos los párrafos se escribieran dos veces en el contenido principal? Si la imagen es descrita adecuadamente por el cuerpo principal del texto, puedes usar solo alt="".
  • Enlace. Si pones una imagen en las etiquetas <a>, para convertir una imágen en un enlace, aún así debes proporcionar  texto de enlace accesible. En tal caso podrías escribirlo dentro del mismo elemento <a>, o dentro del atributo alt de la imagen.  Lo que mejor funcione en tu caso.
  • Texto. No debes poner tu texto en imagen.  Si tu encabezado principal necesita un sombreado paralelo, por ejemplo, usa CSS para eso en vez de mostrar texto en una imagen. Sin embargo, si realmente no puedes evitar hacer eso, deberías proporcionar el texto en el atributo alt.

Esencialmente, la clave es ofrecer una experiencia utilizable, incluso cuando las imágenes no puedan ser vistas. Esto asegura que a todos los usuarios no les falte  nada del contenido. Intenta desactivar las imágenes en tu navegador y ver cómo se ven las cosas.  Te darás cuenta de lo útil que es el texto alternativo si la imagen no puede ser vista.

Nota: Para más información, mira nuestra guía de  Texto Alternativo.

Anchura y altura

Puedes usar los atributos  width y height para especificar la anchura y altura de tu imagen. Puedes encontrar el ancho y alto de tu imagen de varias maneras. Por ejemplo en la Mac puedes usar  Cmd + I  para mostrar información del archivo de imagen. Volviendo a nuestro ejemplo, podríamos hacer esto:

<img src="images/dinosaur.jpg"
     alt="La cabeza y el torso de un esqueleto de dinosaurio;
           tiene una cabeza grande con dientes largos y filosos"
     width="400"
     height="341">

Esto no da lugar a mucha diferencia en la pantalla, en circunstancias normales. Pero si la imagen no se muestra, por ejemplo, el usuario acaba de entrar a navegar en la página, y la imagen no se ha cargado, notarás que el navegador deja un espacio para que aparezca la imagen:

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

Esto es algo bueno de hacer, resultando en que la página carga más rápida y fluídamente.

Sin embargo, no deberías alterar el tamaño de tus imágenes utilizando atributos HTML. Si configuras el tamaño demasiado grande, terminarás con imágenes que se ven granulosas, borrosas, o demasiado pequeñas, y desperdiciando ancho de banda descargando una imagen que no se ajusta a las necesidades del usuario. La imagen también podría terminar viéndose distorsionada, si no mantienes la correcta proporción de aspecto. Deberías utilizar un editor de imagen, para colocar una imagen con el tamaño adecuado, antes de colocarla en tu página web.

Nota: Si necesitas alterar el tamaño de una imagen, deberías usar CSS en su lugar.

Título de la imagen

Al igual que con los enlaces, también puedes agregar atributos title a las imágenes para proporcionar más información de respaldo si es necesario. En nuestro ejemplo, podríamos hacer esto:

<img src="images/dinosaur.jpg"
     alt="La cabeza y el torso de un esqueleto de dinosaurio;
           tiene una cabeza grande con dientes largos y filosos"
     width="400"
     height="341"
     title="Un T-Rex en exhibición en el Museo de la Universidad de Manchester.">

Esto nos da una etiqueta de ayuda (tooltip) como las de los enlaces:

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

Sin embargo, no es recomendado incluir títulos a las imágenes. title tiene varios problemas de accesibilidad, principalmente porque los lectores de pantalla (screen readers) tienen un comportamiento impredecible y la mayoría de navegadores no la mostrarán a menos que pases el ratón por encima de la imagen (siendo inútil para quien use teclado).

Lo mejor es incluir dicha información en el texto principal del artículo, en lugar de adjuntarla a la imagen.

Aprendizaje activo: incrustación de una imagen

¡Es tu turno de jugar! Esta sección de aprendizaje activo te mantendrá en funcionamiento con un simple ejercicio de integración. Se te proporcionará una etiqueta básica <img>; nos gustaría que insertes la imagen ubicada en la siguiente URL:

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

Anteriormente dijimos que nunca se conectara a imágenes en otros servidores (hotlink), pero esto es sólo para fines de aprendizaje, por lo que lo usaremos esta vez.

También nos gustaría que:

  • Agregue algún texto alternativo y verifique que funcione al escribir mal la URL de la imagen.
  • Establecer la imagen correcta  width Y height (Indicio; es 200px ancho y 171px alto), luego experimenta con otros valores para ver cuál es el efecto.
  • Establece un title en la imagen.

Si comete un error, siempre puede restablecerlo usando el botón Reset. Si realmente te quedas atascado, presiona el botón how solution para ver la respuesta:

Añadir comentarios (subtítulos) a la imagen con 'figures' y 'figure caption'

Hablando de subtítulos, hay varias formas en que podrías agregar un título para tu imagen. Por ejemplo, no habría nada que te impida hacer esto:

<div class="figura">
  <img src="images/dinosaur.jpg"
       alt="La cabeza y el torso de un esqueleto de dinosaurio;
           tiene una cabeza grande con dientes largos y filosos"
       width="400"
       height="341">

  <p>Un T-Rex en exhibición en el Museo de la Universidad de Manchester.</p>
</div>

Esto está bien. Contiene el contenido que necesita y es muy personalizable mediante CSS. Pero aquí hay un problema: no hay nada que vincule semánticamente la imagen con su título, lo que puede causar problemas a los Screen Readers. Por ejemplo, cuando tiene 50 imágenes y leyendas, ¿qué leyenda corresponde a cada imagen?

Una mejor solución, es utilizar los elementos HTML5 <figure> y <figcaption>. Estos se crean exactamente para este propósito: proporcionar un contenedor semántico para las figuras y vincular claramente la figura con el título. Nuestro ejemplo anterior, podría ser reescrito así:

<figure>
  <img src="images/dinosaur.jpg"
       alt="La cabeza y el torso de un esqueleto de dinosaurio;
           tiene una cabeza grande con dientes largos y filosos" width="400"
       height="341">

  <figcaption>Un T-Rex en exhibición en el Museo de la Universidad de Manchester.</figcaption>
</figure>

El elemento <figcaption> dice al navegador, o alguna tecnología de apoyo, que el texto que contiene describe a la imagen contenida por el elemento <figure>.

Nota: Desde el punto de vista de la accesibilidad, los subtítulos al pie de imagen y el texto alt tienen diferentes roles. Los subtítulos benefician incluso a quien puede ver la imagen, mientras que el texto alt proporciona la misma funcionalidad en una imagen ausente. Por tanto, los subtítulos y el texto alt no deberían decir lo mismo, porque ambos aparecen si la imagen no se puede mostrar. Prueba a desactivar las imágenes en tu navegador y mira el resultado.

El elemento figure no necesariamente tiene que contener una imagen. Es una unidad independiente de contenido que:

  • Expresa un significado en una forma compacta y fácil de entender.
  • Se puede poner en varios sitios en el flujo lineal de la página.
  • Provee de información esencial que apoya al texto principal.

Un elemento figure podría contener varias imágenes, un trozo de código, audio, video, ecuaciones, una tabla, o cualquier otra cosa.

Aprendizaje activo: creando un elemento figure

En esta sección de aprendizaje activo, te pedimos que tomes el código finalizado de la sección de aprendizaje activo anterior y lo conviertas en un figure:

  • Envuélvelo todo en un elemento <figure>.
  • Copia el texto del atributo title, elimina el atributo title, y pon el texto dentro de un elemento <figcaption> bajo la imagen.

Si cometes un error, siempre puedes volver a empezar pulsando el botón Reset. Si te quedas atascado, presiona el botón Ver solución para ver la respuesta:

Imágenes de fondo CSS

También puedes usar CSS para insertar imágenes en páginas web (y JavaScript, pero eso es otra historia). La propiedad CSS background-image, y las otras propiedades  background-*, se usan para controlar la colocación de la imagen de fondo. Por ejemplo, para poner una imagen de fondo en cada párrafo de una página, podríamos hacer esto:

p {
  background-image: url("images/dinosaur.jpg");
}

La imagen resultante, podría decirse que es más fácil de posicionar y controlar que una imagen HTML. Entonces ¿para qué molestarse usando imágenes HTML? Como se sugiere arriba, las imágenes de fondo CSS son sólo para decoración. Si tan solo quieres añadir algo bonito para mejorar visualmente tu página, están bien. Sin embargo, no tienen ningún significado semántico. No pueden tener su equivalente en texto, son invisibles a los lectores de pantalla, etc. ¡Es el momento para las imágenes HTML de lucirse!

Resumiendo: si una imagen tiene significado, en términos del contenido de tu página, entonces deberías usar una imagen HTML. Si la imagen es puramente decoración, deberías usar imágenes de fondo CSS.

Nota: Aprenderás mucho más sobre imágenes de fondo CSS en nuestro apartado CSS.

Esto es todo por ahora. Hemos cubierto en detalle imágenes y subtítulos de imagen. En el próximo artículo, subiremos una marcha para ver cómo usar HTML para insertar video y audio en páginas web.

En este módulo