Si quieres acelerar tu sitio de WordPress, encontrar formas de reducir el tamaño de tus imágenes que permite una gran recuperación de tu inversión.

En promedio, las imágenes representan aproximadamente la mitad del tamaño de un archivo de una página web, por lo que incluso pequeñas mejoras pueden tener grandes resultados.

WebP es un formato de imagen moderno que puede ayudarte a reducir el tamaño de tus imágenes sin cambiar su aspecto. En promedio, aprender a convertir una imagen a WebP puede reducir su tamaño en ~25-35% sin pérdida perceptible de calidad.

Por eso nos adentraremos en el tema en esta entrada del blog!

¿Listo? ¡Empecemos!

¿Qué es WebP?

Entonces… ¿qué es un archivo WebP? En pocas palabras, WebP es un formato de imagen desarrollado por Google. Por ejemplo, tienes formatos de imagen como JPEG o JPG y PNG, ¿verdad? Bueno, WebP es un formato de archivo alternativo para las imágenes.

WebP está enfocado a entregar el mismo archivo de imagen, sólo que con un tamaño de archivo más pequeño. Reduciendo el tamaño de los archivos de imagen, puedes seguir ofreciendo la misma experiencia a los visitantes de tu sitio web, pero el sitio se cargará más rápido.

Por ejemplo, en el estudio de compresión de WebP de Google, Google encontró que un archivo de imagen WebP es en promedio…

Por eso, si ejecutas tu sitio a través de PageSpeed Insights, una de las muchas recomendaciones es servir las imágenes en formatos de próxima generación como WebP:

Google PageSpeed Insights sugiere usar imágenes de WebP

Google PageSpeed Insights sugiere usar imágenes de WebP

Entonces, ¿cómo logra el formato WebP de Google estas reducciones en el tamaño de los archivos?

WebP soporta tanto la compresión con pérdida como sin pérdida, así que la reducción exacta dependerá de si se utiliza la compresión con pérdida o sin pérdida.

Con la compresión de pérdida (lossless) de WebP, WebP usa algo llamado «codificación predictiva» para reducir el tamaño del archivo. La codificación predictiva utiliza los valores de los píxeles vecinos en una imagen para predecir los valores y luego sólo codifica la diferencia. Se basa en la codificación del marco clave VP8.

Lossless WebP utiliza un conjunto de métodos mucho más complicados que fueron desarrollados por el equipo de WebP.

Si quieres conocer en detalle las técnicas de compresión de WebP, este artículo es un buen punto de partida.

¿Qué navegadores web soportan WebP?

Para que las imágenes de la WebP funcionen, el navegador de un visitante debe soportarlas. Desafortunadamente, aunque el soporte de los navegadores ha crecido mucho, la compatibilidad con WebP todavía no es universal.

Las imágenes WebP son soportadas por navegadores populares como:

Sin embargo, el que más se resiste es Safari. En el momento en que escribimos este post, ni la versión de escritorio ni del móvil de Safari soportan imágenes de WebP. Apple experimentó brevemente con el soporte de WebP para Safari en 2016, pero no ha habido más empujones desde entonces.

Internet Explorer también carece de soporte para WebP (pero Edge sí lo soporta porque está basado en el chrome).

En total, alrededor del 77% de los usuarios de Internet utilizan un navegador que soporta WebP. Así que mientras que ciertamente tiene un apoyo mayoritario, ese 23% es demasiado grande para ignorarlo (en nuestro tutorial de WordPress WebP a continuación, te mostraremos cómo manejar esto para que todos tus visitantes tengan una gran experiencia):

Soporte WebP

Soporte WebP

Comparación del tamaño de WebP vs JPG vs PNG

De acuerdo con las pruebas de Google, las imágenes de WebP son:

Si quieres saber más sobre la metodología de Google, puedes encontrar enlaces directos a los resultados completos a continuación:

Ambas pruebas se basan en más de 11.000 imágenes, incluyendo:

¿Cómo usar las imágenes WebP en WordPress?

Dado que no todos los navegadores son compatibles con las imágenes WebP, no puedes simplemente cargar archivos de imágenes WebP en tu biblioteca multimedia y utilizarlos directamente en WordPress como puedes hacer con los JPEG y los PNG.

De nuevo, el 23% de las personas (incluyendo todos los usuarios de Safari) usan un navegador web que no es compatible con WebP. Si conviertes las imágenes de WebP y las usas directamente en tu contenido, esos visitantes no podrán ver tus imágenes, lo cual arruinará su experiencia de navegación.

¡No te preocupes, hay una solución!

En lugar de subir las imágenes WebP a WordPress directamente, puedes utilizar un plugin de WordPress que convierte los imágenes originales al formato WebP y también proporciona la imagen original como alternativa si el navegador del visitante no es compatible con WebP.

Por ejemplo, si subes un archivo JPEG a tu sitio, el plugin hará:

De esa manera, todos pueden ver tu imagen y todos tienen la experiencia más rápida posible.

