Cómo desactivar el responsive automático de imágenes de WordPress

Desde la versión 4.4 WordPress añade automáticamente el atributo

srcset

a las imágenes de tu contenido.

El atributo

srcset

te permite definir diferentes imágenes para usar en diferentes puntos de ruptura del navegador, y así ofrecer distintas imágenes según el dispositivo.

Ejemplo:

Los atributos

srcset

sizes

contienen la información que le indica al navegador qué tamaño de imagen es mejor para cada tamaño (punto de ruptura, o viewport) del dispositivo desde el que se visite la página.

Una explicación en detalle:

  • scrset:  Si el ancho de la imagen es de 300px o menos entonces el navegador cargará y mostrará image-300×188.jpg, si es de más de 300px pero menos de 700px — image-700×600.jpg, etc.
  • sizes: Ancho máximo de la imagen para la media query dada, es como una declaración
    if

    en la que si el viewport es de 709px o menos, el ancho máximo de la imagen es el 85% del viewport, si ninguno de los argumentos se cumple entonces el ancho de la imagen será de 840px.

¿Cómo funciona el atributo srcset de WordPress?

WordPress utiliza

the_content

para añadir los atributos de adaptabilidad a las imágenes que hayas subido:

  • Si tu imagen tiene una clase
    wp-image-{ATTACHMENT_ID}

    .

  • Si tu imagen no tiene ya un atributo
    scrset

    .

Entonces ¿cuál es el problema? ¿No es mejor que sean responsive?

El problema aparece cuando usas una CDN del tipo Amazon S3 o Jetpack Photon para entregar tus imágenes, y entonces resulta que tienes unas URLs de imágenes alojadas en tu CDN y los atributos srcset de sus copias en tu alojamiento.

Entonces esas imágenes de tu servidor funcionarán en dispositivos móviles pero no en tamaños de ordenador de escritorio.

No es mi caso ¿hay más motivos para desactivar el responsive automático de imágenes de WordPress?

Pues claro, yo no soy anti-responsive, aquí tienes unas cuantas razones por las que podrías querer desactivar el responsive automático de imágenes de WordPress:

  • No todos los sitios quieren o necesitan imágenes responsive.
  • No todos los usuarios quieren o necesitan que WordPress lo haga todo por ellos.
  • Porque las soluciones generalizadas no se adaptan al 100% de usuarios y posibles escenarios.
  • Porque hay muchas maneras diferentes de entregar imágenes responsive.
  • Porque el método de WordPress no funciona en todas las situaciones.
  • Porque hay usuarios que prefieren implementar sus propias soluciones responsive.
  • Porque el método de WordPress genera tamaños adicionales de imagen para cada imagen subida, lo que consume espacio y recursos.

¿Cómo desactivo el responsive automático de WordPress en ciertas imágenes?

Puedes hacerlo con el gancho WordPress en

wp_calculate_image_srcset

.

Este filtro te ofrece 5 argumentos:

  • $sources Uno o más arrays datos de origen a incluir en
    srcset
  • $size_array Array de los valores de anchura y altura en píxeles (en ese orden).
  • $image_src El origen de la imagen.
  • $image_meta Los metadatos de la imagen devueltos por
    wp_get_attachment_metadata()
  • $attachment_id El
    post_id

    de la imagen

Aquí tienes un código de ejemplo que puedes usar en el archivo

function.php

de tu tema o en un plugin personal para adaptarlo a tu necesidad:

