Imágenes Responsivas

Este último tiempo se esta hablando mucho de los sitios mobile-friendly, esto porque Google ha señalado que a partir del 21 de abril los sitios aptos para móviles tendrán un mejor posicionamiento en los resultados de búsqueda o en otras palabras, los sitios no óptimos para dispositivos móviles se verán penalizados en su posicionamiento en los resultados del buscador.

Como señale en anteriormente el tiempo en que responde nuestra web a las solicitudes, tanto de Google como de los propios visitantes al sitio, afecta directamente en el posicionamiento, tanto en escritorio como en dispositivos móviles, y uno de los puntos más críticos en cuanto a ésto son las imágenes, nadie puede desmentir que gran parte, en cuanto a peso, de lo que es necesario que el navegador descargue para poder mostrar una página web son las imágenes, a día de hoy esto equivale a un 63%.

A día de hoy, en que el Diseño Responsivo ya es parte integral del diseño web y que existen innumerables resoluciones de pantalla diferentes junto con las opciones retina de algunos dispositivos la pregunta va por que tamaña de imagen utilizar, o más bien hoy en día, como mostrar la imagen adecuada a la resolución o dispositivo adecuado, la respuesta esta dada por las Imágenes Responsivas.

Imágenes Responsivas en Fondos.

Desde hace mucho que son utilizadas imágenes en fondos de páginas web, casi desde que comenzó su uso en la web, estas imágenes, que cumplen una función más bien accesoria o puramente de diseño han de ser manejadas por las hojas de estilo en cascada (CSS) y desde que comenzó el uso del Diseño Responsivo, es posible mostrar diferentes imágenes de acuerdo a la resolución de pantalla presente en el dispositivo que se este utilizando; esto, gracias a los media-queries.

