Imagenes Responsive con <picture>

<picture> es un nuevo elemento que está por ser parte del HTML5. Nos llevará a que el proceso de poner imágenes responsivas sea como el que actualmente los elementos de <audio> y <video> tienen. Te dejará poner múltiples etiquetas source, cada una especificando diferentes nombres de archivo de imágenes junto con condiciones en las que cada una será cargada. Te dejara cargar una imagen totalmente diferente dependiendo en: El resultado de media queries ej. viewport height, width, orientation Densidad de Pixel Esto significa que puedes: Cargar imágenes de tamaño de archivo apropiado, haciendo el mejor uso de la banda ancha. Cargar imágenes recortadas a una diferente relación de aspecto para ajustarse a los cambios en el layout a diferente anchura. Cargar imágenes con alta resolución para pantallas de alta densidad de Pixel.