add_filter( 'wp_calculate_image_srcset', 'my_custom_image_srcset', 10, 5);
function my_custom_image_srcset($sources, $size_array, $image_src, $image_meta, $attachment_id) {
// El siguiente código es una adaptación de wp-includes/media.php:1061-1180
$image_sizes = $image_meta['sizes'];
// Obtenemos ancho y alto de la imagen.
$image_width = (int) $size_array[0];
$image_height = (int) $size_array[1];
$image_basename = wp_basename( $image_meta['file'] );
/*
*Para evitar errores raros en WP con los gifs animados
*/
if ( ! isset( $image_sizes['thumbnail']['mime-type'] ) || 'image/gif' !== $image_sizes['thumbnail']['mime-type'] ) {
$image_sizes[] = array(
'width'  => $image_meta['width'],
'height' => $image_meta['height'],
'file'   => $image_basename,
);
} elseif ( strpos( $image_src, $image_meta['file'] ) ) {
return false;
}
// Recuperamos el subditectorio de subidas a partir de la imagen completa.
$dirname = _wp_get_attachment_relative_path( $image_meta['file'] );
if ( $dirname ) {
$dirname = trailingslashit( $dirname );
}
$upload_dir = wp_get_upload_dir();
$image_baseurl = trailingslashit( $upload_dir['baseurl'] ) . $dirname;
/*
* Mejor si es HTTPS
*/
if ( is_ssl() && 'https' !== substr( $image_baseurl, 0, 5 ) && parse_url( $image_baseurl, PHP_URL_HOST ) === $_SERVER['HTTP_HOST'] ) {
$image_baseurl = set_url_scheme( $image_baseurl, 'https' );
}
/*
* Filtramos imágenes que sean residuos de versiones anteriores.
*/
$image_edited = preg_match( '/-e[0-9]{13}/', wp_basename( $image_src ), $image_edit_hash );
/**
* Filtramos el ancho máximo a incluir en el atributo srcset.
* @since 4.4.0
* @param int   $max_width  El ancho máximo de imagen a incluir srcset. Por defecto es '1600'.
* @param array $size_array Array de valores de ancho y alto en píxeles (en ese orden).
*/
$max_srcset_image_width = apply_filters( 'max_srcset_image_width', 1600, $size_array );
// Array para mantener las URLs.
$sources = array();
/**
* Prevención de errores.
*/
$src_matched = false;
/*
* Loop de las imágenes disponibles. Solo usa imágenes que sean versiones redimensionadas
*/
foreach ( $image_sizes as $identifier => $image ) {
// Seguimos si no hace falta el identificador
if ($identifier === 'unwanted-identifier') {
continue;
}
$is_src = false;
// Comprobamos que los datos meta de la imagen no estén corruptos.
if ( ! is_array( $image ) ) {
continue;
}
// Confirmamos que el nombre de archivo sea parte del src.
if ( ! $src_matched && false !== strpos( $image_src, $dirname . $image['file'] ) ) {
$src_matched = $is_src = true;
}
// Filtramos imágenes de anteriores modifiaciones.
if ( $image_edited && ! strpos( $image['file'], $image_edit_hash[0] ) ) {
continue;
}
/*
* Filtramos imágenes del mismo ancho que '$max_srcset_image_width' salvo que
* el archivo esté en el atributo 'src'.
*/
if ( $max_srcset_image_width && $image['width'] > $max_srcset_image_width && ! $is_src ) {
continue;
}
// Si las dimensiones de la imagen están dentro del tamaño esperado en más menos 1px la usamos.
if ( wp_image_matches_ratio( $image_width, $image_height, $image['width'], $image['height'] ) ) {
// Añadimos URL, descriptor y valor al array de orígenes a devolver.
$source = array(
'url'        => $image_baseurl . $image['file'],
'descriptor' => 'w',
'value'      => $image['width'],
);
// El 'src' de la imagen tiene que ser el primero en el 'srcset' debido a un fallo en iOS8.
if ( $is_src ) {
$sources = array( $image['width'] => $source ) + $sources;
} else {
$sources[ $image['width'] ] = $source;
}
}
}
return $sources;
}

¿Cómo desactivo completamente el responsive automático de WordPress?

Si tienes claro que no quieres el responsive automático de imágenes de WordPress, del todo, simplemente añade esto a tu plugin personal o al archivo functions.php del tema:

remove_filter( 'the_content', 'wp_make_content_images_responsive' );

¿No hay algún plugin majete para desactivar esto?

Claro, siempre, en este caso se llama Disable Responsive Images Complete. Una vez instalado y activo (no hay opciones) hace esto:

  • Desactiva las imágenes responsive en la parte visible de la web.
  • Desactiva la creación del tamaño de imagen 
    medium_large

    de 768px

  • Totalmente listo para funcionar, sin tener que configurar nada.

A partir de aquí tú tienes la libertad, y responsabilidad, de aplicar el método de adaptación a dispositivos (responsive) que consideres más efectivo en tu caso, sin que WordPress lo haga por ti.

La entrada Cómo desactivar el responsive automático de imágenes de WordPress la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Laura D´Cuero

Copywriter, Redactora de Content SEO.
Laura D´Cuero
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *