Como muchos de vosotros sabéis, últimamente se habla mucho de responsive design, que en resumidas cuentas es una forma de diseñar y maquetar las webs para que en función del dispositivo o tamaño del navegador con el que se visiona la web, esta ofrezca unos estilos u otros.

Uno de los mayores problemas con el responsive design son las imágenes, ya que éstas tienen un tamaño definido, y es complicado lograr el efecto que se quiere, además de poder ahorrar algo en el peso de la página llamando a imágenes más pequeñas cuando el navegador o dispositivo lo requiere.

Hace unos días, todos nos hacíamos eco de una gran noticia, y es que el W3C publica el primer borrador para el uso imágenes en Responsive Design, pero como siempre… desde que se escribe el borrador hasta que se estandariza, puede pasar muchísimo tiempo (y más, tratándose del W3C), por tanto hay que mirar otras opciones momentáneas.

Hemos seleccionado algunas soluciones bastante populares entre los desarrolladores de sitios webs:

Técnica Adaptive Images

Una opción bastante extendida es la de adaptive-images.com, que no está nada mal, ni es complicada de implementar pero aún no termina de convencernos desde un punto de vista de optimización de recursos. Dejar que PHP sirva las imágenes no es tan eficiente como que lo haga Apache. Además, necesitar una cookie para que dada una URL (la imagen) muestre una u otra, es algo “macabro”. Por tanto, es una solución para webs con un tráfico no muy alto, y en las que la optimización de recursos y rapidez no sea primordial.

No todo son contras, como pro hay que decir que con esta técnica la semántica se respeta al 100%, ya que no se mete ruido dentro del código, simplemente se añade un pequeño script en el header y unas líneas en el .htaccess.

Técnica Picturefill

Una opción menos extendida, pero que nos gusta bastante es Picturefill. Con esta delegas al javascript la elección de la imagen en función del tamaño de la ventana del navegador.

El comportamiento es sencillo, si no hay javascript, mediante la etiqueta noscript cargas la imagen que desees (normalmente la pequeña, para ahorrar carga) y luego mediante los atributos data-src apuntas a las imágenes que tienes en el servidor y mediante el atributo data-media segmentas los tamaños de navegador.

<div data-picture="" data-alt="alt...">
<div data-src="small.jpg"></div>
<div data-src="medium.jpg" data-media="(min-width: 400px)"></div>
<div data-src="large.jpg" data-media="(min-width: 800px)"></div>
<div data-src="biggest.jpg" data-media="(min-width: 1000px)"></div>
<noscript><img src="small.jpg" alt="alt..." /></noscript>
</div>

Tampoco nos termina de convencer, principalmente por el marcado.

Técnica HiSRC

Primero, HiSRC es un plugin de jquery, por tanto, ya necesitas de esa librería (aunque por lo extendida que está, ya casi parece un estándar).

Su funcionamiento es bastante sencillo, utiliza, dentro del tag img, atributos como data-1xdata-2x … para vincular las imágenes que queremos mostrar en función de los tamaños del navegador.

Es una solución bastante limpia.

Técnica Responsive Images

Responsive Images es una de mis preferidas. En este caso se utiliza el .htaccess  y javascript para hacer la selección de la imagen.

En el atributo src dentro del tag img se van concatenando las rutas de las imágenes y javascript+.htaccess hacen el resto.

Conclusión y datos extra

A la espera de que W3C termine y dé por concluido el estándar tenemos que buscarnos la vida… hay que sopesar si la web tiene o no mucho tráfico y las características del servidor para seleccionar la mejor técnica, ya que algunas cargan más de servidor y en ocasiones no es viable.

Buscando más información, y probando otras técnicas, encontré esto, que es un compendio de técnicas con algunas de sus características, no está nada mal… Y este artículo de CSS-Tricks, que es verdaderamente aclaratorio.

Comparte… ¡o no!
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *