Cómo optimizar imágenes para WordPress - Y uso de WebP

Optimizar imágenes para WordPress (y cualquier otra plataforma) es muy importante para tu sitio web o blog. ¿Sabes hacerlo? ¿Sabes que existe un nuevo formato de imágenes que se denomina «de próxima generación» o "WebP? De todo esto, y de mucho más, hablamos en este artículo.

[Post actualizado el 09/06/2022]

Introducción a optimizar imágenes

GTmetrix ofrece información sobre las imágenes que requieren una codificación; es decir una reducción del peso en KBs; o bien una mejora en las dimensiones (tamaño) o si podrían convertirse a WebP (formato de próxima generación).

Cada vez es menos frecuente el tener que optimizar una imagen en peso (KBs), ya que la plataforma WordPress es capaz de optimizar las imágenes por sí misma. Por lo que, normalmente, verás solo los mensajes que se muestran en la figura anterior: "Properly size images" y "Serve images in next-gen formats". En este artículo veremos cómo se pueden optimizar los archivos en los tres casos.

Mira la siguiente imagen. La hemos descargado de Squoosh, la herramienta gratuita de Google para optimizar imágenes y convertirlas a los diferentes formatos, incluyendo los de próxima generación. Para ello, entra en Squoosh.app, haz clic en la pequeña imagen que dice «Large photo (2.8 MB)» y pulsa en el icono de descarga de la parte izquierda de la pantalla (la que corresponde a la imagen original).

Tiene aproximadamente 3MB de tamaño original. Se puede decir que es una imagen desoptimizada al 100%.

Es una imagen de tipo JPG. Pero no sería buena idea emplearla en nuestro sitio web o blog directamente. La velocidad de carga de una página que contuviese esa imagen sería mala con ese tamaño de archivo.

WordPress es capaz de optimizar las imágenes por sí misma

WordPress ya es capaz de optimizar por sí mismo las imágenes, sin necesidad de instalar ningún plugin. Si examinas el tamaño de esa imagen del Panda, una vez subida a la biblioteca de medios, observarás una reducción drástica de su número de bytes.

¡Eso es fantástico, porque nos va a ahorrar casi todo el esfuerzo a la hora de optimizar las imágenes!

Optimización de imágenes en WordPress en dimensiones y peso

Debes tener en cuenta la optimización de tus imágenes, de cara al SEO, ya que son las grandes causantes del retraso en la carga de las páginas. Por ejemplo, los expertos dicen que un segundo de retraso puedes causar una reducción del 11 % en las páginas vistas.

Optimizar imágenes (mejorarlas en peso o dimensiones, incluso usar WebP) no es el problema. Eso es relativamente sencillo. El problema realmente es:

1. Configurar WordPress para que el funcionamiento de las imágenes sea el correcto, desde el punto de vista del rendimiento. Esto, a grandes rasgos, significa hacer que WordPress trabaje con una única versión de cada imagen subida y que ésta tenga las dimensiones adecuadas o, lo que es lo mismo, que no se escale. Esto lo veremos en el apartado siguiente "Cómo gestiona WordPress las imágenes".
2. Saber determinar qué imágenes están dando problemas para poder corregirlo. En este caso, usaremos la herramienta Lighthouse.

Cómo gestiona WordPress las imágenes

Volvamos a nuestra imagen de ejemplo (photo.jpg) de 3MB. Si la subimos a un WordPress que no tenga instalado ningún plugin de optimización de imágenes, ni otra herramienta para ese propósito ^*; y vamos al Administrador de Archivos de nuestro hosting (carpeta wp-content/uploads), observaremos lo siguiente.

El archivo original es el último que pesa 3MB y no se ha optimizado al subirse porque no hay ningún plugin ni opción en el hosting a tal efecto. Como hemos visto, un poco más arriba (*), se ha quitado la optimización automática de WordPress. El resto de archivos que se muestran en la figura anterior los ha creado WordPress ^**, son mucho más pequeños y se utilizan dependiendo de las distintas dimensiones que se necesiten según el tema instalado y activo.

