Configurar breakpoints y estilos para generar un "picture" adaptable

Las imágenes forman una parte muy importante del diseño web adaptable. Se trata de que una sola dirección genera una sola página perfecta para un celular o una smart tv. Para el texto, los íconos o formas en svg o los contenedores, cambia de dimensión no implica cambiar de peso. Para las imágenes en mapa de bits, ya no tanto. Para una imagen de 1920px voy a consumir 8 veces más tráfico que para una de 480px. Pero no se trata solo de optimizar los tiempos de descarga, mejorando notablemente las prestaciones del sitio, claro, sino también la de adaptar el mismo contenido de la imagen al ojo del cliente.

Breakpoints en Drupal

Un breakpoint, o punto de quiebre, es una regla condicional que determina el momento en el cual serán aplicados los distintos parámetros en él incluidos para mejorar la presentación del contenido de la mejor manera posible. Para establecer puntos de quiebre se utilizan los media queries.

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}

En Drupal, los breakpoints se configuran en el archivo .info de cada theme.

; BREAKPOINTS
;---------------
; min-width: Refers to everything greater than or equal to the amount given.
; max-width: Refers to everything less than or equal to the amount given.

breakpoints[large]  = (min-width: 1200px)
breakpoints[medium] = (min-width: 992px)
breakpoints[small]  = (min-width: 768px)

El módulo breakpoints nos permitirá crear automáticamente un estilo para cada punto de quiebre tomando uno como referencia

Ahora que se dispone de un estilo de imagen para cada punto de quiebre, será necesario cambiar los efectos del estilo para generar imágenes más adecuadas para los diferentes puntos de quiebre. Por ejemplo, reducir las dimensiones de una imagen que se utilizará en el punto de quiebre "tablet".

El elemento picture

The HTML <picture> element is a container used to specified multiple <source> for a specific <img> contained in it. The browser will choose the most suitable source according to the current layout (constraints of the box the image will appear in) of the page and the device it will be displayed on (like a normal or hiDPI device).

En Drupal existe el módulo picture que se ocupa ni más de ni menos de llevar a la prática lo que bien describe el primer parráfo de mozilla developer network sobre el elemento picture. Este módulo agrega un nuevo widget para poder utilizarlo en los campos dentro un tipo de contenido o dentro una vista.

Para poder utilizar este widget será necesario crear un picture mapping. En un picture mapping se agrupan los distintos estilos de imagen creados anteriormente por breakpoints dentro un brekpoint group, como el de nuestro theme. Para cada breakpoint seleccionaremos el estilo de imagen más adecuado.

El resultado final, debería ser más o menos el siguiente:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source media="(max-width: 720px)" srcset="..._tablet_1x...jpg"></source>
  <source media="(max-width: 940px)" srcset="..._normal_1x...jpg"></source>
  <source media="(max-width: 1140px)" srcset="..._wide_1x...jpg"></source>
  <!--[if IE 9]></video><![endif]-->
  <!--[if lt IE 9]>
  <img typeof="foaf:Image" src="..._wide_1x...jpg" alt="" title="" />
  <![endif]-->
  <!--[if !lt IE 9]><!-->
  <img title="" alt="" srcset="..._wide_1x...jpg 1920w" src="..._wide_1x...jpg">
  <!-- <![endif]-->
</picture>

Enlaces externos

• Módulo Breakpoints
• Módulo Picture