Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Al principio, la Web solo 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, anótelas con subtítulos y cómo las imágenes HTML se relacionan con las imágenes de fondo de CSS.

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

Para poner una imágen 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 imágen 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 imágen se llama dinosaur.jpg, y está en el mismo directorio que tu página HTML, deberás incrustar la imágen de la siguiente manera:

<img src="dinosaur.jpg">

Si la imágen 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 imágen 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 imágen un nombre descriptivo; dinosaur.jpg es mejor que img835.png.

Puedes incrustar la imágen 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 imágen en tu página web a menos que:

1) seas dueño de la imágen
2) Has recibido explicitamente, permiso escrito de el dueño de la imágen ó 
3) Tengas amplias pruebas que la imágen 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 imágen 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, dejandote sin control sobre la imágen 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 imágen 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 imágen, para usarlo en situaciones en que la imágen no pueda ser vista/mostrada. Por ejemplo, nuestro anterior código pordrí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 nuestra nombre de imágen fué escrito  dinosooooor.jpg, el navegador no podrá mostrar la imágen, 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 problems 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 imágen. 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 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 imágen está en ese lugar. En otras palabras, qué pierdes si tu imágen no aparece:

  • Decoración. Si la imágen es solo 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 imágen 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 imágen es descrita adecuadamente por el cuerpo principal del texto, puedes usar solo alt="".
  • Enlace. Si pones una imágen 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 imágen.  Lo que mejor funcione en tu caso.
  • Texto. No debes poner tu texto en imágen.  Si tu encabezado principal necesita un sombreado paralelo, por ejemplo, usa CSS para eso en vez de mostrar texto en una imágen. 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 imágen 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 imágen. Puedes encontrar el ancho y alto de tu imágen de varias maneras. Por ejemplo en la Mac puedes usar  Cmd + I  para mostrar información del archivo de imágen. 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 imágen no se muestra, por ejemplo, el usuario acaba de entrar a navegar en la página, y la imágen no se ha cargado, notarás que el navegador deja un espacio para que aparezca la imágen:

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 que 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 imágen que no se ajusta a las necesidades del usuario. La imágen también podría terminar viendose distorsionada, si no mantienes la correcta proporción de aspecto. Deberías utilizar un editor de imágen, para colocar una imágen con el tamaño adecuado, antes de colocarla en tu página web.

Nota: Si necesitas alterar el tamaño de una imágen, 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 dá 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 mayoria de navegadores no la mostrarán a menos que pases el ratón por encima de la imagen (siendo inutil 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 Restablecer. 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 esta 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 imagenes 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 imagenes, un trozo de codigo, 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 codigo finalizado de la seccion de aprendizaje activo anterior y lo conviertas en un figure:

  • Envuelvelo 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 boton Reset. Si te quedas atascado, presiona el botón Ver solución para ver la respuesta:

Imagenes de fondo CSS

También puedes usar CSS para insertar imagenes 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, podriamos 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 imagenes HTML? Como se sugiere arriba, las imagenes de fondo CSS son solo para decoración. Si tan solo quieres añadir algo bonito para mejorar visualmente tu página, estan 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 imagenes 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 imagenes de fondo CSS.

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

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

En este módulo

Etiquetas y colaboradores del documento

Última actualización por: BubuAnabelas,