Si quieres acelerar tu sitio de WordPress, reducir el tamaño de los archivos de tus imágenes ofrece un retorno significativo de tu inversión. De media, las imágenes representan aproximadamente la mitad del tamaño de archivo de una página web, por lo que incluso pequeñas mejoras pueden producir resultados espectaculares. ¡WebP puede ser de gran ayuda en este sentido!
WebP es un formato de imagen moderno que puede ayudarte a reducir el tamaño de tus imágenes sin cambiar su aspecto. Por término medio, aprender a convertir una imagen a WebP puede reducir su tamaño de archivo en un ~25-35% sin pérdida perceptible de calidad.
La mayoría de los navegadores modernos y WordPress a partir de la versión 5.8 son compatibles con WebP de forma predeterminada. En este artículo, profundizaremos en este nuevo y emocionante formato de imagen y te enseñaremos cómo puedes aprovechar sus increíbles ventajas.
¿Preparado? ¡Empecemos!
¿Qué es WebP?
¿Qué es un archivo WebP? En pocas palabras, WebP es un formato de imagen desarrollado por Google para optimizar las imágenes mejor que los formatos de imagen populares (en ese momento). Por ejemplo, existen formatos de imagen como JPEG o JPG y PNG.
Nota: Comprueba cómo los diferentes tipos de archivos de imagen pueden afectar a la velocidad de tu sitio web.
WebP se centra en ofrecer el mismo archivo de imagen, sólo que con tamaños de archivo más pequeños. Al reducir el tamaño de tus archivos de imagen, puedes seguir ofreciendo la misma experiencia a los visitantes de tu sitio web, pero éste se cargará más rápido.
Por ejemplo, en el estudio de Google sobre la compresión WebP, Google descubrió que un archivo de imagen WebP tiene un tamaño medio:
- Un 25-34% más pequeño que una imagen JPEG comparable.
- Un 26% más pequeño que una imagen PNG comparable.
Esa es la razón por la que si ejecutas tu sitio a través de PageSpeed Insights, una de las muchas recomendaciones es Servir imágenes en formatos de nueva generación como WebP:
Entonces, ¿cómo consigue el formato WebP de Google estas reducciones en el tamaño de los archivos?
En primer lugar, admite la compresión con pérdida (lossy) y sin pérdida (lossless), por lo que la reducción exacta dependerá de si utilizas compresión con o sin pérdida.
Con la compresión con pérdida, WebP utiliza algo llamado «codificación predictiva» (predictive coding) para reducir el tamaño del archivo. La codificación predictiva utiliza los valores de los píxeles vecinos de una imagen para predecir valores y luego sólo codifica la diferencia. Se basa en la codificación de fotogramas clave (key frame) de VP8.
WebP sin pérdidas utiliza un conjunto mucho más complicado de métodos 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 soportan WebP?
Para que las imágenes WebP funcionen, es necesario que el navegador web del visitante las admita. Por desgracia, aunque la compatibilidad de los navegadores ha aumentado mucho, la compatibilidad con WebP todavía no es universal.
Las imágenes WebP son compatibles con navegadores populares como:
- Chrome (escritorio y móvil)
- Firefox (escritorio y móvil)
- Microsoft Edge
- Safari para iOS y macOS (sólo macOS 11 Big Sur y versiones posteriores)
- Opera (escritorio y móvil)
En el momento de escribir este artículo, Safari solo admite imágenes WebP de forma parcial.
Internet Explorer tampoco es compatible con WebP (pero Edge sí, ya que está basado en Chromium). Sin embargo, el uso de IE se ha reducido a menos del 1% del total de usuarios de Internet. ¡Lo cual es una excelente noticia para todos en la web!
En total, alrededor del 95 % de los usuarios de Internet utilizan un navegador compatible con WebP. Así que, aunque sin duda cuenta con el apoyo de la mayoría, ese 5 % supone un pequeño obstáculo, especialmente cuando se trata de usuarios de Safari en versiones antiguas de macOS. En nuestro tutorial de WordPress WebP que encontrarás a continuación, te enseñaremos cómo gestionar esto para que todos tus visitantes disfruten de una gran experiencia.
Comparación de tamaño entre WebP, JPG y PNG
Según las pruebas de Google, las imágenes WebP son:
- Un 25-34% más pequeñas que las imágenes JPEG comparables.
- Un 26% más pequeñas que las imágenes PNG similares.
Si quieres saber más sobre la metodología de Google, a continuación encontrarás enlaces directos a los resultados completos:
Ambas pruebas se basan en más de 11.000 imágenes, entre las que se incluyen:
- La famosa imagen Lenna
- 24 imágenes de la suite de imágenes en color verdadero 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 utilizar imágenes WebP en WordPress
A partir de WordPress 5.8, podrás utilizar el formato de imagen WebP del mismo modo que los formatos JPEG, PNG y GIF. Sólo tienes que subir tus imágenes a tu Biblioteca Multimedia e incluirlas en tu contenido. Como las versiones 5.8 y posteriores de WordPress admiten el formato WebP de forma predeterminada, no es necesario instalar plugins de terceros para subir imágenes WebP. Esto debería ser suficiente para la mayoría de los casos de uso habituales.
Para empezar de inmediato, puede consultar nuestra guía rápida sobre el uso de imágenes WebP para WordPress 5.8 y versiones posteriores. Te recomendamos que leas las advertencias sobre la compatibilidad con WebP en WordPress.
Sin embargo, alrededor del 5 % de los usuarios (principalmente usuarios de Safari en versiones antiguas de macOS) utilizan un navegador web que no es compatible con WebP. Si conviertes imágenes WebP y las utilizas directamente en tu contenido, esos visitantes no podrán ver tus imágenes, lo que arruinaría su experiencia de navegación.
Además, generar imágenes WebP no es tan sencillo como obtener una imagen JPG/JPEG, que es el formato de archivo de imagen por defecto en la mayoría de cámaras, smartphones y bibliotecas de imágenes online. WordPress no admite la conversión automática de imágenes al formato WebP (¡todavía!).
¡No te preocupes! Hay una solución.
Puedes utilizar un plugin de WordPress que convierta tus imágenes originales al formato WebP y también proporcione la imagen original como alternativa si el navegador de un visitante no admite WebP.
Por ejemplo, si subes un archivo JPEG a tu sitio web, el plugin:
- Convertirá el archivo JPEG a WebP y servirá la versión WebP para Chrome, Firefox, Edge, etc.
- Mostrará el archivo JPEG original a los visitantes que naveguen con Safari (en versiones antiguas de macOS) y otros navegadores que no admitan WebP.
De esta forma, todos pueden ver tu imagen, y todos obtienen la experiencia más rápida posible.
A continuación, repasaremos algunos de los mejores plugins WebP para WordPress, todos ellos compatibles con Kinsta y la CDN de Kinsta.
Funcionalidad de Optimización de Imágenes de Kinsta
El primero no es exactamente un plugin, sino más bien una funcionalidad integrada: la Optimización de Imágenes de Kinsta.
Esta funcionalidad — 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 luego sirve el más pequeño de los dos archivos de imagen a tus visitantes.
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 enormemente tanto tus resultados SEO como la experiencia de tus usuarios. La funcionalidad aprovecha directamente la CDN ultrarrápida de Kinsta para entregar los archivos aún más rápido.
Los propietarios de sitios web pueden elegir entre compresión con pérdida o sin pérdida para sus imágenes WebP, en función de sus necesidades. La optimización también se puede activar o desactivar cuando se desee si es necesario realizar 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 MyKinsta.
- Ve a Sitios WordPress > nombre del sitio > CDN.
- Haz clic en el botón Ajustes bajo la sección Optimización de imágenes.
- Elige entre compresión sin pérdida y con pérdida, y haz clic en Guardar configuración.
Si aún no estás en la plataforma Kinsta, puedes probar la funcionalidad sin ningún coste programando una demostración.
Compresión Con o Sin pérdida
Puedes elegir entre compresión sin pérdida (lossless) o con pérdida (lossy) para tus archivos. Aunque ambos métodos comprimen tus archivos de imagen y eliminan sus metadatos, hay una gran diferencia entre ellos:
- Optimización de Imágenes Sin Pérdida (Lossless): La compresión de imágenes sin pérdida tiene un impacto nulo en la calidad de tus 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 Imagen con Pérdida (Lossy): La compresión de imágenes con pérdida puede reducir la calidad de tus imágenes. Elige esta opción para maximizar y priorizar la velocidad sobre la calidad de imagen.
A continuación, veremos algunos plugins instalables de WordPress para la optimización.
ShortPixel
ShortPixel es uno de los plugins de optimización de imágenes para WordPress más populares, que puede ayudarte a redimensionar y comprimir automáticamente las imágenes que subas a tu sitio de WordPress.
Como parte de su lista de funcionalidades, ShortPixel también puede ayudarte a convertir automáticamente las imágenes a WebP y servirlas a los navegadores que lo admitan.
ShortPixel contabiliza como un crédito cada tamaño de imagen de WordPress que optimizas. Por lo tanto, si quieres optimizar varios tamaños de miniaturas, una sola imagen podría llegar a consumir varios créditos. No hay límites de tamaño de archivo para las imágenes.
Puedes distribuir tus créditos ShortPixel entre un número ilimitado de sitios web – no hay límites por sitio (y todos tus sitios web pueden utilizar la misma cuenta ShortPixel).
Para utilizar ShortPixel para servir imágenes WebP en WordPress, tendrás que instalar el plugin ShortPixel de WordPress.org y añadir tu clave API (que puedes obtener registrándote para obtener una cuenta ShortPixel gratuita).
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 utilizar y si redimensionar o no las imágenes:
Para activar las imágenes WebP, ve a la pestaña Avanzado y:
- Marca la casilla Imágenes WebP
- Marca la casilla Entregar las versiones WebP… (aparece después de marcar la primera casilla)
- Selecciona la opción Utilizar la sintaxis de la etiqueta <PICTURE> (aparece después de marcar la casilla anterior)
- Deja la selección por defecto Sólo a través de los hooks de WordPress
A continuación, guarda los 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 ponerte en contacto con el soporte de Kinsta, y estaremos encantados de establecer la configuración del servidor por ti.
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 subas a tu sitio de WordPress. Además, también puede ayudarte a convertirlas a WebP y servir esas versiones a los visitantes con navegadores que lo soporten.
En términos de funcionalidades, ShortPixel e Imagify comparten muchas similitudes. La diferencia más significativa viene cuando miras los precios. Mientras que ShortPixel te cobra en función de las imágenes, sin límite de tamaño por imagen, Imagify te cobra en función del tamaño total del archivo, sin límite de imágenes.
Así que si necesitas optimizar muchas imágenes grandes, el método de ShortPixel puede ser más barato. Pero si necesitas optimizar muchas imágenes pequeñas, el método de Imagify puede ser más asequible.
Imagify tiene un plan gratuito limitado que permite 25 MB de optimizaciones al mes. A partir de ahí, los planes de pago comienzan en 4,99 $ al mes por hasta 1 GB o 9,99 $ por un único crédito de 1 GB.
Al igual que ShortPixel, puedes distribuir los límites de tu cuenta entre un número ilimitado de sitios web.
Para utilizar Imagify para enviar imágenes WebP de WordPress, tendrás que instalar el plugin desde WordPress.org y añadir tu clave API para empezar.
Una vez que hayas activado el plugin, puedes utilizar el cuadro de Ajustes Generales para elegir tu nivel de compresión.
Para activar las imágenes WebP, desplázate hasta la sección Optimización y encuentra la sección Formato WebP:
- Marca la casilla Crear versiones webp de las imágenes
- Marca la casilla Mostrar imágenes en formato webp…
- Selecciona el botón de opción para utilizar la etiqueta <picture>
Al igual que con ShortPixel, si estás alojado en Kinsta, necesitarás crear una regla Nginx para los buckets de caché WebP (contacta con el soporte de Kinsta).
Optimole
Optimole es un plugin de optimización de imágenes para WordPress que funciona de forma algo 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 CDN (con tecnología Amazon CloudFront).
- Ofrece imágenes adaptativas en tiempo real, mediante las cuales Optimole entregará la imagen del tamaño óptimo para cada visitante. Por ejemplo, alguien que navegue en una pantalla pequeña obtendrá una imagen de menor resolución que alguien que navegue en una pantalla Retina.
Este enfoque es similar al de otros servicios de optimización/manipulación en tiempo real como Cloudinary, imgix, KeyCDN Image Processing, etc.
Optimole también puede entregar imágenes WebP a los visitantes con navegadores que lo soporten como parte de esta optimización de imágenes en tiempo real.
Optimole tiene un plan gratuito limitado que puede gestionar el servicio de imágenes a unos 5000 visitantes al mes. Después, los planes de pago empiezan en 19 $ al mes para ~25.000 visitantes.
Para empezar, tendrás que instalar el plugin desde WordPress.org y activarlo con una clave API (que puedes obtener registrándote en una cuenta gratuita de Optimole).
Una vez hecho esto, Optimole empezará a optimizar automáticamente tus imágenes y a distribuirlas a través de su CDN. La compatibilidad con WebP está activada por defecto, así que no es necesario activarla manualmente.
Para configurar otros ajustes, como los niveles de compresión y el comportamiento de escalado, puedes ir a Medios → Optimole → Ajustes:
Como Optimole gestiona la entrega de tus imágenes a través de su CDN, no es necesario configurar ninguna regla Nginx si estás alojado en Kinsta.
Resumen
Las imágenes de tu sitio de WordPress constituyen una gran parte del tamaño de archivo de una página promedio. Si puedes encontrar formas de reducir el tamaño de tus imágenes, puedes acelerar tu sitio sin perjudicar la experiencia del usuario. WebP es un formato de imagen moderno que hace exactamente eso, ofreciendo una reducción de ~25% en el tamaño del archivo en comparación con los archivos JPEG o PNG.
Alrededor del 95 % de los usuarios de Internet ya utilizan un navegador compatible con WebP. Las versiones de WordPress 5.8 y posteriores también son compatibles con WebP de forma predeterminada. Por lo tanto, no hay razón para no utilizarlo.
Sin embargo, una minoría de navegadores, en particular Safari en versiones antiguas de macOS, aún no ofrecen compatibilidad con WebP. Por lo tanto, todavía no es posible mostrar imágenes WebP a todos los visitantes. Para solucionar este problema, puedes utilizar un plugin de WordPress que convierte las imágenes a WebP y muestra las versiones WebP a los visitantes cuyos navegadores son compatibles, mientras que utiliza las imágenes originales para los visitantes cuyos navegadores no lo son.
Para más tácticas de optimización de imágenes, consulta nuestra guía completa de optimización de imágenes para el rendimiento web. Y no olvides que los clientes de Kinsta pueden generar automáticamente imágenes WebP comprimidas, sin coste de espacio en disco, aprovechando la funcionalidad de Optimización de Imágenes integrada y gratuita de Kinsta.
Si tienes alguna pregunta sobre el uso de WebP en WordPress, ¡no dudes en hacérnosla llegar en los comentarios a continuación!
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.