A continuación, veremos algunos de los mejores plugins de WordPress para la WebP, todos los cuales funcionan con Kinsta y el CDN de Kinsta.

ShortPixel

ShortPixel WordPress plugin

ShortPixel WordPress plugin

ShortPixel es un popular plugin de optimización de imágenes de WordPress que puede ayudarte a redimensionar y comprimir automáticamente las imágenes que subas a tu sitio de WordPress.

Como parte de tu lista de características, ShortPixel también puede ayudarte a convertir automáticamente las imágenes a WebP y servir esas imágenes a los navegadores que soportan WebP.

ShortPixel tiene un plan gratuito limitado que permite optimizar ~100 imágenes por mes de forma gratuita. Después de eso, los planes pagados comienzan en $4.99 por mes para hasta 5,000 imágenes/créditos o $9.99 por una sola vez para un paquete de 10,000 créditos.

ShortPixel cuenta cada tamaño de imagen de WordPress que optimiza como un crédito. Así que si quieres optimizar varios tamaños de miniaturas de imágenes, una imagen podría usar varios créditos. No hay límites de tamaño de archivo para las imágenes.

Puedes repartir tus créditos ShortPixel entre un número ilimitado de sitios web – no hay límites por sitio (y todos tus sitios web pueden usar la misma cuenta ShortPixel).

Para utilizar ShortPixel para servir imágenes WebP en WordPress, deberás instalar el plugin de WordPress.org y añadir tu clave API (que puedes obtener registrándote para obtener una cuenta gratuita de ShortPixel).

En la pestaña General, puedes configurar los ajustes básicos para el funcionamiento de la optimización de imágenes. Por ejemplo, qué nivel de compresión usar y si se debe cambiar el tamaño de las imágenes:

Cómo establecer el nivel de compresión y las dimensiones de la imagen en ShortPixel

¿Cómo establecer el nivel de compresión y las dimensiones de la imagen en ShortPixel?

Para habilitar las imágenes WebP, ve a la pestaña Avanzado y:

  1. Marca la casilla de Imágenes WebP
  2. Marca la casilla para entregar las versiones WebP… (esto aparece después de marcar la primera casilla)
  3. Selecciona el botón de radio para Usar la sintaxis de la etiqueta <PICTURE> (esto aparece después de marcar la casilla anterior)
  4. Deja el valor predeterminado Sólo a través de la selección de ganchos de WordPress
Cómo habilitar las imágenes de WordPress WebP en ShortPixel

¿Cómo habilitar las imágenes de WordPress WebP en ShortPixel?

Entonces, guarda tus cambios.

Si estás alojado en Kinsta, ShortPixel te dará un mensaje de advertencia sobre la configuración de los archivos de configuración del servidor en Nginx. Para configurar estos ajustes, puedes contactar con el soporte de Kinsta y estaremos encantados de configurar la configuración del servidor para tí.

Imagify

Imagify WordPress plugin

Imagify WordPress plugin

Imagify es un popular plugin de optimización de imágenes del mismo desarrollador que WP Rocket (que es uno de los pocos plugins de caché que funciona con Kinsta).

Puede comprimir y redimensionar automáticamente las imágenes que subes a tu sitio de WordPress. Luego, también puede ayudarte a convertirlas en WebP y servir las versiones WebP a los visitantes con navegadores que lo soporten.

En términos de características, ShortPixel e Imagify comparten muchas similitudes. La mayor diferencia viene cuando miras los precios. Mientras que ShortPixel te cobra en base a las imágenes sin límite de tamaño por imagen, Imagify te cobra en base al tamaño total del archivo, sin límite de imagen.

Así que si necesitas optimizar muchas imágenes grandes, el enfoque de ShortPixel podría ser más barato. Pero si necesitas optimizar muchas imágenes pequeñas, el enfoque de Imagify podría ser más barato.

Imagify tiene un nivel gratuito limitado que permite 25 MB de optimizaciones por mes. Después de eso, los planes pagados empiezan en 4,99 dólares al mes por hasta 1 GB o 9,99 dólares por un crédito único de 1 GB.

Al igual que ShortPixel, puedes extender los límites de tu cuenta a un número ilimitado de sitios web.

¿Cansado de un host lento para tu sitio de WordPress? Proporcionamos servidores rápidos y soporte de clase mundial las 24 horas del día, los 7 días de la semana por parte de expertos de WordPress. Consulta nuestros planes

Para usar Imagify para entregar imágenes de WordPress WebP, necesitarás instalar el plugin de WordPress.org y añadir tu clave de API para empezar.

Una vez que hayas activado el plugin, puedes usar el cuadro de ajustes generales para elegir el nivel de compresión.

Cómo establecer el nivel de compresión en Imagify

¿Cómo establecer el nivel de compresión en Imagify?

Para habilitar las imágenes WebP, desplazate hacia abajo a la sección de Optimización y encuentra la sección de Formato WebP:

  1. Marca la casilla para Crear versiones webp de imágenes
  2. Marca la casilla para Mostrar imágenes en formato webp…
  3. Selecciona el botón de radio para usar <PICTURE> etiquetas
  4. Si estás alojado en Kinsta y utilizas el CDN de Kinsta, introduce la URL de tu CDN de Kinsta en la casilla Si utilizas un CDN (te diremos cómo encontrar la URL del CDN de Kinsta a continuación)
Cómo habilitar las imágenes de WordPress WebP en Imagify

¿Cómo habilitar las imágenes de WordPress WebP en Imagify?

Si estás usando el CDN de Kinsta, puedes encontrar la URL de tu CDN abriendo tu sitio en el panel de control de MyKinsta y visitando la pestaña CDN de Kinsta de la configuración del sitio:

Cómo encontrar la URL del CDN de Kinsta

¿Cómo encontrar la URL del CDN de Kinsta?

Al igual que con ShortPixel, si estás alojado en Kinsta, necesitarías crear una regla de Nginx para los cubos de caché de WebP (simplemente acude al soporte de Kinsta).

Optimole

Optimole WordPress plugin

Optimole WordPress plugin

Optimole es un plugin de optimización de imágenes de WordPress que funciona de forma un poco diferente a Imagify y ShortPixel. Optimole puede comprimir y redimensionar automáticamente tus imágenes. Sin embargo, también tiene otras dos características notables:

  1. Puede servir tus imágenes a través de su propio CDN (alimentado por Amazon CloudFront).
  2. Ofrece imágenes adaptables en tiempo real por las que Optimole entregará la imagen de tamaño óptimo para cada visitante. Por ejemplo, alguien que navega en una pantalla pequeña obtendrá una imagen de menor resolución que alguien que navega en una pantalla de Retina.

Este enfoque es similar a otros servicios de optimización/manipulación en tiempo real como Cloudinary, imgix, KeyCDN Image Processing, etc.

Como parte de esta optimización de imágenes en tiempo real, Optimole también puede entregar imágenes WebP a los visitantes con navegadores que lo soporten.

Optimole tiene un plan gratuito limitado que puede servir imágenes a unos 5.000 visitantes al mes. Después de eso, los planes pagados comienzan a 19 dólares por mes para ~25.000 visitantes.

Para empezar, necesitarás instalar el plugin de WordPress.org y activarlo con una llave API (que puedes obtener registrándote para obtener una cuenta gratuita de Optimole).

Una vez que lo hagas, Optimole comenzará a optimizar automáticamente tus imágenes y a entregarlas a través de su CDN. El soporte de WebP está activado por defecto, así que no hay necesidad de activarlo manualmente.

Para configurar otros ajustes, como los niveles de compresión y el comportamiento de escalado, puedes ir a Media → Optimole → Settings:

El área de configuración de Optimole - Las imágenes de WordPress WebP están habilitadas de forma predeterminada

El área de configuración de Optimole – Las imágenes de WordPress WebP están habilitadas de forma predeterminada

Ya que Optimole se encarga de entregar tus imágenes a través de su propio CDN, no hay necesidad de establecer ninguna regla de Nginx si estás alojado en Kinsta.

Aumentar ⬆️ velocidad del sitio mientras se disminuyen ⬇️ los tamaños de imagen. Aprende a aprovechar el formato WebP en tu sitio #WordPress 💥Click to Tweet

Resumen

Las imágenes de tu sitio de WordPress constituyen una gran parte del tamaño del archivo de una página promedio. Si puedes encontrar formas de reducir el tamaño de tus imágenes, puedes acelerar tu sitio sin cambiar la experiencia de tus visitantes.

WebP es un formato de imagen moderno que puede ofrecer una reducción de ~25% en el tamaño de los archivos frente a los archivos comparativos JPEG o PNG.

La mayoría de los navegadores modernos son compatibles con el WebP y alrededor del 77% de los usuarios de Internet tienen un navegador compatible con el WebP. Sin embargo, algunos navegadores, en particular Safari, todavía no ofrecen soporte para WebP, por lo que no se pueden servir imágenes de WebP a todos los visitantes.

Para resolver este problema, se puede utilizar un plugin de WordPress que convierte las imágenes en WebP y sirve las versiones WebP a los visitantes cuyos navegadores soportan este formato, mientras que las imágenes originales se utilizan para los visitantes cuyos navegadores no lo soportan.

Tres plugins que pueden ayudarte a hacer esto son:

Para más tácticas de optimización de imágenes, visita nuestra guía completa para optimizar las imágenes para el rendimiento de la web.

¿Tienes alguna pregunta sobre cómo usar WebP en WordPress? Pregúntanos en los comentarios.


Si le ha gustado este artículo, entonces le encantará la plataforma de Kinsta WordPress hosting. Acelere su sitio y reciba soporte 24/7 de nuestro equipo de WordPress veterano. Nuestra infraestructura potenciada por Google Cloud se centra en escalamiento automático, rendimiento y seguridad. ¡Déjenos mostrarle la diferencia con Kinsta! Conozca nuestros planes