Cómo solucionar error “Serve scaled images” en Enfold

Error Serve Scaled Images de GTmetrix solucionado en Enfold

Si estás utilizando GTmetrix o la herramienta de test de velocidad de Google o alguna similar para medir la velocidad de carga de tu sitio web y uno de los errores que te saca el resultado es el de Serve Scaled Images, estás en el sitio adecuado.

Harto de que me saliera ese error en varias webs y blogs que tengo en Enfold, me he puesto al lío para averiguar cómo solucionarlo.

Así que sigue leyendo porque te cuento cómo solucionar el error Serve Scaled Images en Enfold paso a paso.

¿Qué significa Serve Scaled Images?

Serve scaled images se puede traducir como Sirve imágenes escaladas, o dicho de otra forma, haz el favor de imagen que muestres en la web, tenga el mismo tamaño del que se muestra por pantalla.

¿Te has enterado? No mucho, verdad. Te lo explico.

Cuando añades la foto destacada a tu nuevo post, muchas veces, reconócelo, no te paras a mirar qué dimensiones tiene ¿verdad?.

Así ocurre que, cuando el servidor donde está alojada tu web y tus imágenes destacadas, cuando tiene que servirla, es decir tiene que entregar vía internet para que sea mostrada en el ordenador y/o dispositivo móvil de la persona que está leyendo tu blog, le va a llevar mucho más tiempo hacerlo si la imagen pesa mucho.

Conceptos de las imágenes: Dimensiones y peso

Dimensión de una imagen

Cuando te hablo sobre las dimensiones de una imagen, te estoy hablando de qué ancho y alto tiene. En inglés width y height.

Si la imagen destacada de tu artículo se va a mostrar a 1000×500, es decir, 1000 píxeles de ancho por 500 píxeles de alto, ¿para qué quieres subir a tu WordPress una imagen de 3000×3000?

Peso de una imagen

El peso de una imagen es cuántos kilobytes (Kbs) ocupa una imagen.

Hoy día, estás acostumbrado a hablar de megas (Mbs), gigas (Gbs), etc… pero a la hora de transmitir/enviar algo por Internet, mientras menor sea su peso, mejor que mejor.

¿Qué peso deben tener las imágenes en mi blog? No hay una cifra correcta, pero según mi experiencia, todo lo que baje de los 100Kbs será bienvenido.

¿Y por qué dices que influye el peso?

Pues porque cuando el servidor tiene que servir una imagen, lo que se sirve son los Kbs que ocupe la foto.

A mayor número de Kilobytes, más tardará en servir la imagen completa.

Entonces, ¿qué es servir escaladas las imágenes?

Vale, Rafa, ya he bajado el peso de mis imágenes, pero GTmetrix se sigue quejando de que no las sirvo escaladas.

Es lógico, son conceptos distintos.

Una cosa es el peso, otra las dimensiones con las que la imagen se muestra.

Ambos, evidentemente influyen, y debes optimizarlos al máximo para obtener una mejor puntuación en la velocidad de carga de tu sitio web.

Para resolver el problema de Serve Scaled Images, la solución es única, pero su implementación varía en función de tu plantilla.

Solución para el error Serve Scaled Images

La solución pasa por modificar las dimensiones de las imágenes que están dando el error reduciendo sus dimensiones a lo que las herramientas de testeo te estén diciendo o bien al tamaño (ancho y alto) que se muestran dichas imágenes en pantalla.

Esa es la solución genérica pero en este artículo te voy a explicar cómo hacerlo paso a paso si utilizas la plantilla Enfold.

Pero antes, te voy a explicar el concepto de dimensiones de imágenes y miniaturas de imágenes de WordPress para su biblioteca de medios.

Ajustes multimedia y tamaño de las imágenes en WordPress

Por si no lo sabes, y si no, ya te lo explico yo, cada vez que subes una imagen a WordPress se guarda en lo que ellos llaman Biblioteca de medios.

Esta Biblioteca de medios contiene todas las imágenes que subes a tu WordPress, pero en el proceso de subida ocurre algo que es transparente para el usuario.

