Imágenes Responsive: Uso de la Etiqueta Picture y Buenas Prácticas

Clase 51 de 56 • Curso Definitivo de HTML y CSS

Resumen

La optimización de imágenes en diseño web responsive es crucial para mejorar la experiencia del usuario. Las páginas cargan más rápido y los recursos se utilizan de manera más eficiente. Vamos a sumergirnos en cómo trabajar con imágenes responsivas y por qué es vital evitar las malas prácticas.

¿Por qué es importante optimizar imágenes en diseño responsive?

Las imágenes son un componente esencial en cualquier sitio web, y su correcta implementación es fundamental para evitar largos tiempos de carga, especialmente en dispositivos móviles.

¿Cuáles son las malas prácticas que debemos evitar con las imágenes en responsive?

Al trabajar con proyectos responsive, algunos desarrolladores cometen errores como:

Utilizar imágenes de gran tamaño en dispositivos que requieren versiones más pequeñas.
Establecer dimensiones fijas que no se adaptan a diferentes tamaños de pantalla.
Descargar grandes cantidades de datos en dispositivos con menor capacidad.

¿Cómo implementar imágenes responsive con la etiqueta picture?

La etiqueta picture es una herramienta poderosa para manejar imágenes responsivas. Aquí te explicamos cómo usarla correctamente:

Utiliza la etiqueta picture como contenedor de tus imágenes.
Define la imagen base con la etiqueta img y el atributo alt.
Emplea la etiqueta source con el atributo srcset para especificar versiones alternativas de la imagen.
Haz uso de media queries con el atributo media para determinar qué imagen se cargará según el tamaño del pantalla.

¿Cómo definir los media queries en la etiqueta picture?

Para declarar media queries en la etiqueta picture, debes hacer lo siguiente:

Establece los breakpoints con el atributo media en cada etiqueta source.
Ordena tus etiquetas source de acuerdo al tamaño de la pantalla, de mayor a menor.
La imagen por defecto se mantiene en la etiqueta img sin media query.

¿Cuál es el beneficio de usar el width al 100% en imágenes?

Al asignar un width: 100% a tus imágenes aseguras que se adapten al tamaño del contenedor padre, lo que es ideal para mantener la responsividad y proporcialidad de las mismas.

El uso efectivo de la etiqueta picture junto con media queries y width: 100% se traduce en una experiencia de usuario optimizada, independientemente del dispositivo utilizado. No solo mejora el tiempo de carga, sino que también entrega visuales de alta calidad adaptados a la pantalla del usuario.

Recuerda, el diseño web es una disciplina en constante evolución y entender cómo manejar los recursos visuales de manera inteligente es esencial en esta era digital. Continúa aprendiendo y aplicando las mejores prácticas en tus proyectos.

Gonzalo Vidal

student•

Usando el curso de Debugging con Chrome Devtools de De Granda y volviendo a esta clase y aplicando la etiqueta picture, pude mejorar mi score en performance de 89% a 99% !

Efraín Hernández García

student•

Esas son las ventajas de saber usar bien HTML semántico.

Obed Paz

student•

Que bonito, trataré de usar estas prácticas.

Martín David Roldán

student•

Me encanta este curso, porqué ademas de enseñarte cosas muy buenas, te brinda también como implementar buenas practicas.

Jimmy Buriticá Londoño

student•

Tienes razón, ha sido un excelente curso.

Gianluca Reyes Cisneros

student•

Confirmo, con el aprendi mucho hay cosas que aun no me acuerdo, pero voy empezando :D

Jose Luis Idarraga

student•

Hola! me parece importante acotar algo que observe sobre el uso de las Media Queries en HTML y en CSS:

El orden en como escribimos media queries en CSS es de menor a mayor, siendo la mayor la ultima escrita, esto es porque en CSS las ultimas lineas de un mismo selector sobrescribirán a las primeras, esto es debido a la especificad en CSS. Esto es util sabiendo que trabajamos con minimos de pantalla min-width:. En css las media queries estan orientadas mayormente al diseno Por ejemplo, una media query de un min-witdh de 800px arriba (escrita primero), no sobreescribira a la del min-width de 1200px

El orden de media queries en HTML es de mayor a menor, porque en HTML el browser renderizara lo primero que encuentre y funcione. Esto es util sabiendo que trabajamos con minimos de pantalla min-width:. En html las media querias estan orientadas mayormente al tamano de imagenes o figuras. Por ejemplo, una media query con min-witdh de 800px arriba, sobreescribira a la del min-width de 1200px

Jose Luis Idarraga

student•

Teniendo en cuenta que en ambos casos, escribimos debajo (por ultimo) la media query de min-widht: 1200px

Matías Leonel de la Rosa Sterbanoff

student•

Muy util! gracias!

Carlos Eduardo Gomez García

teacher•

Increíble, esto que si no lo conocía, lo empezaré a implementar, aunque también hubiese estado genial hablar del lazy loading para las imágenes porque también ayudan a mejorar el performance de las páginas ^^

Juan Camilo Valencia Silva

student•

Esto sí lo habló el profe en la sección "Etiquetas multimedia" 😋

Angel Qui

student•

jose jesus milano ferrer

student•

GENIOS!!!

Ivan E. Batista-Ochoa

student•

Recordatorio importantísimo: En imágenes responsivas la propiedad width con valor de 100% es nuestro mejor amigo ;) . Pero, recuerda no encajonarla mucho y utilizar la etiqueta <picture> y/o <figure> dependiendo de la necesidad de tu proyecto. . Ahora, si necesitas optimizar para cada dispositivo es recomendable utilizar la etiqueta <picture>. Esta etiqueta le da a los desarrolladores mayor flexibilidad a la hora de especificar la fuente de la imagen. . Por acá comparto unos recursos:

HTML <picture> Tag
<picture>: The Picture element

Pedro Isaac Aguilar

student•

Gracias por la info, me sirvió en mis apuntes.

Camilo Perilla

student•

width: 100% funciona si la imagen es lo suficientemente grande para abarcar el 100% de su contenedor, pero si no, la imagen se pixelara en su intento de cubrir el 100%. max-width: 100% nos ayuda a que la imagen no supere su ancho original, es como decirle a la imagen: Oye tu, estirate para cubrir el 100% de tu contenedor, pero si ves que no llegas y te pixelas, relaja, no te estires mas. Pdta: el height siempre sera auto, ayudando a que el aspect ratio de la imagen no se dañe

Bryan Quezada Hidalgo

student•

excelente dato, muchas gracias

LESTHER XITUMUL MANUEL

student•

Tambien está la propiedad object-fit:cover, esa también es nuestra mejor amiga bajo este contexto

Joel Dominguez Merino

student•

En esta clase vimos la manera correcta de trabajar con Imágenes Responsivas en nuestros proyectos. Recuerden usar la etiqueta <picture></picture> Y también utilizar la etiqueta <source/> dentro de esta, a la vez que se ordenan de mayor tamaño a menor con el argumento media, al final dejar la imagen con la etiqueta <img> que esta imagen debe ser la pensada para dispositivos móviles.

Dejo el Repositorio por si quieren las imágenes

Codigo HTML

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>iJCode - Responsive Images</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width= device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="./images/logo-css3.svg"
    />
  </head>
  <body>
    <main>
      <!-- 
            Para trabajar con imagenes responsivas se recomienda usar la etiqueta picture.
            y dentro de esta indicar los diferentes tamaños dentro de las etiquetas source y el atributo media.
            Ademas de que el orden es de mayor a menor tamaño y al final la imagen con la etiqueta img que esta pensada para mobile.
         -->
      <picture>
        <source media="(min-width: 1000px)" srcset="./images/large.jpg" />
        <source media="(min-width: 800px)" srcset="./images/medium.jpg" />
        <img src="./images/small.jpg" alt="image" />
        <figcaption>@Karsten116</figcaption>
      </picture>
    </main>
  </body>
</html>

Codigo CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

main > picture > img {
  width: 100%;
}

Andres Orlando Navarro Gutierrez

student•

Gracias

Oriol Fernando Palacios Durand

student•

Buen aporte!!

Diego Fagundez

student•

Hola, no se si ya lo comentaron pero les recomiendo esta pagina para crear imágenes a medida, para maquetar. Así no tienen que estar buscando imágenes temáticas en un principio. Imágenes para maquetar

Eddie Mora

student•

Es para renta de espacios.

Nicolas Anicelle

student•

Re vende humo!!!

Andrés Corral

student•

Para aquellos a quienes les guste trabajar con snippets