Por lo tanto, aunque se ha subido una imagen de dimensiones 3872x2592 y de peso 3MB, en el tema es probable que ni tenga esas dimensiones ni ese peso, dependiendo de la página y el lugar donde se muestre.

Puedes hacer clic en el botón derecho del ratón para obtener el menú de opciones, dentro de la imagen, y luego en "Inspeccionar" con objeto de alcanzar a ver las dimensiones reales que posee. En nuestro ejemplo, en ordenador la imagen, la muestra el tema con unas dimensiones de 720x482.

Aunque eso es un automatismo que le gusta a WordPress, no es del gusto de Google y se penalizará en los test de rendimiento Lighthouse. Lo que deberíamos hacer para contentar a todos es crear una imagen de 702x482 y subirla para ese propósito. Si el tema usa otras dimensiones en otro sitios, actuaríamos igual.

Y para rematar, tal vez tengamos que deshabilitar la posibilidad en WordPress de crear todos los archivos (basta con poner a cero todos los tamaños de imágenes en Austes>Medios) y hackear el theme ^*** para que no añada más tamaños de imágenes. Aunque eso no evitará el redimensionamiento.

Usando Lighthouse

Si ejecutamos el test Lighthouse veremos lo siguiente, dentro del apartado de "Oportunidades".

En la figura anterior, fíjate en relacionado con la imagen:

• Usa un tamaño adecuado para las imágenes. Muestra imágenes con un tamaño adecuado para ahorrar datos móviles y mejorar el tiempo de carga. Más información. Idealmente, tus páginas nunca debería mostrar imágenes que sean más grandes que la versión que se muestra en la pantalla del usuario. Cualquier cosa más grande que eso solo resulta en bytes desperdiciados y ralentiza el tiempo de carga de la página. Hay muchas formas de resolver esto. La clave está en el tema que estés utilizando. Averigua las dimensiones con las que se muestra la imagen en tu tema y crea una versión ajustada de la imagen para subirla con las dimensiones adecuadas.

El test Lighthouse es, por lo tanto, un buen recurso para averiguar qué imágenes tienes que optimizar y cómo; es decir si debes convertirlas a un formato de próxima generación (WebP, por ejemplo), crearlas con las dimensiones exactas tal como se muestran en pantalla y si hay que reducir el tamaño en bytes del archivo correspondiente.

En el ejemplo que nos ocupa, crearemos una imagen de 720x482 a partir de la original (esto lo puedes hacer muy fácilmente con Canva.com) y la subiremos de nuevo a WordPress sustituyendo a la anterior. Es mejor realizarlo desde el editor (aprovechando para borrar la original) para que se eliminen y creen todas las versiones del archivo en las distintas miniaturas.

Normalmente, eso servirá también para corregir el error en móviles, eliminando el aviso correspondiente en Lighthouse.

Escalado automático de WordPress

Si quitamos la instrucción que metimos en functions.php y que eliminaba la optimización automática y volvemos a subir el archivo grande de 3872x2592, vemos que se crean los siguientes:

El archivo photo-scaled.jpg es la versión optimizada automáticamente por WordPress y que tiene menor tamaño en dimensiones y mejor codificación (solo 644 KB).

El resto de versiones también las crea automáticamente WordPress y eso vimos que se puede ahorrar mediante el snippet mostrado anteriormente. Eso sería lo más idóneo: tener solo dos versiones, la original y, si acaso, la optimizada por WordPress.

Compresión de archivos

Podemos utilizar algún sistema de mejora de la codificación o, lo que es lo mismo, reducir el peso en KBs de los archivos. Dependiendo de nuestro hosting, esto probablemente se pueda hacer masivamente y con un clic. En SiteGround simplemente tenemos que entrar en la configuración del plugin SG Optimizer para llevarlo a cabo. Y el resultado es el siguiente para el ejemplo:

Vemos que la imagen photo-scaled.jpg ha pasado de 644KB a 163KB.

Hay muchas herramientas y plugins para optimizar el peso de las imágenes. Ya hemos hablado también de Squoosh.app con la que podrías realizar este tipo de optimización antes de subir la imagen a WordPress. Pero, realmente, en la mayoría de los casos ya no es necesario porque, como hemos visto, la plataforma WordPress es capaz de optimizar bastante por sí misma.

