Por el momento no tenemos ninguna etiqueta en HTML que sirva para adaptar las imágenes a las diferentes resoluciones y dispositivos que pueblan el mercado, ya sean smartphones, tabletas o monitores. En

RICG(Responsive Images Comunity Group) han propuesto una etiqueta y un atributo para adaptar las imágenes pero las cosas de palacio van despacio, muy despacio.

ETIQUETA PICTURE

1
2
3
4
5
<picture>
  <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
  <source srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

ATRIBUTO SRCSET

1
<img src="fallback.jpg" alt="" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, med.jpg 1x, med-hd.jpg 2x ">

Si alguien esta interesado en seguir la evolución puede apuntarse a la lista de correo: http://list.responsiveimages.org

Mientras se busca una solución para servir imágenes según la resolución del dispositivo podemos aprovechar los diferentes recursos gratuitos de los que disponemos.

Picturefill por Scott Jehl

Cuando me ha hecho falta adaptar las imágenes siempre he recurrido a Picturefill para mí es la mejor solución y su puesta en funcionamiento es bastante sencilla.

Lo primero una aclaración, cuando nos descargamos Picturefill de GitHub incluso en la propia página el ejemplo va en pixeles, yo prefiero utilizar EM, si alguien quiere seguir utilizando pixeles para el Responsive le invito a que se lea este artículo de CloudBlog y seguro que cambia de opinión.

Antes de nada tenemos que tener preparadas nuestras imágenes para las diferentes medidas, estas medidas que pongo son perfectamente modificables para el caso y gusto de cada uno.

Para el data-media=”(min-width:30em) utilizaremos “fondomedium.jpg” 500 × 156 pixeles.
Para el data-media=”(min-width:48em) utilizaremos “fondolarge.jpg” 800 × 250 pixeles.
Para el data-media=”(min-width:64em) utilizaremos “fondojorgeatgu.jpg” 1024 × 319 pixeles.

En el caso de que ningún dispositivo sea superior a 30em se servirá “fondosmall.jpg”

Ahora vamos a incluir este código en nuestro **HTML **.

1
2
3
4
5
6
7
8
9
10
<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
        <div data-picture data-alt="portada JORGEATGU">
      <div data-src="img/fondosmall.jpg"></div>
      <div data-src="img/fondomedium.jpg" data-media="(min-width:30em)"></div>
      <div data-src="img/fondolarge.jpg" data-media="(min-width:48em)"></div>
      <div data-src="img/fondojorgeatgu.jpg" data-media="(min-width:64em)"></div>

      <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
      <noscript><img src="img/fondojorgeatgu.jpg" alt="portada JORGEATGU"></noscript>
</div>

En el atributo data-src indicaremos la ruta que lleva a nuestra imagen. En el data-media indicaremos la medida en EM. Con un mind-width: 30em le estamos diciendo que sirva la imagen a los dispositivos que tengan mas de 30em, y lo mismo para el resto de data-media.

También hay soporte para IE8 pero no malgastare mucho tiempo, si alguien quiere implementarlo puede acceder a la información en la página de Picturefill.

Aquí podemos ver el ejemplo que hemos hecho, simplemente redimensionar vuestro navegador y veremos como la imagen se va modificando.

VER EJEMPLO!

En la web de Scott podemos ver Picturefill en funcionamiento, simplemente redimensionar vuestro navegador y veremos como la imagen se va modificando.

Adaptive Images por Matt Wilcox.

Es otra solución para servir imágenes según la resolución del dispositivo, en este recurso a parte de utilizar JavaScript también modificaremos el .htacces y añadiremos un archivo .php el proceso no requiere mayor complejidad y en la propia página nos indica perfectamente los pasos a seguir para su puesta en funcionamiento.

Adaptive Images Web