Imágenes en el Responsive Web Design

Los principios básicos de un Responsive Web Design (RWD) es la fluidez y la adaptabilidad. El diseño es ahora fluido, eso no solo influye en el tamaño de las capas, sino también en las tipografías y las imágenes. Todo ello ahora es proporcional.

Pero … ¿Hay un problema en el paraíso?. SI

Las capas y las tipografías se adaptan fácilmente, pero el problema está en las imágenes.

Imágenes Responsive

Primero definamos como se ha de tratar las imágenes en el RWD.

En una maquetación que se ajuste a los principios del Responsive Web Design las imágenes no tienen tamaño y se adaptan al tamaño de su capa contenedora. Eso quiere decir que si la capa crece la imagen crece y si la capa disminuye la imagen también. Pero ¿que pasa cuando una imagen la haces mas grande que su tamaño original?, pues que pierde calidad, desenfocándose. Por ello la mejor solución es el max-width que nos permite definir un ancho máximo a nuestras imágenes.

img {max-width: 100%; height: auto;}

Para las versiones de Explorer (ie6, ie7) que no son capaces de leer max-width (como no) hay que especificarles un ancho img {width:100%}

Problema de la imagen en el RWD

¿Qué ocurre cuando cargamos una imagen pensada para una definición de pantalla de 1024px en una pantalla de 320px?

Que se producen 2 problemas.

  • El peso. Si la imagen pesa 120 kb a 1024px, pesa lo mismo a 320px. La velocidad de carga de una imagen en un dispositivo móvil es un verdadero problema y hace que nuestra web no sea todo lo Responsive que queremos.¿Cual es la solución?

    A nivel conceptual es que cada imagen tenga de 3 a 5 resoluciones diferentes y que según la definición de pantalla del dispositivo cargue una u otra.

    A nivel práctico eso es más difícil. A día de hoy no existe un sistema que no tenga problemas de dependencia. El HTML5 o CSS3 no tienen ninguna etiqueta que resuelva este problema. Se esta trabajando en ello en W3C y hay propuestas interesantes pero aún esta muy verde. La que más apoyo ha tendido ha sido la de crear un tag nuevo basado en el actual tag <video> que sea <picture>.

    <picture alt="Texto alt de la imagen responsive">
    <source src="mobile.jpg" />
    <source src="large.jpg" media="min-width: 600px" />
    <img src="mobile.jpg" />
    </picture>

  • Porque es posible que la imagen a 320px no sea la misma que la de 1024px sino una “porción”de esta, enfatizando una parte de esa imagen.Imagen escalada versus imagen adaptable

Soluciones actuales

A día de hoy hay unas 20 diferentes soluciones al problema de las imágenes que nosotros hayamos encontrado. Cada una de ellas tiene ventajas e inconvenientes que hay que tener en cuenta para escoger la idónea a cada proyecto. Estas soluciones miran de resolverlo utilizando la combinación de diferentes estrategias: JavaScript + PHP, PHP + Cookie o htaccess + PHP por ejemplo.

Os incluimos algunas de ellas para que podáis tomarlas como referencia.

jQuery rwdImages

https://github.com/stowball/jQuery-rwdImages
Combina un plugin de jquery con los Media Queries y una imagen en base64.

Sencha.io Src

http://www.sencha.com/products/io/
Originalmente se llamaba TinySRC . Detecta el dispositivo y el tamaño del mismo automáticamente o puedes especificarle tu las medidas. Le envías una imagen y te la devuelve optimizada. El problema es la dependencia de una web externa.

adaptive-images.com

http://adaptive-images.com/
Un clásico. Combina cookie creada con javascript más el htaccess con PHP que carga la imagen al tamaño de resolución de pantalla del dispositivo o sino la tiene (la imagen) la crea para que el siguiente usuario la visualice más rápido. Lo que ahorra tener que pensar en cada resolución o nuevo dispositivo.

3 pensamientos en “Imágenes en el Responsive Web Design

  1. Pingback: Imágenes en el Responsive Web Design « Victobit's Blog

  2. Pingback: RWD « Clinks

  3. Pingback: HTML5, SEO y el algoritmo de Scooby Doo | Blog SEOCOM

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>