Resumen optimización imágenes en dimensiones y peso

En resumen, para optimizar:

• Dimensiones. Eliminar versiones que crea WordPress automáticamente y crear archivos con el tamaño exacto que requiere el tema. En un blog, por ejemplo, tendremos normalmente solo dos tipos de imágenes, cada una con sus dimensiones: la destacada (que se muestra en la página de inicio o página con las entradas) y otra normal para insertar dentro de la publicación. Si hay más tipos, tratar siempre de obtenerla con las dimensiones exactas con las que el tema las visualiza. Usa el inspector de las herramientas para el desarrollador, en tu navegador, con el fin de averiguar esas dimensiones exactas y luego utiliza Canva.com para crear las imágenes a partir de las originales.
• Peso (codificación). Seguramente no tengas que hacer nada porque WordPress ya se encarga de optimizar. Averigua si tu hosting te proporciona una herramienta de compresión (para imágenes existentes y las nuevas); y, en ese caso, prueba a ver si se obtiene una mejora sustancial sin perder calidad. Y siempre puedes considerar utilidades del estilo de Squoosh.app con el fin de optimizar antes de subir.

Qué es el formato WebP y cómo usarlo para optimizar el rendimiento de tu sitio web

Utilizar imágenes WebP es muy recomendable a la hora de afinar la optimización del rendimiento de una página web.

En este apartado veremos qué son los formatos de próxima generación (WebP, AVIF), la manera de servir las páginas de un sitio web en estas extensiones, cómo comprobar si una página en concreto está proporcionando los archivos de las imágenes en WebP y cómo afecta todo ello en los análisis de rendimiento de herramientas del estilo de Lighthouse.

¿Qué es WebP?

Según la Wikipedia, WebP es un formato gráfico en forma de contenedor, que sustenta tanto compresión con pérdida como sin ella. Lo está desarrollando Google, basándose en tecnología adquirida con la compra de On2 Technologies. Como derivado del formato de vídeo VP8, es un proyecto hermano del formato WebM, y está liberado bajo la licencia BSD.

Google denomina a WebP formato de próxima generación y si ejecutas Lighthouse sobre una de tus páginas web, probablemente veas el siguiente mensaje ("Serve images in next-gen formats").

Lo cual indica que en esa página web no se están sirviendo imágenes de próxima generación (WebP). Google penaliza mucho, en ese caso, la calificación del test de Lighthouse, más aún que si el tamaño (en KBs) del archivo es muy grande.

Una manera, por lo tanto, de afinar la optimización del rendimiento de una página web es reducir el tamaño de las imágenes sin perder calidad; y eso se consigue fácilmente con WebP.

Cómo servir imágenes en formato WebP

Por lo tanto, se trataría de trabajar solo con el formato WebP. Para ello, podemos empezar de cero generando todas nuestras imágenes en esa extensión. Si las aplicaciones que utilizamos no exportan en WebP, existe la posibilidad de convertirlas, antes de subirlas a WordPress, con recursos online del estilo de squoosh.app.

WordPress permite el uso de WebP desde la versión 5.8, así que no debe existir ningún problema.

Pero, si posees un sitio web o un blog desde hace mucho tiempo, lo mejor es llevar a cabo una conversión masiva la primera vez. Hay herramientas que nos pueden ayudar a realizar esta importante labor. A continuación veremos un par de ellas y, de paso, repasaremos algunas cuestiones necesarias relacionadas con WPO (optimización del rendimiento web).

Antes de ver cómo servir imágenes en formato WebP, veamos cómo medir el nivel de optimización del rendimiento de una página web.

Cómo medir el nivel de optimización del rendimiento de una página web

Como hemos visto, Lighthouse es la opción de Google para medir el nivel de optimización del rendimiento de una página web. Esta herramienta está integrada en Google Chrome, bien a través de las herramientas para desarrolladores o bien mediante la correspondiente extensión.

Lo más rápido es utilizar las herramientas para desarrolladores con el fin de analizar el nivel de optimización del rendimiento con Lighthouse.

Lighthouse presenta avisos de los errores que más afectan al rendimiento, tanto para móviles como para escritorio, y consejos concretos de mejora. En el caso que nos ocupa, nos fijaremos principalmente en uno de los avisos que veíamos en una figura anterior:

• Servir en formato WebP o AVIF (Serve images in next-gen formats)

Otro importante, como hemos visto en esta guía es el de "Reducir el tamaño (Properly size images)", se refiere a las dimensiones y has aprendido en la primera parte de este artículo a eliminar este mensaje y optimizar en ese sentido.

Si haces clic en los avisos, verás los elementos que están penalizados, sabiendo por ejemplo qué imágenes en particular deben ser optimizadas.

GTmetrix es una buena alternativa porque ofrece mucha información, y está basada en Lighthouse, pero solo está preparada para los dispositivos de escritorio.

Cómo comprobar que tipo de imágenes se están sirviendo en una página web

Las herramientas para desarrolladores también poseen una opción para comprobar en qué tipo de formato se está sirviendo cada imagen que tiene la página.

Sigue los pasos a continuación:

1. Inicia Dev Tools en tu navegador (Ver > Opciones para desarrolladores > Herramientas para desarrolladores)
2. Ve a la pestaña "Red" y activa el filtrado para "Img" (Imágenes).
3. Actualiza la página que está mostrando el navegador.
4. Verifica la lista de imágenes cargadas. Ten en cuenta la columna "Tipo" que mostrará el "Mime Type" del archivo. Para el caso que nos ocupa, en esa columna veremos "WebP" o "AVIF" si la página está sirviendo archivos de próxima generación.

¿Qué es Mime Type?

En realidad, lo que define exactamente la naturaleza de un archivo no es su extensión (jpg, png, etc.) sino lo que se denomina su tipo MIME. MIME (Extensiones multipropósito de Correo de Internet, por sus siglas en inglés) es un estándar regulado por la Autoridad de Números Asignados de Internet (IANA).

Los navegadores a menudo usan el tipo MIME (y no la extensión de archivo) para determinar cómo procesará un documento; por lo tanto, es importante que los servidores estén configurados correctamente para adjuntar el tipo MIME correcto al encabezado del objeto de respuesta. Así que el tipo MIME es una especie de metadato que lleva dentro el archivo y que, independientemente de su extensión y URL, define de qué tipo de archivo se trata.

Cómo servir imágenes WebP en SiteGround con su propio sistema

Si tu sitio web se aloja en SiteGround estás de suerte porque este hosting proporciona una opción para usar imágenes WebP con un clic.

Simplemente, acude a los ajustes de medios del plugin SG Optimizer y activa la opción de "Usar imágenes WebP". Por el hecho de activarlo, se convertirán todos los archivos existentes a WebP. A partir de ese momento, cualquier imagen nueva que subas a tu WordPress se convertirá también a WebP.

Hay que destacar que para que esta herramienta funcione bien, es preciso tener activada la función de Nginx dentro del apartado "Velocidad > Cache" del panel de control de SiteGround.

Las versiones con extensión .webp se crean dentro de la carpeta de "Uploads" donde se encuentran los archivos originales. Si desactivas el uso de WebP se borran todos los archivos con extensión .webp.

Posibles incidencias a la hora de convertir imágenes al formato WebP

Hay que tener en cuenta que no se cambian las URL de las imágenes, por lo que al mirar la fuente del sitio web, verás las URL de las imágenes originales siempre. El sistema crea redirecciones a archivos de salida en formato WebP, cambiando el tipo MIME de estas imágenes, pero sin cambiar la URL.

El mecanismo no modifica las imágenes originales, solo su tipo MIME. Cuando el navegador carga una imagen, se verifica si es compatible con el formato WebP. Si es así, se carga la imagen en formato WebP.

Es posible que algunas imágenes no se conviertan. Por ejemplo, si el archivo convertido es más grande que el original o por cualquier otra razón.

¿Qué es Ningx Direct Delivery?

