Ultima revisión 01/05/2013

Responsive Design: Imágenes escalables

Cuando desarrollamos un proyecto web en Responsive Web Design, uno de los retos al que nos enfrentamos es el dilema de las imágenes escalables. Existen formas sencillas para escalar una imagen (por ejemplo, determinando el tamaño de la misma relativo a su contenedor). Sin embargo estás soluciones no son a menudo lo más óptimo.

A finales del año pasado la W3C publicaba el primer borrador para el uso imágenes en Responsive Design, pero como puede pasar mucho tiempo hasta que veamos resultados debemos mirar otras opciones.

El problema de hacer que las imágenes sean responsive ha sido, desde el principio, un gran dolor de cabeza para todos los desarrolladores que apuestan por esta técnica. Poco a poco se han desarrollado distintas soluciones que van desde el uso javascript hasta la combinación de php y el archivo .htaccess.

Técnica Adaptive Images

Una de las mejores opciones, a día e hoy, es adaptive-images.com aunque no sea la mejor desde un punto de vista de optimización de recursos. Se basa en redirigir las imágenes, a través del .htaccess, a un PHP que las trata y las presenta en un tamaño adecuado a la resolución del dispositivo dónde se muestra. No es una solución demasiado rápida pero, es bastante buena para webs que no tienen un tráfico elevado o que no requieren un alto rendimiento.

# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions

RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

jQuery RWD images

Tal vez la más extendida es jQuery RWD images. Utiliza la técnica Redux Spacer (http://mattstow.com/experiment/responsive-images-redux/responsive-images-redux-jquery-plugin.html) y lo que hace, en términos sencillos, es mostrar una imagen distinta dependiendo del navegador y la resolución del dispositivo del usuario.

La clave está en utilizar la técnica de Radio Intrínseca para establecer que la altura de las imágenes respondan a un tamaño 0, y asignar un padding-bottom que es el resultado de (width / height) * 100. Luego, se inserta la imagen entre etiquetas <span> y crea un clon superpuesto de la imagen con opacity: 0 y mediante media-queries se va cambiando la imagen de fondo que mejor responde a la resolución del dispositivo del usuario.

<style>
    .rwd {
        background-attachment: scroll;
        background-clip: border-box;
        background-color: transparent;
        background-image: url("emperor-penguins-320.jpg");
        background-origin: padding-box;
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: contain;
        height: 0;
        max-width: 100%;
        padding-bottom: 65.4615%;
    }
</style>

<span style="display: inline-block;max-width:100%;position:relative;" class="rwd-wrap">
    <img width="1300" height="851" alt="A majestic line of Emperor penguins" class="rwd" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEHAAAALAAAAAABAAEAAAICRAEAOw==">
    <img width="1300" height="851" alt="A majestic line of Emperor penguins" class="rwd-swap" src="http://mattstow.com/experiment/responsive-images-redux/emperor-penguins-1300.jpg">
</span>

El ejemplo del código anterior lo podéis encontrar en Responsive Images Redux / Responsive Images Redux Jquery plugin.

Técnica Picturefill

Una opción menos extendida, pero que no funciona mal es Picturefill. Con esta técica se delega al javascript la elección de la imagen en función del tamaño de la ventana del elemento contenedor.

El comportamiento es sencillo, si no hay javascript, mediante la etiqueta noscript se carga la imagen. A través del atributo data-src se apunta a las imágenes que tenemos en el servidor y con el atributo data-media asignamos los tamaños mínimos de los elementos dónde se mostrarán.

<div data-picture="" data-alt="alt">
<div data-src="pequeña.jpg"></div>
<div data-src="mediana.jpg" data-media="(min-width: 400px)"></div>
<div data-src="grande.jpg" data-media="(min-width: 800px)"></div>
<div data-src="lamásgrande.jpg" data-media="(min-width: 1000px)"></div>
<noscript><img src="pequeña.jpg" alt="alt" /></noscript>
</div>

Técnica HiSRC

Otro plugin de jquery que está bastante extendido es HiSRC. Utiliza, dentro de los elementos <img>, unos atributos denomiados data-1x, data-2x, y sucesivos para vincular las imágenes que queremos mostrar en función de los tamaños del contenedor.

Además, este plugin tiene una cosa interesante que lo vamos a ver explicando cómo funciona. El navegador carga primero una imagen en formato para dispositivo móvil. Entonces HiSRC chequea si el dispositivo tiene el ancho de banda móvil (como la 3G), y si es así, deja la imagen como está. Si, por el contrario, hay una conexión de alta velocidad y el dispositivo puede soportar imágenes de alta resolución, la cambia por una de mayor calidad.

Técnica Responsive Images

Una técnica menos extendida es Responsive Images. Es muy parecida a la Técnica Adaptive Images, sólo que en vez de utilizar PHP, utiliza JavaScript. En el atributo src de la etiqueta <img> se van concatenando las rutas de las imágenes y javascript, junto con el .htaccess, hacen el resto.