Imágenes Responsive - Picturefill Polyfill

Una parte muy importante de la web son las imágenes y cómo se usan en webs responsive.

Lo primero que tenemos que tener en cuenta es que si queremos que una imagen se escale al hacer responsive tenemos que añadir el siguiente CSS:

img {   
   display:block;
   width:100%;
   heigh:auto;
}

Las etiquetas <img> o <picture> en realidad son contenedores y vamos a mostrar unas imágenes u otras dependiendo de viewport o la densidad de píxel del dispositivo a través de estos nuevos parámetros de HTML5.

srcset > sourceset permite añadir mas de una fuente url separada por coma.
w  >      ancho del viewport
b >        densidad de pixel
sizes >  tamaños


Como podemos ver en www.caniuse.com apenas lo soportan los navegadores, pero no hay que preocuparse ya que lo solucionaremos con el polyfill Picturefill

Imaginemos una imagen de 1300px de ancho que ocupa la cabecera. Si queremos dar soporte a pantallas 2K, tendríamos que guardar una imagen de 2600px de ancho y para pantallas 3K, 3900px. Siempre que hablamos de imágenes en la web tenemos que vigilar los tiempos de carga y lo que vamos a hacer es suministrar diferentes imágenes dependiendo de la densidad de píxeles del dispositivo.

<img

   srcset="img/imagen-3k.jpg 3x,
           img/imagen-2k.jpg 2x,
           img/imagen-1k.jpg 1x"

   src="img/imagen-1k.jpg"
   alt="descripcion de la foto."

/>

Como podéis ver simplemente añadimos el srcset con las rutas de las imágenes separadas por comas y con los parámetros 1x 2x 3x. También  añadimos un src por si falla el polyfill.

Por último deciros que los JPG 2K y 3K se pueden comprimir a 40 de calidad sin que se pierda calidad.

También podemos suministrar imágenes dependiendo del ancho de pantalla del dispositivo

<img

   srcset="img/imagen-grande.jpg 2048w,            
           img/imagen-media.jpg 1400w,
           img/imagen-baja.jpg 800w"

   src="http://img/imagen-grande.jpg 2048w"                    
   alt="descripcion de la foto."

/>

Volvemos a hacer lo mismo pero esta vez añadimos los 2048w 1400w 800w correspondientes a los puntos de corte que queremos y que coinciden con los tamaños de las imágenes proporcionadas.

Por último solo nos queda mostrar el atributo Sizes, que nos va a ayudar con las imágenes que no ocupan todo el ancho de la pantalla, ya que los cálculos se hacen respecto a todo el ancho del viewport. La nomenclatura de sizes es la siguiente (condición media querie) (tamaño de pixel CSS, VW) (tamaño de ancho sin condición media querie).

<img 

   srcset="img/imagen-grande.jpg 2048w,            
           img/imagen-media.jpg 1400w,
           img/imagen-baja.jpg 800w"
           sizes="(min-width: 1024px) 1024px, 100vw"

   src="img/imagen-grande.jpg 2048w"                    
   alt="descripcion de la foto."

/>

Una práctica muy usada es cambiar una imagen de un banner rectangular por una de un cuadrado en la versión móvil. Esto lo podemos hacer mediante <picture>, <source> y el atributo media, que admite los mismos valores que las media queries de CSS, como por ejemplo orientation, max-width, min-width, max-height y min-height.

<picture>

   <source
   media="(orientation: landscape)"
   srcset="img/banner-grande.jpg 2048w,            
           img/banner-media.jpg 1400w,
           img/banner-baja.jpg 800w"
 />
   
   <source
   srcset="img/banner-cuadrado-grande.jpg 1000w,
          img/banner-cuadrado-media.jpg 800w"      
   />

   <img
    src="img/banner-media.jpg"
    alt="descripcion de la foto."
   />

</picture>

Os hemos dejado unos ejemplos en nuestro CodePen.

See the Pen Imágenes Responsive (densidad de píxeles) by Pedro Marín (@pedromarin) on CodePen.