Es el proceso de generación de distintas copias de la imagen con dimensiones distintas.

¿El qué?

Si coges el FTP de tu sitio web y miras el contenido de la carpeta wp-contentuploads podrás ver que para una misma imagen tienes varios archivos que se diferencian porque en el nombre del archivo pone algo como 40×40, 80×80 al final del mismo ¿correcto?

Esto es porque cada vez que subes una foto a WordPress, éste automáticamente genera copias de la misma con distinta dimensiones.

¿Por qué hace esto? Pues por lo que hemos estado hablando durante todo el artículo, para mostrar las imágenes de manera escalada según en el sitio en el que se muestren.

Te pongo un ejemplo: imagina que estás escribiendo tu nuevo artículo del blog, añades la foto destacada y publicas.

Seguro que en tu blog hay algún sitio donde muestras un listado de las últimas entradas publicadas o en la página de inicio, muestras las 3 últimas o lo que sea.

Y es muy posible que se muestren con una miniatura de la imagen destacada.

Pues ahí lo tienes. WordPress estará utilizando el tamaño más adecuado de tu imagen para mostrar según en qué partes se muestra.

¿Quieres saber qué dimensiones utiliza WordPress?

Lo puedes ver tu mismo en tu WordPress. Sigue leyendo.

Cómo modificar las dimensiones de imágenes por defecto de WordPress

En el panel de administración de WordPress, selecciona Ajustes, Medios.

Te aparecerá una pantalla donde tienes definidos 3 tamaños:

  • Tamaño de la miniatura
  • Tamaño medio
  • Tamaño grande

Puedes variar el ancho y alto de esos tres tamaños a los valores que más te interesen.

Nota

Recuerda hacer copia de seguridad antes de ponerte a probar configuraciones que no sabes muy bien cómo acabarán

Es cuestión de ir probando.

¿Pero qué ocurre normalmente? Que seguro estás utilizando una super plantilla que sobreescribe o más bien genera nuevas dimensiones que son las que utiliza para mostrarte los contenidos.

Es decir, por defecto, las que te he contado son las de WordPress, pero si utilizas una plantilla tipo Enfold, ten por seguro, que traerá unas dimensiones preestablecidas y que serán muchas más que solamente 3 tamaños.

Dimensiones de imágenes en Enfold

Como he comentado antes, las plantillas de WordPress, normalmente definen sus propias dimensiones de imágenes, para así utilizar distintas miniaturas en sus elementos de diseño.

Enfold no es de otra manera y puedes verlo de distintas maneras.

Por ejemplo, cuando añades el elemento de contenido de Entradas de Blog, para mostrar las últimas entradas en tu blog, podrás ver en las opciones que existe una opción para seleccionar manualmente el tamaño de la imagen de previsualización.

Y podrás seleccionar entre un buen listado de dimensiones.

Otra manera es si directamente editas el archivo functions.php de Enfold, verás algo como esto:

¿Tiene o no tiene opciones de thumbnails o miniaturas de imágenes el theme Enfold? Jajaja

¿Cómo solucionar el error de Serve Scaled Images en Enfold?

Ya te he puesto en situación para que entiendas cómo funciona todo esto.

Ahora es momento para que te remangues e implementes una solución válida para mejorar tu puntuación en GTmetrix.

El problema: Puntuación F (0) para Serve scaled images en GTmetrix

Como puedes ver en el pantallazo, mi puntuación en GTmetrix antes de los cambios era esta: dos tristes D como puntuaciones globales y una F como un pino en el caso concreto de servir las imágenes de manera escalada.

Nota

Decirte que esta es la puntuación de la url https://rafalabrador.com/blog/ . Puedes comprobarlo tú mismo con GTmetrix.

Viendo esto, está claro que tenía un problema de servir las imágenes escaladas. Y eso que Enfold es una de las mejores plantillas.

Leyendo el detalle, fíjate que me decía que mediante HTML o CSS estaba redimensionando de 1000×430 a 355×153. Y que si servía la imagen de manera escalada podía ahorrar no sé cuántos Kbs.

La solución: Añadir una nueva dimesión o miniatura a las ya existentes en Enfold

Revisando las distintas opciones de miniaturas que Enfold me ofrecía, vi que no había ninguna que fuera exactamente las dimensiones que GTmetrix me recomendaba de 355×153.

Así que me puse a buscar en Internet la manera de añadir otra dimensión más a la plantilla y poder utilizarla.

Porque en este caso concreto, estaba utilizando el elemento de contenido llamado “Entradas de blog” de Enfold, el cual te permite sacar un listado (con distintos diseños) de tus últimas entradas. Siempre con la imagen destacada.

Y dicho cacharro, tiene un desplegable para seleccionar un tamaño de los preestablecidos.

De ahí que quería añadir uno nuevo.

Al final la solución me la dio esta página:

http://www.kriesi.at/support/topic/image-cropping-scaling-on-thumbnails-featured-images/

En ella viene el siguiente código que es el que he añadido al functions.php de mi tema hijo.

Porque esto es importante, podía haber modificado directamente el functions.php del tema padre, pero me habría encontrado con el problema futuro de que si quiero actualizar la plantilla, perdería los cambios.

Así que siempre que sea posible, mejor aplicar las soluciones en el tema hijo.

He añadido este código:

  • Blog_page es el nombre que le he dado (porque he querido) a la nueva dimensión.
  • 355 es el ancho que GTmetrix me estaba recomendando.
  • 153 es el alto que GTmetrix me estaba recomendando.
  • Array (‘center’,’center’) es opcional y me sirve para decirle que si al reducir la imagen no le cuadra el ancho y el alto que recorte dejando el centro centro siempre visible. ¿Centro centro? Sí centro de ancho y centro de alto.

Regenerar las miniaturas

Una vez aplicado el cambio en el functions.php de tu tema hijo, queda un paso importante: regenerar las miniaturas.

Es decir, decirle a WordPress: oye, he modificado las dimensiones de las miniaturas, haz el favor, de generarlas de nuevo.

Para esto existe un plugin que se llama Regenerate Thumbnails que es el estándar para estos casos.

Aquí tienes el enlace: https://es.wordpress.org/plugins/regenerate-thumbnails/

Es gratuito y una vez lo instalas y activas, solamente tienes que ir a Herramientas, Regen. Miniaturas y ahí pulsar el botón de regenerar.

Nota

Como siempre, te recomiendo hacer copia de seguridad antes de tocar nada.

Dependiendo de la cantidad de imágenes que tengas en tu WordPress, le llevará un ratito llegar al 100%.

Utilizar una nueva dimensión de imagen o miniatura en Enfold

Una vez terminado el proceso de regeneración de miniaturas, edita la página que tienes problemas con las imágenes y mira el componente de “Entradas del blog”.

Si despliegas las opciones de tamaño de previsualización de imagen personalizado, verás que aparece tu nueva dimensión abajo del todo y podrás seleccionarla.

Guarda los cambios.

Comprueba que has solucionado de scaled images en GTmetrix

Ahora pasa de nuevo el test en GTmetrix y si lo has hecho todo bien y has seguido los pasos, verás que tu puntuación del PageSpeed Score ha mejorado y que en el listado de recomendaciones tienes un 100% para el problema de Serve Scaled Images.

¿Qué te ha parecido? ¿Lo has logrado? Dímelo en los comentarios.

Apéndice I. Solucionar Serve Scaled Images en Magacín de Enfold

Un apunte más. Si el problema te da con el elemento de contenido llamado Magacín (Magazine en inglés), puedes hacer lo siguiente:

En la función que has añadido antes en el functions.php, añade una nueva línea con el ancho y alto que necesites:

Y al final del functions.php añade el siguiente filtro:

Ten en cuenta que el nombre for_magazine_big es el nombre que yo le he puesto. Puedes poner otro si lo prefieres.

 

¿Hablamos?

Rafa Labrador

Rafa Labrador es el autor del blog del mismo nombre rafalabrador.com. Rafa ayuda a negocios unipersonales a conseguir más visibilidad y ventas en Internet gracias al SEO y el posicionamiento orgánico.
¿Hablamos?
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Deja un comentario

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