HTML
Imágenes

Sintaxis

• <img src="" alt="">

Parámetros

Creando una imagen

Para agregar una imagen a una página, use la etiqueta de imagen.

Las etiquetas de imagen ( img ) no tienen etiquetas de cierre. Los dos atributos principales que le da a la etiqueta img son src , la fuente de la imagen y alt , que es un texto alternativo que describe la imagen.

<img src="images/hello.png" alt="Hello World">

También puede obtener imágenes de una URL web:

<img src="https://i.stack.imgur.com/ALgZi.jpg?s=48&g=1" alt="StackOverflow user Caleb Kleveter">

Nota: las imágenes no se insertan técnicamente en una página HTML, las imágenes están vinculadas a páginas HTML. La etiqueta <img> crea un espacio de retención para la imagen a la que se hace referencia.

También es posible incrustar imágenes directamente dentro de la página usando base64:

<img src="data:image/png;base64,iVBOR..." alt="Hello World">

Sugerencia: para vincular una imagen a otro documento, simplemente anide la etiqueta <img> dentro de las etiquetas <a> .

Ancho y altura de la imagen

Nota: Los atributos de ancho y alto no están en desuso en las imágenes y nunca lo han sido. Su uso se ha hecho mucho más estricto.

Las dimensiones de una imagen se pueden especificar utilizando los atributos de width y height de la etiqueta de imagen:

<img src="images/200x200-img.png" width="200" height="200" alt="A 200x200 image">

Al especificar el width y el height de una imagen, su estructura le da al navegador una pista sobre cómo se debe diseñar la página, incluso si solo está especificando el tamaño real de la imagen. Si no se especifican las dimensiones de la imagen, el navegador tendrá que volver a calcular el diseño de la página después de que se cargue la imagen, lo que puede hacer que la página "salte" mientras se carga.

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="0" height="0" alt="A hidden tracking image">

<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">

<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
<img src="images/200x200-img.png" width="1" height="200" alt="A 1x200 image">

Elegir texto alternativo

Alt-text es utilizado por lectores de pantalla para usuarios con discapacidades visuales y por motores de búsqueda. Por lo tanto, es importante escribir un buen texto alternativo para sus imágenes.

El texto debe verse correcto incluso si reemplaza la imagen con su atributo alt. Por ejemplo:

<!-- Incorrect -->
<img src="anonymous.png" alt="Anonymous user avatar"/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit icon"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete icon"/></a>

Sin las imágenes, esto se vería así:

Usuario anónimo avatar Un usuario anónimo escribió:

Lorem ipsum dolor sed.

Editar icono / Eliminar icono

Para corregir esto:

• Eliminar el texto alternativo para el avatar. Esta imagen agrega información para los usuarios videntes (un icono fácilmente identificable para mostrar que el usuario es anónimo) pero esta información ya está disponible en el texto. ¹
• Elimine el "icono" del texto alternativo de los iconos. Saber que esto sería un ícono si estuviera allí no ayuda a transmitir su propósito real.

<!-- Correct -->
<img src="anonymous.png" alt=""/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete"/></a>

Un usuario anónimo escribió:

Lorem ipsum dolor sed.

Editar / Eliminar

Notas al pie

¹ Hay una diferencia semántica entre incluir un atributo alt vacío y excluirlo por completo. Un atributo alt vacío indica que la imagen no es una parte clave del contenido (como es cierto en este caso, es solo una imagen aditiva que no es necesaria para comprender el resto) y, por lo tanto, puede omitirse de la representación. Sin embargo, la falta de un atributo alt indica que la imagen es una parte clave del contenido y que simplemente no hay un equivalente textual disponible para la representación.

Imagen sensible utilizando el atributo srcset

Usando srcset con tamaños

<img sizes="(min-width: 1200px) 580px,
      (min-width: 640px) 48vw,
      98vw"
    srcset="img/hello-300.jpg 300w,
      img/hello-600.jpg 600w,
      img/hello-900.jpg 900w,
      img/hello-1200.jpg 1200w"
    src="img/hello-900.jpg" alt="hello">

sizes son como las consultas de medios, que describen la cantidad de espacio que ocupa la imagen de la ventana gráfica.

• Si la ventana gráfica es más grande que 1200 px, la imagen es exactamente 580 px (por ejemplo, nuestro contenido está centrado en un contenedor que tiene un ancho máximo de 1200 px. La imagen ocupa la mitad de los márgenes menos).
• Si la ventana gráfica está entre 640 px y 1200 px, la imagen ocupa el 48% de la ventana gráfica (por ejemplo, la imagen se escala con nuestra página y ocupa la mitad del ancho de la ventana gráfica menos los márgenes).
• si la ventana gráfica es de otro tamaño, en nuestro caso menos de 640 px, la imagen toma el 98% de la ventana gráfica (por ejemplo, la imagen se amplía con nuestra página y ocupa todo el ancho de la ventana gráfica menos los márgenes). La condición del medio se debe omitir para el último elemento.

srcset solo le dice al navegador qué imágenes tenemos disponibles y cuáles son sus tamaños.

• img/hello-300.jpg tiene 300px de ancho,
• img/hello-600.jpg tiene 600px de ancho,
• img/hello-900.jpg tiene 900px de ancho,
• img/hello-1200.jpg tiene 1200px de ancho

src siempre es fuente de imagen obligatoria. En caso de usar con srcset , src mostrará una imagen alternativa en caso de que el navegador no sea compatible con srcset .

Usando srcset sin tallas

<img src="img/hello-300.jpg" alt="hello"
     srcset="img/hello-300.jpg 1x, 
       img/hello-600.jpg 2x,
       img/hello-1200.jpg 3x">

srcset proporciona una lista de imágenes disponibles, con descriptor x proporción de píxeles de dispositivo.

• si la proporción de píxeles del dispositivo es 1, use img/hello-300.jpg
• si la proporción de píxeles del dispositivo es 2, use img/hello-600.jpg
• si la proporción de píxeles del dispositivo es 3, use img/hello-1200.jpg

src siempre es fuente de imagen obligatoria. En caso de usar con srcset , src mostrará una imagen alternativa en caso de que el navegador no sea compatible con srcset .

Imagen sensible utilizando un elemento de imagen.

Código

<picture>
  <source media="(min-width: 600px)" srcset="large_image.jpg">
  <source media="(min-width: 450px)" srcset="small_image.jpg">
  <img src="default_image.jpg" style="width:auto;">
</picture>

Uso

Para mostrar diferentes imágenes con diferente ancho de pantalla, debe incluir todas las imágenes que usen la etiqueta de origen en una etiqueta de imagen como se muestra en el ejemplo anterior.

Resultado

• En pantallas con un ancho de pantalla> 600px, muestra large_image.jpg
• En pantallas con ancho de pantalla> 450px, muestra small_image.jpg
• En pantallas con otro ancho de pantalla, muestra default_image.jpg