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.

Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ formatDate(fields.createdAt) }}
{{ filterHTMLTags(fields.message) }}
{{ comments.length }} comentarios