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	En línea

Ejemplo: simple

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

Ejemplo: imagen que es un hipervínculo

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

Ejemplo: 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á.

Ejemplo: diferentes formatos de imagen

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

Formatos admitidos y sus recomendaciones

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.

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

¿Te ha gustado?

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Escribe el primer comentario