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:

<img src="image.jpg" srcset="image-300x188.jpg 300w, image-700x600.jpg 700w, image-1024x640.jpg 1024w, image-1200x750.jpg 1200w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px">

Los atributos srcset y 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.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!