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…
- 25-34% más pequeño que una imagen JPEG comparable.
- 26% más pequeño que una imagen comparable de PNG.
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:
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:
- Chrome (de escritorio y móvil).
- Firefox (de escritorio y móvil).
- Edge.
- Opera (de escritorio y móvil).
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):
Comparación del tamaño de WebP vs JPG vs PNG
De acuerdo con las pruebas de Google, las imágenes de WebP son:
- 25-34% más pequeñas que las imágenes JPEG comparables.
- 26% más pequeñas que las imágenes PNG comparables.
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:
- La famosa imagen de la Lenna
- 24 imágenes de la suite de imágenes true color de Kodak
- 100 imágenes de Tecnick.com
- Una muestra aleatoria de más de 11.000 imágenes de Google Image Search
¿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á:
- Convertir el archivo JPEG a WebP y usa la versión WebP para los visitantes que navegan con Chrome, Firefox, etc.
- Mostrar el archivo JPEG original a los visitantes que navegan con Safari y otros navegadores que no son compatibles con WebP.
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.
Optimización de Imágenes de Kinsta
No se trata exactamente de un plugin, sino de una función integrada: Optimización de Imágenes de Kinsta.
Esta función — a la que se accede a través del panel de control personalizado de Kinsta, MyKinsta — crea automáticamente copias WebP optimizadas de las imágenes originales de tu sitio y, a continuación, ofrece a tus visitantes el archivo de imagen más pequeño de los dos.
Al garantizar que siempre se recupera el archivo más pequeño posible, la optimización de imágenes aumenta inmediatamente los tiempos de carga, lo que puede mejorar en gran medida tanto los resultados SEO como la experiencia de los usuarios. La función aprovecha directamente la CDN ultrarrápida de Kinsta para entregar los archivos aún más rápido.
Los propietarios de sitios pueden elegir entre compresión con o sin pérdidas para sus imágenes WebP, en función de sus necesidades. La optimización también se puede activar o desactivar a voluntad si necesita hacer algunas pruebas.
La función de optimización de imágenes es totalmente gratuita para todos los clientes de Kinsta. Aquí tienes cómo activarla:
- Sube tus imágenes a tu biblioteca multimedia de WordPress alojada en Kinsta.
- Accede a tu panel de control MyKinsta.
- Ve a Sitios WordPress > nombre del sitio > CDN.
- Haz clic en el botón Configuración en la sección Optimización de imágenes.
- Haz clic en el botón Configuración en la sección Optimización de imágenes.
Si aún no estás en la plataforma Kinsta, puedes probar esta función sin ningún coste programando una demostración.
Compresión Con o Sin Pérdidas
Puedes elegir entre compresión con o sin pérdidas para tus archivos. Aunque ambos métodos comprimen los archivos de imagen y eliminan sus metadatos, hay una gran diferencia entre ellos:
- Optimización de Imágenes sin Pérdidas: La compresión de imágenes sin pérdidas no afecta a la calidad de las imágenes. Deberías elegir esta opción si la calidad de imagen es más importante para ti que la velocidad.
- Optimización de Imágenes con Pérdidas: La compresión de imágenes con pérdidas puede reducir la calidad de las imágenes. Elige esta opción para maximizar y priorizar la velocidad sobre la calidad de imagen.
A continuación, veremos algunos plugins que se pueden instalar en WordPress para la optimización.
ShortPixel
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 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:
Para habilitar las imágenes WebP, ve a la pestaña Avanzado y:
- Marca la casilla de Imágenes WebP
- Marca la casilla para entregar las versiones WebP… (esto aparece después de marcar la primera casilla)
- Selecciona el botón de radio para Usar la sintaxis de la etiqueta <PICTURE> (esto aparece después de marcar la casilla anterior)
- Deja el valor predeterminado Sólo a través de la selección de ganchos de WordPress
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 es un popular plugin de optimización de imágenes del mismo desarrollador que WP Rocket.
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.
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.
Para habilitar las imágenes WebP, desplazate hacia abajo a la sección de Optimización y encuentra la sección de Formato WebP:
- Marca la casilla para Crear versiones webp de imágenes
- Marca la casilla para Mostrar imágenes en formato webp…
- Selecciona el botón de radio para usar <picture> etiquetas
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 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:
- Puede servir tus imágenes a través de su propio CDN (alimentado por Amazon CloudFront).
- 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:
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.
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:
- ShortPixel.
- Imagify.
- Optimole.
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. Y no olvides que los clientes de Kinsta pueden generar automáticamente imágenes WebP comprimidas, sin ningún coste en espacio de disco, aprovechando la función integrada y gratuita de Optimización de Imágenes de Kinsta.
¿Tienes alguna pregunta sobre cómo usar WebP en WordPress? Pregúntanos en los comentarios.
Jon es el Director de Operaciones de Kinsta y colabora a diario con los equipos de ventas, atención al cliente y soporte técnico de Kinsta. Jon es un hombre de familia. Así que cuando no está golpeando frenéticamente las teclas de su portátil, suele estar ayudando a uno de sus hijos a arreglar una bicicleta o configurando Netflix para un niño impaciente en edad preescolar.
Deja una respuesta