HacheMuda

Blog personal de Guillermo Latorre

Resultados de la búsqueda de "":

El problema de las imágenes responsive en la web y la primera propuesta del W3C para arreglarlo

W3C ha publicado la primera propuesta para solucionar el problema de las imágenes responsive o adaptables a cada dispoitivo y pantalla de los usuarios.

Estamos viviendo una explosión de pantallas y dispositivos para acceder a internet, y también de nuevas tecnologías que permiten adaptar la web a todos ellos, con el objetivo de garantizar el acceso y satisfacer la experiencia de los usuarios desde cualquier aparato: ordenadores, móviles, tabletas, medio-móviles-medio-tabletas, etc.

Dentro de esta explosión, está muy de moda el diseño y desarrollo web responsive: elaborar los sitios web de manera que sean adaptables a cualquier dispositivo, no sólo de forma visual sino también funcionalmente.

Diseño web responsive

Uno de los puntos más problemáticos al desarrollar un sitio responsive es la gestión de las imágenes:

  • mediante CSS, puedo decir que las imágenes no tengan un tamaño fijo sino que tengan un 100% del espacio en el que están contenidas y con un máximo de anchura para que no se pixele en pantallas grandes. Así, se adaptan al espacio disponible, pero en realidad estoy cargando siempre la misma imagen (con todo su peso) y adaptándola visualmente mediante hojas de estilos. No mola. En realidad, el mayor problema de esta solución es que se carga la misma imagen en todos los dispositivos.
  • existen otras opciones, plugins y librerías creadas para intentar solucionar este problema. Por ejemplo, el proyecto Adaptive Images es un script combinado con unas líneas en el fichero .htaccess que redimensiona realmente las imágenes, las cachea en el servidor y las muestra de acuerdo al tamaño de la pantalla del usuario. Mola, pero tampoco mucho: hay que tocar el sistema de ficheros del servidor, utilizar las cookies del navegador, las imágenes dejan de ser un contenido puramente estático…

Hace unos días estaba comentando este asunto con @gimenete, hablábamos de que ahora mismo no existe una solución “perfecta” o al menos totalmente “correcta” para gestionar las imágenes adaptables. La cantidad de proyectos e ideas que están surgiendo para intentar arreglar esto evidencia la importancia del problema. Algunas opciones:

  • Foresight.js: librería Javascript para detectar la resolución y densidad de pixels de la pantalla del usuario, además de la capacidad de su conexión a internet, para decidir si servirle las imágenes normales o en alta resolución.
  • Riloadr: librería Javascript sin dependencias de otros frameworks para servir imágenes optimizadas y en diferentes resoluciones para mejorar el tiempo de carga y adaptarse a cada dispositivo.
  • jQuery RWD Images: plugin de jQuery para configurar alternativas a una imagen en diferentes tamaños y calidades, para mostrar la apropiada en tiempo real dependiendo de la pantalla del usuario.

Ayer mismo leía en webmonkey la noticia de que W3C ha publicado el primer borrador de la extensión HTML para gestionar imágenes adaptables. Como es un primer borrador, debe tomarse como una propuesta inicial que debe ser comentada y discutida para analizar su viabilidad, ventajas e inconvenientes. La propuesta final deberá satisfacer tanto a los desarrolladores como a las bases de compatibilidad, rendimiento, usabilidad y accesibilidad del W3C.

No obstante, personalmente creo que estamos en el buen camino. Esta primera propuesta adopta la idea del nuevo atributo srcset para las imágenes y se define un nuevo elemento <picture>, muy similar al ya implementado <video> de HTML5. Esta idea es muy popular entre los desarrolladores web, mantendría el elemento <img> exactamente como es ahora y tener un nuevo elemento ofrecería muchas ventajas. El resumen (traducido libremente) del contenido del borrador es algo como:

Esta propuesta añade nuevos elementos y atributos a HTML5 para habilitar diferentes fuentes para las imágenes basadas en las características del navegador y de la pantalla. La propuesta aborda múltiples casos de uso, como las imágenes usadas en diseños web adaptables y las diferentes imágenes que se requieren para pantallas con alta densidad de pixels.

Un ejemplo de código usando la propuesta sería:

<picture alt="">
    <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
    <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
    <source srcset="small-1.jpg 1x, small-2.jpg 2x"> 
    <img src="small-1.jpg"> 
</picture>

Como hijo del elemento <picture> podemos ver varios elementos <source> en los que se define tanto una media query (para especificar tamaños de pantalla) como una lista de dos imágenes alternativas mediante el atributo srcset: una como imagen por defecto para esa media query y la otra como imagen para mostrar si la pantalla tiene una alta densidad de pixels.

La línea 2 del ejemplo de código especifica las imágenes mostrar para pantallas grandes, concretamente las que tengan una anchura mínima de 45em. La tercera línea las especifica para pantallas medianas, entre 18em y 45em. La cuarta establece las imágenes a mostrar en resoluciones inferiores y la quinta línea es un elemento <img> convencional para garantizar la compatibilidad con navegadores antiguos.

¿Qué te parece la propuesta?

Enlaces y referencias de interés: