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:

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

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…

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í:

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:

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:

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 este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (14 votos, promedio: 4,79 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran.Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

ESTA WEB UTILIZA COOKIES PARA OFRECER LA MEJOR EXPERIENCIA POSIBLE. SI SIGUES NAVEGANDO DAS TU CONSENTIMIENTO PARA LA ACEPTACIÓN DE COOKIES Y NUESTRA POLÍTICA DE PRIVACIDAD más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar