Lección 5: Imagenes

Una página web sin imágenes es aburrida y difícil de masticar. Por ello vamos a aprender a insertar imágenes con diferentes formatos y escenarios.

Etiqueta	`<img>`
Descripción	Insertar imagen.
Atributos	`src`: Ruta de la imagen. `alt`: Texto alternativo si la imagen no es cargada, errónea o esta siendo visualizada por un navegador especial. `height`: Altura de la imagen en píxeles, `width`: Anchura de imagen en píxeles.
Tipo	En línea

Etiqueta	`<source>`
Descripción	Vincula contenido multimedia (imágenes, audio y vídeo).
Atributos	`srcset`: Ruta del contenido multimedia. `type`: Tipo de contenido (MIME).
Tipo	En línea

Etiqueta	`<picture>`
Descripción	Contenedor de `<source>` y `<img>`.
Atributos	Globales
Tipo	Bloque

Etiqueta	`<figure>`
Descripción	Contenedor autorepresentativo de una imagen, ilustración, diagrama, fragmento de código, etc. Con posibilidad de añadir un pie a la imagen con `<figcaption>`.
Atributos	Globales
Tipo	Bloque

Los formatos admitidos y sus recomendaciones son variados.

WEBP: Para navegadores actuales.
JPEG: Muchos colores.
PNG: Se necesita transparencias.
APNG: Animaciones en bucle.
GIF: Animaciones en bucle para navegadores obsoletos.
SVG: Vectorial.
BMP: Nunca recomendado.

Imagen individual

<img src="oveja-zombie-blog.svg" alt="Oveja zombie">

Imagen que es un hipervínculo

<a href="#">
    <img src="oveja-zombie-blog.svg" alt="Oveja zombie">
</a>

Cambiando imagen dependiendo de la resolución

<picture>
  <source srcset="oveja-smartphone.png" media="(max-width: 800px)">
  <img src="oveja.png" alt="Oveja">
</picture>

Redimensiona el navegador a menos de 800px de ancho y la imagen cambiará.

Diferentes formatos de imagen

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>

Autocontenedor con y sin pie

Solo una imagen.

<figure>
  <img
    src="oveja-zombie-blog.svg"
    alt="Oveja simpática"
  >
</figure>

Imagen con pie.

<figure>
  <img
    src="oveja-zombie-blog.svg"
    alt="Oveja simpática"
  >
  <figcaption>Oveja desafiando con la mirada</figcaption>
</figure>

Oveja desafiando con la mirada

5-1 5-2 5-3 5-4

¿Te ayudo?

1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
2 cafés: Respondo a una duda en los comentarios.
4 cafés: Te corrijo una actividad y te envío feedback.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario