Picture / WordPress, una imagen para cada resolución de pantalla

El desarrollo de proyectos web adaptables, nos obliga con cierta frecuencia a tirar de imaginación para que todo encaje correctamente en pantalla, independientemente de su resolución.  Cuando estos proyectos se basan en WordPress,  debemos   adaptarnos, adicionalmente,  a sus propias particularidades para que el resultado sea el esperado y la experiencia de usuario aporte un valor añadido a nuestros diseños.

Uno de los  principales retos que plantea este tipo de diseños, es la correcta gestión de imágenes  ya que,  habitualmente, los archivos gráficos representan la parte más importante del peso total de una página web. Cuando hablamos de gestionar imágenes, nos referimos a algo más que adaptarlas a un contenedor mediante css:

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

Este fragmento de código evita que las imágenes desborden su contenedor, permitiendo a las mismas adaptarse -encogiéndose o estirándose-, a las medidas del mismo. La propiedad height: auto; asegura que la relación de aspecto se conserve siempre que esto ocurra.

Ahora bien, estaremos de acuerdo en que una imagen de 1440x960px utilizada en un dispositivo móvil, independientemente de su formato, representa un enorme desperdicio de la tasa de transferencia, pudiendo llegar a afectar directamente a la experiencia de usuario.

Lo ideal es ofrecer imágenes de tamaños acordes a cada tipo de dispositivo y aquí es donde entra en juego el elemento picture que nos permite especificar varios elementos source y un elemento img para proveer de diferentes tamaños de una misma imagen a múltiples dispositivos. Para seleccionar la imagen óptima, el user agent examina cada atributo srcset, media, y type de la fuente para seleccionar la imagen compatible. Si no hay coincidencias con los elementos source, se utilizará el archivo especificado en los atributos src del elemento img. La imagen seleccionada es entonces presentada en el espacio ocupado por el elemento img.

 

Adaptándolo al loop de WordPress

El ejemplo inferior forma parte de la plantilla single de esta misma web.

<?php if ( have_posts() )  : the_post(); ?>
   <article id="post-<?php the_ID(); ?>">
   <?php $image_id = get_post_thumbnail_id();
      $img_src_mobile = wp_get_attachment_image_url( $image_id, '400x300' );
      $img_src_tablet = wp_get_attachment_image_url( $image_id, '900x600' );
      $img_src = wp_get_attachment_image_url( $image_id, '1440x1080' );
      $img_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true ); ?>
   <picture>
      <source media="(max-width:400px)" srcset="<?php echo esc_attr( $img_src_mobile ); ?>">
      <source media="(max-width:900px)" srcset="<?php echo esc_attr( $img_src_tablet); ?>">
      <source media="(min-width:901px)" srcset="<?php echo esc_attr( $img_src ); ?>">
      <img src="<?php echo esc_attr( $img_src ); ?>" alt="<?php echo esc_attr( $img_alt ); ?>"  style="width:auto;">
    </picture>
    <a href="<?php the_permalink(); ?>" rel="bookmark" title="Enlace permanente a <?php the_title_attribute(); ?>">
    <h1><?php the_title(); ?></h1></a>
      <p> <?php the_content(); ?></p>
    </article>

Creamos la variable $image_id que tomará el valor de  la id de  dicha imagen:

$image_id = get_post_thumbnail_id();

Determinamos los tamaños definidos para cada dispositivo:

$img_src_mobile = wp_get_attachment_image_url( $image_id, '400x300' ); 
$img_src_tablet = wp_get_attachment_image_url( $image_id, '900x600' ); 
$img_src = wp_get_attachment_image_url( $image_id, '1440x1080' ); 
$img_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true ); ?>

Y finalmente añadimos  picture con los valores anteriormente definidos

    <picture>
      <source media="(max-width:400px)" srcset="<?php echo esc_attr( $img_src_mobile ); ?>">
      <source media="(max-width:900px)" srcset="<?php echo esc_attr( $img_src_tablet); ?>">
      <source media="(min-width:901px)" srcset="<?php echo esc_attr( $img_src ); ?>">
      <img src="<?php echo esc_attr( $img_src ); ?>" alt="<?php echo esc_attr( $img_alt ); ?>"  style="width:auto;">
    </picture>