Cada vez es más preciso que los desarrolladores web tengamos una solución clara para poder adaptar convenientemente las imágenes según el dispositivo. Uno de los puntos débiles del llamado Responsive Design es la presentación de las imágenes en la web. Por eso, desde hace tiempo el W3C, el grupo que supervisa el estándar HTML, está trabajando en una propuesta de borrador que dé una posible solución común. Ya podemos consultar el borrador de la primera propuesta sobre imágenes sensibles que publicó hace unos días.
Todo el mundo quiere que sus imágenes luzcan bien en cualquier dispositivos. Los desarrolladores tenemos que enviar imágenes pequeñas para las pantallas pequeñas e imágenes grandes para las más grandes. Cada uno aplica un hack concreto desarrollado por él mismo o el que provee algún plugin Javascript, pero realmente necesitamos una solución estándar donde sea el navegador quien decida la imagen que se visualizará.
La propuesta del Responsive Images Community Group se acerca a la introducción de un nuevo elemento
Un ejemplo de cómo seria el uso de esta nueva etiqueta picture la tenemos en la imagen superior del post:
La primera línea es una media querie para las pantallas grandes en el que el atributo srcset indica dos imágenes distintas: una para las pantallas de resolución estándar y otra para las de alta resolución dpi.
La segunda línea se ocupa de las pantallas de tamaño medio, mientras que la tercera se encarga de las pantallas pequeñas o cuando el ancho de banda es limitado. Finalmente, la última linea utiliza el estándar img para exploradores más antiguos.
Más información | Borrador HTML Responsive Images Extension