El objetivo de SiteGround, y de otros servicios de alojamiento web del mismo estilo, es que los sitios web de su clientes carguen más rápido que nunca. Y en ese sentido, se implementó Nginx Direct Delivery.

Nginx Direct Delivery es un método para servir contenido estático de tu sitio web utilizando funciones de Nginx. Nos permite eliminar el contenido estático de la memoria del servidor, pero aún así encontrarlo y servirlo súper rápido directamente desde el NGINX, omitiendo la comunicación con el servidor web Apache.

Según la Wikipedia, Nginx fue inicialmente desarrollado con el fin explícito de superar el rendimiento ofrecido por el servidor web Apache. Sirviendo archivos estáticos, Nginx usa dramáticamente menos memoria que Apache, y puede manejar aproximadamente cuatro veces más solicitudes por segundo. Este aumento de rendimiento viene con un costo de disminuida flexibilidad, como por ejemplo la capacidad de anular las configuraciones de acceso del sistema por archivo (Apache logra esto con un archivo .htaccess, mientras que Nginx no tiene desarrollada tal funcionalidad).

Como se indicó un poco más arriba, es necesario tener activado Nginx con el fin de poder usar el formato WebP en SiteGround.

Cómo servir imágenes WebP con el plugin "WebP Converter for Media"

Si tu web no está alojada en SiteGround y el hosting no posee la herramienta para usar WebP, hay un plugin muy eficaz que es WebP Converter for Media.

Este plugin requiere modificaciones a nivel de configuración de Nginx, por lo que si estás en un servidor compartido tu única posibilidad es desactivar Nginx.

Una vez regeneradas todas las imágenes la primera vez, el funcionamiento interno es semejante al de SiteGround.

La única diferencia es que los archivos se crean en otra carpeta diferente a la de "Uploads". Si desactivas y borras el plugin, el contenido de esa carpeta desaparece. Si solo lo desactivas, el contenido se conserva pero no se sirven archivos WebP.

Resumen uso de WebP

El plugin WebP Converter for Media es una buena opción si tu hosting no es SiteGround. Pero para tomar una decisión final, habrá que evaluar el impacto en Lighthouse producido por la adopción de un sistema u otro.

• Si tu hosting es SiteGround, activa Nginx y el uso de WebP.
• Si tu hosting no es SiteGround, averigua si se proporciona una herramienta de uso de WebP. En caso negativo, implementa el plugin WebP Converter for Media.
• WebP Converter for Media no funciona en Nginx, a no ser que hagas cambios en la configuración de éste sistema y eso no es posible hacerlo en servidores compartidos. Pero Nginx te puede proporcionar mayor optimización del rendimiento en general.
• Utiliza Lighthouse para analizar el nivel de rendimiento en uno caso u otro y saber que imágenes concretas están dando problemas, bien porque no estén en WebP o porque sean demasiado grandes. En este último caso, puedes emplear Squoosh.app u otras herramientas para reducir lo máximo posible el tamaño y sustituir los archivos problemáticos.
• Comprueba que tanto el plugin como el servicio que utilices (como por ejemplo el de SiteGround) sirve las imágenes en formato WebP después de activarlo.

Mejora del tiempo de respuesta con el plugin Cache Enabler

Es probable que Lighthouse avise acerca de una mejora en el tiempo de respuesta del servidor. Esto no tiene que ver directamente con la optimización de imágenes pero puede aparecer en caso de que se usen muchas o por otras razones.

En cualquier caso, independientemente del sistema de almacenamiento en caché que uses, prueba a activar el plugin con la configuración por defecto. En condiciones normales, verás desaparecer el mensaje de Lighthouse, habiendo optimizado el rendimiento.

Conclusiones

Para optimizar imágenes para WordPress (y, en realidad, para cualquier plataforma) no es necesario romperse la cabeza. No hagas caso de las típicas recomendaciones del estilo «20 plugins para optimizar imágenes». Eso sirve para poco.

En este artículo has aprendido a optimizar imágenes con un método eficaz y con un par de consejos muy sencillos y fáciles de poner en marcha.