Imágenes Responsive: Uso de la Etiqueta Picture y Buenas Prácticas
Contenido del curso
Gonzalo Vidal
Efraín Hernández García
Obed Paz
Martín David Roldán
Jimmy Buriticá Londoño
Gianluca Reyes Cisneros
Jose Luis Idarraga
Jose Luis Idarraga
Matías Leonel de la Rosa Sterbanoff
Carlos Eduardo Gomez García
Juan Camilo Valencia Silva
Angel Qui
jose jesus milano ferrer
Ivan E. Batista-Ochoa
Pedro Isaac Aguilar
Camilo Perilla
Bryan Quezada Hidalgo
LESTHER XITUMUL MANUEL
Joel Dominguez Merino
Andres Orlando Navarro Gutierrez
Oriol Fernando Palacios Durand
Diego Fagundez
Eddie Mora
Nicolas Anicelle
Andrés Corral
Andres Condezo Monge
Oriol Fernando Palacios Durand
Obed Paz
Carlos Ramos
Omar Enrique Palacios Cardenas
John Cardenas
Randy Villanueva Guzmán
Andy Antonio Paz Cambara
Alejandro Luján
Xavier Orlando Serna Puma
María Fernanda Barrero Rincón
Elizabeth Ordinola
Gutierrez Diego
Danna Valentina Hernández Pinilla
Andres Camilo Gomez Giraldo
Carlos Eduardo Gomez García
Angei Portuges
Andrés Felipe Lopez gomez
Angei Portuges
Nathalia Maya
Diego Alejandro Moreno Pedroza
Oscar Alexánder Ortiz Beltrán
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% !
Esas son las ventajas de saber usar bien HTML semántico.
Que bonito, trataré de usar estas prácticas.
Me encanta este curso, porqué ademas de enseñarte cosas muy buenas, te brinda también como implementar buenas practicas.
Tienes razón, ha sido un excelente curso.
Confirmo, con el aprendi mucho hay cosas que aun no me acuerdo, pero voy empezando :D
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
Teniendo en cuenta que en ambos casos, escribimos debajo (por ultimo) la media query de min-widht: 1200px
Muy util! gracias!
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 ^^
Esto sí lo habló el profe en la sección "Etiquetas multimedia" 😋
GENIOS!!!
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:
Gracias por la info, me sirvió en mis apuntes.
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
excelente dato, muchas gracias
Tambien está la propiedad object-fit:cover, esa también es nuestra mejor amiga bajo este contexto
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%; }
Gracias
Buen aporte!!
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
Es para renta de espacios.
Re vende humo!!!
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" }```
Gracias!
Si no es mucha molestia amigo, ¿qué es un "snippet"?
Clase 50 - Imágenes responsive
¿Cómo debemos de trabajar con imágenes en responsive design?
<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>
img { width: 100%; }
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.
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:
Y muchas funciones más (Documentación de <figure>)
Entonces te recomendaría:
Saludos :D
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>.
disculpen alguien sabe cual era la pagina ? JAJA
Hay varias, yo uso PEXELS , Dribble y Unsplash
¿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
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.
@MariaFerBR , amiga muchas ya entendí
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.
Me encanta que además de explicar de una manera muy apropiada, enseñan buenas prácticas. y eso, verdaderamente marca la diferencia. ¡Gracias!
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 :). )
¡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
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.
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.
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/
Gracias por tu aclaratoria ;) @andresfelipelg
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.
Excelente aporte!
No me cargaba la imagen más grande, ya que, había pausado el video, pero este comentario me ayudó. Gracias
