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 srcsetsizes 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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(30 votos, promedio: 4.6)

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

12 comentarios en “Cómo optimizar WordPress solucionando el error de «serve scaled images»”

  1. Santo Demonio

    El problema está en un blog de noticias donde hay varios periodistas o editores trabajando y en donde la noticia debe salir en corto tiempo publicada, en este tipo de medios de comunicación lo importante es bajar el peso a las imágenes de megabytes a kilobytes y en dónde es muy importante tener fotos grandes en alto y ancho en px. para una galería de fotos por ejemplo. Y en donde una de esas fotos de la galería va a ser la imagen destacada del post.

    1. Efectivamente, en grupos de trabajo es complicado poner medios para todos, a veces hay que abordar el problema en varias fases:

      1. Optimización a nivel de servidor
      2. Configuración óptima
      3. Normas claras de carga de imágenes
      4. Optimización a nivel de WP

      Todos estos aspectos he tratado de cubrirlos en el artículo 🙂

  2. Daniel Vázquez Pérez

    Gracias por el artículo Fernando esta excelente, tengo una duda en el tema Divi que tamaño es el ideal para subir las imágenes? Ademas (también en el tema Divi) que tan recomendable es en «medios» establecer todos los tamaños de las imagenes en «0» para que no me genere mas archivos de imagenes, es esto conveniente? Saludos

    1. Fernando Jiménez

      Me uno a la duda de David. ¡Gracias Fernando T.!

      P.D.: Fernando Tellado: Cada vez que cargo ayudawp me muestra lo último que ví anteriormente y tengo que refrescar la página. ¿Esto es cosa del Chrome o de la configuración de ayudawp?

  3. Hola Fernando, ¿y has probado algún plugin como el de responsifywp ? Reconozco que Google me tiene loco con las miniaturas que muestra en el móvil con el AMP. Hace poco cambió a 1200 puntos de ancho mínimo, pero sigue mostrando muchas veces lo que quiere o nada.

    Y me parece que poner soluciones de srcset puede ayuar, pero prefiero poner un plugin… ¿alguna idea?

  4. Estudio Enxebre

    Muchas Gracias Fernando,
    He utilizado otros plugins pero nunca este.
    Ya esta en funcionamiento en nuestras web.
    Un saludo!!

Deja un comentario

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

 

Ir arriba Ir al contenido