Imágenes responsive

Existe un patrón de diseño que se llama 'Mobile First', este patrón consiste en que la imagen por defecto sea la que menor resolución tenga, lo que significa que sería la imagen que veriamos en un móvil.

Colocamos en la etiqueta img la dirección src de la imagen para dispositivos móviles.

<img src="imagen_dispositivo_movil.jpg" />

Si quisieramos tener en cuenta la calidad de pantalla retina de algunos smartphone, tendremos que indicar una nueva dirección de donde se encuentra el arhivo e indicar 2x, que significa que tiene el doble de resolución y el navegador lo entiende.

La nueva dirección la pondremos dentro del atributo srcset.

<img src="imagen_dispositivo_movil.jpg"      
     srcset="imagen_dispositivo_movil_HD.jpg 2x"      
/>

En el caso que sea una tablet sin pantalla retina y la pantalla del dispositivo es mayor de 768 píxeles, en este caso le añadimos el parámetro 768w.

<img src="imagen_dispositivo_movil.jpg"      
     srcset="imagen-dispositivo_movil_HD.jpg 2x,
         imagen-tablet.jpg 768w"   
/>

Como en el caso que ocurría en dispositivos móviles con pantalla de retina, para tablets de pantalla de retina sucede los mismo.

<img src="imagen_dispositivo_movil.jpg"      
     srcset="imagen-dispositivo_movil_HD.jpg 2x,
         imagen-tablet.jpg 768w",
         imagen_tablet_HD.jpg 768w 2x "   
/>

Y por último para monitores de ordenador sería:

<img src="imagen_dispositivo_movil.jpg"      
     srcset="imagen-dispositivo_movil_HD.jpg 2x,
         imagen-tablet.jpg 768w",
         imagen_tablet_HD.jpg 768w 2x ,
         imagen_ordenador.jpg 1200w,
         imagen_ordenador_HD.jpg 1200w x2"   
/>

Otra forma de hacerlo sería con la etiqueta picture , con esta etiqueta sólo se tiene en cuenta el tamaño del monitor no la resolución.

Con el atributo media indicaremos los tamaños que se aplican los archivos. En nuestro caso ponemos que  a partir del tamaño indicado min-width se aplica el archivo de imagen deseado.

 

<picture>  
  <source media="(min-width: 1200px)"
          srcset= "imagen_grande.jpg,
                   imagen_grande-2x.jpg 2x" >
  <source media="(min-width: 768px)"
​          srcset="imagen_tablet.jpg,
                  imagen_tablet-2x.jpg 2x">
  <img src="imagen_movil.jpg" 
       srcset="imagen_movil-2x.jpg 2x"
       alt ="image">
</picture>

 

Otro atributo que podemos utilizar es sizes , es como tener la intención de dimensionar una determinada imagen en CSS, solo se lo informando porque es posible que necesite esta información en este momento y no pueda esperar a que CSS se descargue primero.

<img srcset="img/nat-1.jpg 300w,  img/nat-1-large.jpg 1000w"

                             sizes="(max-width: 900px) 20vw,                                                                                         (max-width: 600px) 30vw,                                                                                          300px"

                             alt="Photo 1"

                             class="composition__photo composition__photo--p1"

                             src="img/nat-1-large.jpg">

*src  lo utilizamos para el caso de utilizar un navegador que no soporte el uso de srcset

*sizes  de los tamaños utilizados, el último es el que se utilizará por defecto.

  1. Carlos Azaustre https://carlosazaustre.es/blog/imagenes-responsive/
  2. npm https://www.npmjs.com/package/gulp-image-optimization
  3. squosh https://squoosh.app 

Además tenemos aplicaciones que nos permiten optimizar nuestros archivos de imagen. En estos dos enlaces tenemos dos ejemplos de hacerlo con gulp.

Otro aspecto a tener en cuenta es redimensionar nuestras imágenes en el contenedor donde se encuentra para que las medidas de la imagen se vaya adaptando al contenedor.

Cómo lo haremos, definiendo las medidas de la imagen en %:

#contenedor img{width: 100%}

Si quisiéramos que nuestra imagen no se encuentre pixelada, por redimensionar a un tamaño superior a la que tiene, usaremos:

#contenedor img{max-width: 100%}

Nuestra imagen si tiene unas medidas de 400px * 300px, con el estilo anterior aunque el contenedor tenga mayor medida de ancho, nuestra imagen sólo se redimensionará hasta el tamaño de 400px.

Para el caso de la altura, es más sencillo y siempre le damos menos importancia respecto al width:

#contenedor img{height: auto}

Agradecimientos y enlaces en que nos hemos basado 

  1.  http://caniuse.com/#feat=picture
  2.   http://caniuse.com/#feat=srcset
  3. Carlos Azaustre https://carlosazaustre.es/blog/imagenes-responsive/
  4. Developers Google https://developers.google.com/web/fundamentals/design-and-ui/media/images?hl=en#optimize-images-for-performance
  5. CSS tricks https://css-tricks.com/responsive-images-css/

Para más slides sobre CSS:

https://bermartinv.github.io/css/files/taller/menu_taller.html