Get it on Google Play

Imágenes responsive con soporte nativo del navegador con HTML5 y PICTURE

30-10-2017
 
Create responsive images

Create responsive images

Una de las cosas que aprendí en el último Liferay Symposium fue la existencia de la etiqueta ‘picture’ en HTML5. El uso de esta etiqueta solventa uno de los grandes quebraderos de cabeza cuando uno hace páginas web responsive, la imágenes insertadas en la página tienen realmente el mismo peso independientemente del tamaño del dispositivo.

Dicho de otro modo, el problema, es que cuando insertamos una imagen grande en una página web y después la vemos en un móvil, aunque en el móvil se ve mucho mas pequeña es la misma imagen(De 1600x 1200, por ejemplo….).

Para esto podemos hacer uso de la etiqueta ‘Picture’, a la que le podemos definir varias imagenes en función del tamaño de la pantalla del dispositivo. Por ejemplo:

<picture>
  <source media="(max-width: 650px)" srcset="images/img650.png">
  <source media="(max-width: 920px)" srcset="images/img920.png">

  <img src="images/imgDefault.png" alt="Mi img responsive" />
</picture>

En fin, espero que os sea útil.

 

Leave a Reply