.header {
  background-image: url(../images/top-s.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media only screen and (min-width: 1030px) {
.header {
  background-image: url(../images/top-xxl.jpg);
 }
}
@media only screen and (min-width: 768px)
.header {
  background-image: url(../images/top-xl.jpg);
 }
}

Imágenes Fluidas

Viendo la forma de mostrar imágenes responsivas en fondos se podría llegar a pensar en utilizar esa forma para todas la imágenes de un sitio web, pero no todas las imágenes que conforman una pagina web son elementos de diseño, algunas son parte integral del contenido de dicha pagina web.

En la gran mayoría de los sitio web, incluidos los realizados con WordPress se realiza una adaptación de las medidas de la imagen hacia porcentajes del elemento que las contiene; que por lo general, en un diseño fluido esta realizado en porcentaje.

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

En el caso que la imagen disponible tenga una cierta medida habría que limitar la fluidez de la misma ha ese tamaño máximo, reemplazando lo anterior, respetando el tamaño de la imagen provisto por el codigo html

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

Pero esta técnica para mostrar las imágenes no es propiamente tal una muestra de lo que es o son las imágenes responsivas.

Imágenes Responsivas en el Contenido.

El gran inconveniente de las imágenes fluidas es la necesidad de utilizar una imagen muy grande, especialmente cuando tenemos en mente los dispositivos retina, que para un dispositivo con una resolución pequeña, y por cierto, no retina junto con una conexión a Internet por medio de redes móviles como 2G o 3G, la descarga de los datos se haría eterna; por el contrario la utilizacion de imágenes con bajas resoluciones en dispositivos con alta resolucion y en especial los retinas, dichas imágenes se verían muy pixeladas.

Normalmente la etiqueta <img> la hemos visto así, he obviado los atributos del tamaño y el texto alternativo, los que nunca han de faltar:

<img src="default.jpg" />

Hoy en día es posible utilizar diferentes resoluciones en una determinada imagen a mostrar como parte del contenido de una pagina web, esto gracias a atributos como srcset y sizes y a la etiqueta <picture>.

srcset y sizes

Con estos dos atributos de la etiqueta <img> podemos señalarle al navegador que existen otras imágenes que reemplazan a la por defecto en determinadas resoluciones de pantalla

<img src="foto-m.jpg" 
     srcset="foto-s.jpg 480w,
             foto-m.jpg 768w,
             foto-l.jpg 1024w, 
             foto-2x.jpg 1024w 2x" 
     sizes="(min-width: 1024px) 80vw, 100vw"
/>

Desmenuzando lo anterior, el src de toda la vida señala la imagen por defecto, la misma que se va a mostrar en los navegadores que no soportan los atributos srcset y sizes y que es fluida gracias al CSS expuesto más arriba.

En srcset van las diferentes imágenes (foto-s.jpg) con la resolución de pantalla respectiva (480w) separadas por comas, en el caso de las imágenes para dispositivos retina o que sean high-DPI hay que agregar un nuevo valor (2x) el cual representa cuantos pixeles existen en la pantalla por cada pixel «normal».

Con sizes podemos decirle al navegador cuanto ocupar con la imagen, en el caso del ejemplo, en resoluciones de pantalla / ventana mayores a 1024px mostrar la imagen utilizando un 80% de ancho disponible (min-width: 1024px) 80vw, en todas las otras ocasiones ocupar el 100% (100vw)

Picture

Si bien con los atributos srcset y sizes podemos hacer que una imagen realmente sea responsiva, muchas veces es necesario utilizar otros criterios, lo que hace que sea un poco más complejo y por ende necesaria la utilización de la etiqueta <picture>

En lo básico, y utilizando un formato nuevo de imagen, seria algo asi,

<picture>
   <source
      srcset="foto.webp"
      type="image/webp">
   <img src="foto.jpg" alt="Foto de prueba" />
</picture>

Gracias a la etiqueta <picture> es posible combinar diferentes formatos de imagen (jpg, webp, png), diferentes resoluciones y densidades de pantalla y de acuerdo a diferentes criterios artísticos o dirección de arte.

<picture>
    <source
        type="image/webp"
        media="(min-width: 36em)"
        srcset="foto-l.webp  1920w,
                foto-m.webp  960w,
                foto-s.webp   480w" />
    <source
        media="(min-width: 36em)"
        srcset="foto-l.jpg  1920w,
                foto-m.jpg  960w,
                foto-s.jpg   480w" />
    <source
        type="image/webp"
        srcset="foto-l-det.webp   822w,
                foto-m-det.webp  640w,
                foto-s-det.webp   320w" />
    <source
        srcset="foto-l-det.jpg   822w,
                foto-m-det.jpg  640w,
                foto-s-det.jpg   320w" />
    <img
        src="foto-m.jpg"
        alt="Detalle del producto." />
</picture>

En este caso existen una imagen con 3 diferentes tamaños (foto-l, foto-m y foto-s) que a su vez esta en dos formatos diferentes, el .jpg de toda la vida y el nuevo formato para imágenes .webp, el cual logra una mejor optimizacion para la web, pero aun no todos los navegadores lo soportan.

También encontramos que existe una versión de un área de la imagen principal, en sus respectivos 3 tamaños (foto-l-det, foto-m-det y foto-s-det) y sus dos formatos (.jpg y .webp).

La imagen completa solo se muestra cuando el ancho de la venta es superior a 36em, bajo esa medida se muestra solo la imagen creada como detalle de la principal.

Y por último se incorpora la etiqueta <img> con la imagen por defecto.

En WordPress

Para imágenes de fondo solo basta con editar la capa de estilo del template que se este utilizando, una forma sencilla es utilizar el plugin Simple Custom CSS, luego de instalarlo y activarlo te diriges a Apariencia -> Custom CSS.

En el caso de las imágenes en el contenido, actualmente estoy utilizando Post Script Responsive Images, que genera de forma automática los atributos srcset y size de la etiqueta <img> junto con las respectivas imágenes. Anteriormente he utilizado responsify-wp, el que tiene mucho más opciones y utiliza las mismas imágenes que genera WordPress pero me genero algunos errores cuando active el SSL a través de Cloudflare, no me mostraba las imágenes debido al cambio de protocolo,

Gracias a la gente que trabaja en que WordPress cada día sea mejor, estos últimos plugins ya no son necesarios y es el propio WordPress el encargado de mostrar la imagen con el tamaño adecuado y utilizando srcset y size desde la versión 4.4

Palabras al Cierre

Como siempre estoy atento a tus dudas a través de los Comentarios, del Formulario del blog y en mi Twitter. No dudes en compartir este articulo en tus redes sociales, te lo agradecería un montón.