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">
Oveja zombie

Ejemplo: imagen que es un hipervínculo

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

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

Oveja zombie

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

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Acepto la política de Protección de Datos.

Escribe el primer comentario