Tutorial: [HTML5] ¡imágenes responsive en 5 minutos!

[csnotcs]

Hola!

¿Tenes un sitio web? ¿Buscas un diseño responsive? ¿cansado de usar porcentajes en css? ¿te gustaría tener el 100% de seguridad que la imagen se verá correctamente?

¡No busques mas!

En este tutorial te enseñaré otra manera de hacer responsive tus imágenes con el atributo "picture" que HTML5 trae.

¿Que necesitamos?

*Tener nuestras imagenes en diferentes medidas.

*Saber HTML básico.

Mas nada :encouragement:

Bueno, no voy a extender este tutorial mucho, ya que es algo muy simple.

Lo que debemos hacer es lo siguiente:

En nuestro documento html, a la hora de colocar una imagen, debemos poner el siguiente codigo:

<picture>
 <img
 src="imagengrande.png"  
 sizes="(max-width: 1024px) 100vw, 1024px"
 srcset="imagenpequeña.png 480w, imagenmedia.png 768w, imagengrande.png 1024w,  imagensuper.png 1024w 2x">
</picture>

donde los nombres deben ser reemplazados por sus imagenes.

¿Que hace esto?

Lo que hace es simple, "mira" que medida está especificada en tu imagen y muestra la que esté indicada como la correspondiente a la resolución desde donde se ve la imagen.

Por ej.
En ese codigo "imagenpequeña.png" se mostrará cuando la resolución del dispositivo sea de 480 pixeles de ancho (o menos). "imagenmedia.png" se mostrará cuando la resolución sea de 768 pixeles de ancho (Y MAS DE 480, porque si no, se mostrará la anterior). Y así sucesivamente. En el caso de "imagensuper.png 1024w 2x" el X2 significa que se mostrará en pantallas de 1024 pixeles de ancho, pero con el doble de densidad de pixeles (tipo retina).

Y bueno, mas o menos así se logra que las imagenes se adapten, sin necesidad de andar usando porcentajes y cosas complicadas. En uno está el ir jugando para que en pantallas mas pequeñas (obviamente de moviles) se cargen imagenes mas livianas, ir colocando por defecto lo mas liviano para mejorar la carga y todo ese rollo.

Este tutorial lo hice lo más básico posible para que sea rápido y fácil de entender, aunque no tiene mucha ciencia xD

Y mas nada, ojala les sirva si están haciendo algo en html, o simplemente para aprender algo nuevo y adentrarse en las nuevas tecnologias que HTML5 trajo debajo del brazo :encouragement:

Hasta la proximaaaaaaaaaaaaaaaaaa :topsy_turvy:
​

 

[cerorank]

Buen tutoríal :encouragement:

 

[csnotcs]

Buen tutoríal :encouragement:

Gracias🙄

 

[William Proaño]

Exccelente tutorial Felicidades! :encouragement:

 

[csnotcs]

Exccelente tutorial Felicidades! :encouragement:

Gracias :star2: A mas de uno le servirá

 

[beatqueen]

Qué buen tutorial, tengo una web de imágenes, pero quisiera saber si debo colocar este código antes de cada una de las imágenes que tenga o donde lo pongo?, perdón, si la pregunta es absurda xD

 

[csnotcs]

Qué buen tutorial, tengo una web de imágenes, pero quisiera saber si debo colocar este código antes de cada una de las imágenes que tenga o donde lo pongo?, perdón, si la pregunta es absurda xD

En lugar de la imagen (<img src=...) simplemente pone ese codigo, y listo :encouragement: Claro, reemplazando los nombres por los de tus imagenes...

 

[beatqueen]

En lugar de la imagen (<img src=...) simplemente pone ese codigo, y listo :encouragement: Claro, reemplazando los nombres por los de tus imagenes...

Entonces déjame ver si entendí:

Cargo mis imágenes y coloco el nombre del archivo imagenesdeamor.jpg o la terminación que sea, ya con eso, se tendría que visualizar mi imagen sin problemas?, lo que sería llenar los atributos de la imagen, los llenaría directo en la galería y ya aparecerían en la imagen publicada como estás explicando en el tutorial?

Espero me haya dado a entender y perdón nuevamente xD

 

[csnotcs]

Entonces déjame ver si entendí:

Cargo mis imágenes y coloco el nombre del archivo imagenesdeamor.jpg o la terminación que sea, ya con eso, se tendría que visualizar mi imagen sin problemas?, lo que sería llenar los atributos de la imagen, los llenaría directo en la galería y ya aparecerían en la imagen publicada como estás explicando en el tutorial?

Espero me haya dado a entender y perdón nuevamente xD

Usas un script? o un CMS?

 

[beatqueen]

CMS, wordpress para ser precisos

 

[csnotcs]

CMS, wordpress para ser precisos

AHHH... En ese caso, a no ser que insertes el codigo HTML, si las cargas directo deberias tocar wordpress para que en vez de la etiqueta <img src="imagenesdeamor.jpg"> ponga la que puse.

 

[Glifon]

Excelente tutorial, de gran ayuda amiga, un saludo!

 

[csnotcs]

Excelente tutorial, de gran ayuda amiga, un saludo!

Gracias! :star2:

 

[Grimmjow]

Gracias por la información! :topsy_turvy:

 

[Esteban Sequeira]

Gracias por el aporte, sólo para añadir otra alternativa para el responsive en cualquier dispositivo: style="max-width: 100%;
height: auto;"

 

[Yosue14]

Buen tutorial, desearía uno para crear una pagina ¡Saludos!:encouragement:

 

[csnotcs]

Gracias por el aporte, sólo para añadir otra alternativa para el responsive en cualquier dispositivo: style="max-width: 100%;
height: auto;"

Gracias por la alternativa 😀

Buen tutorial, desearía uno para crear una pagina ¡Saludos!:encouragement:

Pues no soy tan profesional ajajj pero se hacer algo "safable"... Quizá enseñe lo poco que sé así pueden armar al menos una landing page funcional 😛7:

- - - Actualizado - - -

Gracias por la información! :topsy_turvy:

de nada :star2:

 

[Yosue14]

Gracias por la alternativa 😀



Pues no soy tan profesional ajajj pero se hacer algo "safable"... Quizá enseñe lo poco que sé así pueden armar al menos una landing page funcional 😛7:

- - - Actualizado - - -



de nada :star2:

Esperaré ese tutorial bro ¡Gracias!

 

[Carlos Jurado]

Buen tuto, gracias :encouragement:

 

[estepicursorlopez]

Excelente estimado, la verdad que con algo así es mas facil poder adaptar el tamaño.