Hubo un error de script en esta página. Mientras los editores del sitio lo solucionan, puedes ver una parte del contenido más abajo.

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

{{LearnSidebar}}
{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

Al principio, la Web solo era texto, y realmente era bastante 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 multimedia que considerar, pero es lógico comenzar con el humilde elemento , 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 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: Para 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 {{htmlelement("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 {{htmlelement("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  {{glossary("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 {{htmlelement("img")}} y {{htmlelement("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 los Lynx, que alternativamente muestran  which alternatively displays the alt text of images.
  • 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. {{anch("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 parágrafos 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.

Escensialmente, la clave es ofrecer una experiencia utilizable, insluso 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 de el 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 hace, 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 distorcionada, si no mantienes el correcto aspecto de radio. 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, tabié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.">

This gives us a tooltip, just like link titles:

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

No es esencial incluir títulos a las imágenes. A menudo es mejor incluir dicha información en el texto principal del artículo, en lugar de adjuntarla a la imagen. Sin embargo, son útiles en algunas circunstacias; por ejemplo, en una galería de imágenes cuando no se tiene espacio para los subtítulos.

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 {{htmlelement ("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:

{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}

Anotación de imágenes con figuras y leyendas de las figuras

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 solucion, es utilizar los elementos HTML5 {{htmlelement("figure")}} y {{htmlelement("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>

The {{htmlelement("figcaption")}} element tells browsers, and assistive technology, that the caption describes the other content of the {{htmlelement("figure")}} element.

Note: From an accessibility viewpoint, captions and {{htmlattrxref('alt','img')}} text have distinct roles. Captions benefit even people who can see the image, whereas {{htmlattrxref('alt','img')}} text provides the same functionality as an absent image. Therefore, captions and alt text shouldn't just say the same thing, because they both appear when the image is gone. Try turning images off in your browser and see how it looks.

A figure doesn't have to be an image. It is an independent unit of content that:

  • Expresses your meaning in a compact, easy-to-grasp way.
  • Could go in several places in the page's linear flow.
  • Provides essential information supporting the main text.

A figure could be several images, a code snippet, audio, video, equations, a table, or something else.

Active learning: creating a figure

In this active learning section, we'd like you to take the finished code from the previous active learning section, and turn it into a figure:

  • Wrap it in a {{htmlelement("figure")}} element.
  • Copy the text out of the title attribute, remove the title attribute, and put the text inside a {{htmlelement("figcaption")}} element below the image.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer:

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

CSS background images

You can also use CSS to embed images into webpages (and JavaScript, but that's another story entirely). The CSS {{cssxref("background-image")}} property, and the other background-* properties, are used to control background image placement. For example, to place a background image on every paragraph on a page, you could do this:

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

The resulting embedded image, is arguably easier to position and control than HTML images. So why bother with HTML images? As hinted to above, CSS background images are for decoration only. If you just want to add something pretty to your page to enhance the visuals, this is fine. Though, such images have no semantic meaning at all. They can't have any text equivalents, are invisible to screen readers, etc. This is HTML images time to shine!

Summing up: if an image has meaning, in terms of your content, you should use an HTML image. If an image is purely decoration, you should use CSS background images.

Note: You'll learn a lot more about CSS background images in our CSS topic.

That's all for now. We have covered images and captions in detail. In the next article we'll move it up a gear, looking at how to use HTML to embed video and audio in web pages.

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

In this module

Etiquetas y colaboradores del documento

Colaboradores en esta página: Parziva_1, luchiano199, calvearc, soedrego, JuniorBO, JoseCuestas
Última actualización por: Parziva_1,