Uso de la Etiqueta Picture en HTML5

Aprende cómo usar la Etiqueta PICTURE en nuestros proyectos de HTML5 y CSS3. Es algo muy fácil que podemos pensar en usar.


Con la implementación del responsive web design, la adaptación y optimización de imágenes se ha convertido en un reto para los desarrolladores web.

Como el cambio de ambientes o espacios entre un desktop, laptop, tablet y móvil es diferente, la visualización de las imágenes cambia. Una solución para la adaptación de imágenes en las diferentes plataformas es utilizar porcentajes (%) y no pixeles (px) creando así imágenes flexibles, pero esta no es la mejor forma, puede que la imagen se adapte a la pantalla pero conserva el mismo tamaño en bits de una imagen grande y ahí es donde radica el problema.

Por eso nace la etiqueta llamada: Picture, la cual su funcionalidad es muy similar a la etiqueta video y sound de HTML5, lo que busca esta etiqueta es que por cada resolución de pantalla haya una imagen diferente que se adapte tanto en tamaño como en peso.

Uso de la Etiqueta

 

Comparto la gráfica en donde podemos usar esta etiqueta, información tomada de caniuse.com

Etiquetas:, , ,

Deja tu comentario

¿Necesitas asesoría en algún proyecto o trabajo?

Muestrános tu trabajo

¿Quieres aportar tus conocimientos a la comunidad?

¡Haz parte de Cubemedia!
Ayudamos a demás profesionales

¿Te ha servido algun artículo?
Ayudános a que llegue a más personas.
Compartir en