Diseño web adaptativo de imagenes con Picturefill

Introducción

Cliente Web NCSA Mosaic

Desde los inicios de la web donde el contenido era esencialmente texto y enlaces a contenidos relacionados , los sitios web han evolucionado a diseños más visuales e intuitivos para los usuarios,  las web actuales suelen contener imágenes de alta resolución (galerías de imágenes, inicio de la página, etc…).

El diseño adaptativo requiere que las imágenes se adapten a los tamaños de pantalla de los dispositivos modernos que cada vez usamos más asiduamente para navegar (tablets, smartphones, etc…)

Resoluciones basadas en dispositivos

Redimensión básica de imágenes

Las imágenes (que tienen unas dimensiones determinadas) pueden ser redimensionadas con un poco de CSS (Para las pruebas usaremos una imagen de 1920×1080 pixels cortesía de http://georgespigot.wordpress.com/tag/mars-attacks/.

<img src=”img/mars_attack.jpg” width=”1920″ height=”1080″ alt=”Mars Attack by George Spigot”>

Con estas propiedades de la imagen cuando redimensionamos la ventana del navegador la imagen no cambia y debemos usar el scroll para verla.

Añadiendo la regla de estilo:

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

Conseguimos que la imagen ocupe el tamaño proporcional ocupando siempre el sitio disponible  del elemento contenedor (el 100% de ancho, el alto se ajustara proporcionalmente para que no se deforme), si redimensionamos la ventana del navegador veremos como la imagen se  ajusta al ancho disponible.

CSS: max-width y min-width

En pantallas muy grandes (o muy pequeñas), podemos limitar el tamaño máximo y mínimo de imagen,

img {
width: 100%;

height: auto;

max-width: 1920px;
 min-width: 500px;
 outline: black solid thin;
 }

Con esto conservamos la calidad de la imagen dentro de lo permisible, por un lado se evita que la imagen supere un tamaño máximo (su tamaño real) y por lo  tanto no pierda calidad al sobredimensionarse. Con min-width la imagen no disminuirá por debajo de un tamaño que haga perder detalles al ser demasiado pequeña.

Picturefill

En el ejemplo anterior la imagen se descarga completamente del servidor sea cual sea su tamaño final en el dispositivo que usamos para visualizarla (esto repercute en en el tiempo de descarga y la información es desperdiciada)

Picturefill basada en Javascript que permite servir imágenes diferentes en función del tamaño del dispositivo.

Ejemplo:

Para el ejemplo vamos a usar la imagen anterior (1920x1080px) creando 3 versiones  de la misma en diferentes tamaños.

<span data-picture data-alt="Mars Attack">
            <span data-src="./img/mars_attack.jpg"></span> 
            <span data-src="./img/mars_attack-1.jpg" data-media="(min-width: 768px)"></span>               
            <span data-src="./img/mars_attack-2.jpg" data-media="(min-width: 1024px)"></span>               
            <span data-src="./img/mars_attack-3.jpg" data-media="(min-width: 1068px)"></span>               

            <noscript>
                <img src="img/mars_attack.jpg" width="1920" height="1080" alt="Mars Attack by George Spigot">
            </noscript>
        </span>        

Demo

https://googledrive.com/host/0B71P8OK3I_z0LTY0bGFtZ1BLQ2s/test_02.html

Anuncios

Un pensamiento en “Diseño web adaptativo de imagenes con Picturefill

  1. Pingback: Diseño Web adaptativo con CSS3 media queries | Internet y GNU/Linux

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s