Cómo optimizar WordPress solucionando el error de «serve scaled images»

Uno de los errores más comunes que muestran los analizadores de velocidad web como GTMetrix y Google PageSpeed es el conocido como «serve scaled images«, muy típico en sitios dinámicos creados con WordPress y otros CMS.

¿Qué es eso del «serve scaled images»?

Básicamente lo que nos dice el chivato es que estamos redimensionando imágenes más grandes (o pequeñas) mediante modificadores de marcado HTML en vez de servir la imagen adecuada a cada resolución de pantalla.

O sea, que si tienes una imagen de 1600×1200 píxeles la estás mostrando pero redimensionada por HTML a, digamos, 800×600 o lo que tu tema activo haga con las imágenes grandes para adaptarlas al ancho máximo de sus bloques de contenido definidos en la hoja de estilos CSS.

De este modo, la imagen que se carga es la original, de 1600×1200 pero con parámetros de código que hacen que se muestre más pequeña.

Vamos, que si necesitas una imagen de 250×250 no muestres una de 500×500 redimensionada por algún método.

El resultado es que no solo cargamos una imagen grande, enorme, innecesaria para la mayoría de dispositivos, no digamos los móviles, ya que el tema solo muestra un ancho mucho menor, sino que además el código lleva cadenas adicionales que también hacen que la página pese más.

Uno de los culpables habituales es la imagen destacada de tus entradas, pues no somos conscientes la mayoría de las ocasiones de que nuestro tema las redimensiona al tamaño que tenga definido por defecto para que se vean bien.

¿Y cómo se arregla?

En realidad es bastante sencillo, la regla es la siguiente:

Usa imágenes del tamaño adecuado

Pero vale, no es tán fácil hacerlo como decirlo, pero tampoco es difícil, y tenemos varias posibilidades…

Sube las imágenes al tamaño adecuado

¿Para qué complicarnos con códigos y apaños si podemos hacer las cosas bien desde el principio?

Lo ideal es que si ya sabemos que el tema tiene un bloque de 840 píxeles es que, antes de subirlas, cambiemos el tamaño de nuestras imágenes a esas dimensiones. De paso te ahorras retoques de código, plugins o lo que haga falta después.

Como he comentado antes esto es especialmente importante para las imágenes destacadas, así que acostúmbrate a subir una versión de tus imágenes al tamaño adecuado definido por tu tema activo, este dato vendrá en su documentación o sino revisa su archivo functions.php y busca la sección featured o similar.

Había que decirlo.

WordPress al rescate

Por si no te has dado cuenta, WordPress crea tamaños adicionales por cada imagen que subes, y un truco rápido para empezar a solucionar este problema de «serve scaled images» es modificar los tamaños por defecto a los tamaños predefinidos en tu tema activo.

De este modo las funciones de tu tema WordPress no aplicarán parámetros adicionales a tus imágenes. De nuevo, presta especial atención al tamaño requerido para las imágenes destacadas, procurando que siempre haya un tamaño adecuado a estas.

Añade más tamaños de imagen

Un modo de asegurarse esta «compatibilidad» con el tema y similares es añadir nuevos tamaños de imagen que quieres que WordPress genere al subir tus archivos.

Para ello crea una acción en el archivo functions.php del tema activo o en tu plugin de utilidades que genere los nuevos tamaños que necesites para no servir imágenes escaladas, como la de este ejemplo, cambiando los tamaños por los que necesites por supuesto:

add_action('init', 'add_image_sizes');
function add_image_sizes() {
add_image_size( 'miniatura-portada', 270, 175, false );
add_image_size( 'miniatura-busqueda', 150, 150, true );
add_image_size( 'miniatura-rss', 120, 80, false ); 
}

Si, además, quieres que aparezcan en el desplegable del cargador de medios de WordPress añade algo así:

add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'miniatura-portada' => __( 'Miniatura portada' ),
'miniatura-busqueda' => __( 'Miniatura búsqueda' ),
) );
}

Lazy Load

Un modo alternativo de solventar este problema de «serve scaled images» es forzar el conocido como lazy load o carga perezosa, que va mostrando tus imágenes a medida que es necesario verlas, cuando el usuario va navegando por tu web haciendo scroll.

Un plugin estupendo para este objetivo es BJ Lazy Load, que además también aplica la carga perezosa a widgets e imágenes destacadas.

Un poquito de srcset

Por supuesto, ahí ha estado y estará siempre HTML, y en concreto srcset, que te permite especificar distintas imágenes a cargar según el dispositivo. Puedes usarlo de dos maneras, con o sin especificar tamaños.

Se utiliza sin el parámetro sizes, sin especificar tamaños, cuando quieres mostrar imágenes más grandes, pero idénticas, a dispositivos con mayor tamaño de pantalla, por ejemplo…

<img srcset="wp-content/2017/03/imagen-384.jpg 1x, wp-content/2017/03/imagen-768.jpg 2x" alt="loquesea">

Por otra parte, la sintaxis srcset y sizes se usan para ofrecer al navegador una lista de imágenes idénticas salvo en su tamaño, y cómo se mostrarán. Luego permites al navegador elegir el tamaño adecuado al dispositivo del visitante y al diseño de la pantalla.

Un ejemplo sería así:

<img
  sizes="(min-width: 40em) 80vw, 100vw"
  srcset="wp-content/2017/03/media.jpg 375w,
          wp-content/2017/03/grande.jpg 480w,
          wp-content/2017/03/retina.jpg 768w"
  alt="loquesea">

La sintaxis sizes se usa para definir los espacios que ocupará tu imagen en el diseño. Y la sintaxis srcset define a continuación la lista de imágenes en sus respectivos anchos. Esto permite al navegador elegir la imagen más pequeña adecuada para el tamaño disponible en el diseño.

Comprime y cachea a lo bruto

Otra posibilidad es forzar la compresión y cacheo a lo bestia, no elimina los parámetros pero optimizar optimiza.

Para ello tenemos la ya conocida compresión gzip, que si no recuerdas se hacía añadiendo estas líneas a tu archivo .htaccess:

# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
# END GZIP

Y, por otro la de definir la expiración de la caché de imágenes, el famoso leverage browser caching, que te recuerdo se hace añadiendo algo así, también al archivo .htaccess:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##

Regenera, regenera, regenera

Como nota final, siempre que hagas cambios en los tamaños de imágenes, y en especial en los de las miniaturas, tienes que regenerar los tamaños y adaptarlos a los nuevos.

Para ello nada mejor que el único, el inimitable, plugin Regenerate Thumbnails, una joya absolutamente imprescindible tras cambios como los que hemos visto, cambios de tema, etc.

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

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)