"Responsive Picture": {
  "prefix": "pictResp",
  "body": [
    "<picture>",
    "  <source media=\"(min-width: $1)\" srcset=\"$2\"><!--large -->",
    "  <source media=\"(min-width: $3)\" srcset=\"$4\"><!--medium -->",
    "  <img src=\"$5\" alt=\"$6\"><!--small -->",
    "</picture>"
  ],
  "description": "Responsive Picture"
}```

Andres Condezo Monge

student•

Gracias!

Oriol Fernando Palacios Durand

student•

Si no es mucha molestia amigo, ¿qué es un "snippet"?

Obed Paz

student•

figure es usado semánticamente, y le dice al navegador que es un contenedor de, ya sea, diagramas, fotos, etc. -Mientras picture ofrece a los desarrolladores más flexibilidad para especificar recursos de imágenes.

Carlos Ramos

student•

Clase 50 - Imágenes responsive

¿Cómo debemos de trabajar con imágenes en responsive design?

Para trabajar con imágenes en responsive design debemos de usar 3 etiquetas fundamentales:
- <picture>
- <source>
- <img>
Y debemos de usar la siguiente estructura:
HTML:

<picture>
            <source srcset="./Img/Large.jpg" media="(min-width: 900px)">
            <source srcset="./Img/Medium.jpg"   media="(min-width: 600px)">
            <img src="./Img/Small.jpg" alt="Montaña">
</picture>

Bueno empezando por la etiqueta <picture>, se debe de saber que semánticamente se debe de usar esta etiqueta como contenedora de imágenes. Con la etiqueta <source> lo que estamos haciendo es agregar diferentes imágenes que se cargaran dependiendo de que el query se cumpla, como vemos la primera imagen solo se renderizar si la pantalla del dispositivo es de 900px o más, la segunda cuando este tenga 600px y la tercera menos de 600px.
Es de suma importancia saber acomodar correctamente las diferentes etiquetas de <source>, porque si lo hacemos de manera incorrecta no nos dará el resultado que buscamos. Para ello lo que debemos hacer es ubicar de primeras la imagen que se vaya a renderizar con el tamaño más grande y de ahí en adelante ir escribiendo las que le siguen en menor tamaño.
Finalmente debemos de siempre darles a las imágenes uun width de 100% para que se adapten al tamaño del contenedor padre y no tengamos problemas:
CSS

img
{
    width: 100%;
}

Omar Enrique Palacios Cardenas

student•

Como seria la relación de esta etiqueta Picture con la etiqueta de Figure, cual de las 2 seria buena practica de usar, o en que casos se deberia usar alguna, porq Picture parace bastante practica para el tema del responsive, pero si lo vemos la gran mayoria por no decir todas las paginas deben ser responsive, entonces Figure no se usaria, o se usaria solo para imagenes de iconos o logos que no son necesarios de escalar o no mucho.

John Cardenas

student•

Hola Kike,

Tal como tú dices, picture es bastante práctica para responsive. Es por esto que lo mejor sería usar la etiqueta picture a la hora de insertar imágenes (porque siempre deberíamos estar enfocados en trabajar responsive). Y lo que ocurre con figure es que esta etiqueta no solo es usada para imágenes, también es usada para:

Párrafos <p>
Código <code>
Citas <cite>
Videos <video>

Y muchas funciones más (Documentación de <figure>)

Entonces te recomendaría:

Picture para imágenes
Figure para otros elementos multimedia

Saludos :D

Randy Villanueva Guzmán

student•

Hola, estuve buscando cuando se deberia usar cada una y encontre lo siguiente en Stack overflow. y mencionan que de hecho se pueden usar juntas, es decir <picture> dentro de <figure>.

Andy Antonio Paz Cambara

student•

disculpen alguien sabe cual era la pagina ? JAJA

Alejandro Luján

student•

Hay varias, yo uso PEXELS , Dribble y Unsplash

Xavier Orlando Serna Puma

student•

¿Por qué la etiqueta con el viewport más grande siempre tiene que ir arriba en la etiqueta picture? no me quedo claro si alguien me lo pudiera explicar se los agradecería

María Fernanda Barrero Rincón

student•

Hola Xavier, según entiendo esto sucede porque el navegador buscará en orden la etiqueta cuyo media corresponda con el tamaño del viewport. Por ejemplo: Si tú tienes el orden de las etiquetas source de la siguiente manera,

<source media="(min-width: 1000px)" >
<source media="(min-width: 1300px)">

Y el viewport es de 1400px, cuando el navegador busque una coincidencia la primera etiqueta de source coincidirá con el min-width de 1000px por eso no tendrá en cuenta la segunda etiqueta que tiene el min-width de 1300px. Por eso, es importante que orden de las etiquetas se realice de mayor a menor.

Elizabeth Ordinola

student•

@MariaFerBR , amiga muchas ya entendí

Gutierrez Diego

student•

Sigo confesando que este curso esta muy bien elaborado, este pequeño secreto me ha volado la cabeza, creo que una vez llegue a ver este truco y no le di la importancia necesaria.

Grande @platzi.

Danna Valentina Hernández Pinilla

student•

Me encanta que además de explicar de una manera muy apropiada, enseñan buenas prácticas. y eso, verdaderamente marca la diferencia. ¡Gracias!

Andres Camilo Gomez Giraldo

student•

Para los proyectos que se le realicen a un próximo cliente, es muy complicado que a uno le de 3 imágenes para dichos casos... Mi pregunta es ?que otra "buena practica" existe para poner imágenes responsiva, viniendo de una sola imagen ? (PD: Escribo mal la presunta porque mi teclado tiene distribución en ingles :). )

Carlos Eduardo Gomez García

teacher•

¡Hola! Lo mejor que puedes hacer es pedirle a tu cliente una imagen en alta calidad, y tú personalmente puedes redimensionarla y de esa imagen de alta calidad generas las versiones de media y baja calidad y usas cada una en donde más te convenga :D Esto lo puedes hacer manualmente, pero cuando empiezas a ver temas de backend puedes ver que puedes automatizar este proceso :D

Angei Portuges

student•

Cual es la diferencia entre las etiquetas "figure" y "picture"? Por que a veces recomienda usar para los width y height porcentaje (%) y en otras ocasiones usa vw o vh? respectivamente para cada elemento.

Andrés Felipe Lopez gomez

student•

Definición y uso La <figure>etiqueta especifica contenido autónomo, como ilustraciones, diagramas, fotos, listas de códigos, etc.

Si bien el contenido del <figure>elemento está relacionado con el flujo principal, su posición es independiente del flujo principal y, si se elimina, no debería afectar el flujo del documento.

La <picture>etiqueta ofrece a los desarrolladores web más flexibilidad para especificar recursos de imágenes.

El uso más común del <picture>elemento será para la dirección de arte en diseños receptivos. En lugar de tener una imagen que se escala hacia arriba o hacia abajo según el ancho de la ventana gráfica, se pueden diseñar varias imágenes para llenar mejor la ventana del navegador.

El <picture>elemento contiene dos etiquetas: una o más etiquetas <source> y una etiqueta <img> .

El navegador buscará el primer elemento <source> donde la consulta de medios coincida con el ancho de la ventana actual, y luego mostrará la imagen adecuada (especificada en el atributo srcset). El elemento <img> es necesario como último <picture>elemento secundario del elemento, como opción alternativa si ninguna de las etiquetas de origen coincide.

Sugerencia: El <picture>elemento funciona de manera "similar" a <video> y <audio>. Configura diferentes fuentes y la primera fuente que se ajusta a las preferencias es la que se está utilizando.

La etiqueta <figure> permite agregar contenido variado asociadas a una descripción o título, el cual es asociado semánticamente a este, de tal forma que podemos agregar una imagen, ilustración, diagrama, o incluso código. Como regla general, el contenido que agreguemos debe de estar relacionado al texto principal de la página.

Un claro ejemplo donde se puede emplear <figure> es para agregar imágenes a un artículo, donde las imágenes tienen por lo general una descripción justo por debajo. Un claro ejemplo sería cualquier artículo de Wikipedia, ya que este inserta a lo largo de todas sus secciones imágenes que tiene que ver con el texto en cuestión.

Actualmente <figure> es más utilizado para representar imágenes, porque es lo más común en una página además del texto, pero es importante resaltar que se puede utilizar para representar cualquier contenido. La clave de <figure> es que nos permite asociar cualquier cosa con una descripción, de tal forma que son asociados semánticamente.

La etiqueta <figure> se utiliza en conjunto con la <figcaption> para representar la descripción del contenido. La etiqueta <figure> puede tener cualquier contenido seguido de <figcaption> o al revés, <figcaption> seguido de cualquier contenido.

https://www.w3schools.com/tags/tag_figure.asp https://www.oscarblancarteblog.com/2016/11/28/etiqueta-figure-html5/

Angei Portuges

student•

Gracias por tu aclaratoria ;) @andresfelipelg

Nathalia Maya

student•

IMAGEN RESPONSIVE

Con la etiqueta <picture> en html incluimos la imagen inicial con la que cargará nuestra pagina web. Esta práctica lo que hace es que le decimos al navegador que en diferentes viewport nos cargue ciertas imágenes con tamaños y pesos determinados. Tener en cuenta que en el momento de generar el código debemos colocar primero la img con viewport mayor, es decir, debe ir de forma descendiente.

Diego Alejandro Moreno Pedroza

student•

Excelente aporte!

Oscar Alexánder Ortiz Beltrán

student•

No me cargaba la imagen más grande, ya que, había pausado el video, pero este comentario me ayudó. Gracias

Imágenes Responsive: Uso de la Etiqueta Picture y Buenas Prácticas

Web Developer Fundamentals

Este curso tiene una versión actualizada.

HTML y CSS: Fundamentos para Desarrolladores Web

Fundamentos del Desarrollo Frontend: Tecnologías y Prácticas Esenciales

Fundamentos del Desarrollo Backend

Comprende el Rol y las Habilidades de un Desarrollador Full Stack

Diferencias entre Páginas Web Estáticas y Dinámicas

HTML

Anatomía de una Página Web: Estructura y Elementos HTML

Creación y Estructura de un Archivo index.html Básico

Etiquetas HTML: Contenedoras y de Contenido

Listas anidadas y enlaces en HTML para recetas

Anatomía de Etiquetas HTML: Apertura, Cierre y Atributos

Etiquetas multimedia

Formatos de Imágenes y su Uso en Desarrollo Web

Optimización de Imágenes para Web

Uso de etiquetas IMG y FIGURE en HTML

Uso de las etiquetas HTML figure y figcaption para imágenes

Uso de la etiqueta de vídeo en HTML y sus atributos clave

Formularios

Creación de Formularios Web Efectivos con HTML

Creación de Formularios HTML con Campos de Fecha y Hora

Autocompletado y Requerimiento en Formularios HTML

Creación de Menús Desplegables con Select y Data List en HTML

Diferencias entre botones submit e input en formularios HTML

CSS

Introducción a CSS: Estilos y Aplicaciones Básicas

Implementación Básica de CSS en HTML

Pseudo Clases y Pseudo Elementos en CSS

Anatomía de una Regla CSS: Selectores y Declaraciones

Modelo de Caja en CSS: Margen, Relleno y Bordes

Herencia en CSS: Cómo Funciona y Afecta a los Estilos

Especificidad y Orden de Declaración en CSS

Especificidad y Orden en CSS: Crear y Aplicar Estilos Correctamente

Buenas prácticas en CSS: Especificidad y uso adecuado de selectores

Combinadores CSS: Hermanos Adyacentes y Especificidad

Selectores de Hermano General en CSS: Uso y Ejemplos Prácticos

Combinadores CSS: Hijos y Descendientes

Medidas Absolutas y Relativas en CSS: Píxeles y Porcentajes

Comprensión del uso de em en CSS: medidas relativas de fuente

Uso de REM en CSS para Fuentes y Dimensiones

"Uso de Viewport y Dimensiones en CSS: min-width, max-width, min-height"

Posicionamiento en CSS: Static, Absolute y Relative

CSS: Display Block, Inline e Inline-Block

Posicionamiento de Layout Básico en CSS

Posicionamiento y Estilos con Display Flex en CSS

Posicionamiento Vertical con Flexbox en CSS

Uso de Variables Custom en CSS para Optimizar Estilos

Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas

Responsive Design

Responsive Design: Estrategias Mobile First

Patrones de Diseño Responsive: Mobile First a Desktop

Media Queries para Diseño Responsive Mobile y Tablet

Patrón Layout Shifter en Diseño Mobile First

Patrón de Diseño Responsive: Column Drop en CSS

Diseño Responsive: Estrategias y Ejemplos Prácticos

Imágenes Responsive: Uso de la Etiqueta Picture y Buenas Prácticas

Accesibilidad

Accesibilidad Web: HTML Semántico para Proyectos Inclusivos

Uso de medidas relativas para accesibilidad en texto web

Atributos HTML para Mejorar la Accesibilidad Web

Próximos pasos

Próximos Pasos en Desarrollo Web: Mobile First y Más

Recursos Visuales para Desarrolladores Web