Cómo utilizar imágenes WebP en WordPress (reducir el tamaño de los archivos de imagen hasta un 35%)

Si desea acelerar su sitio de WordPress, reducir el tamaño del archivo de sus imágenes ofrece un retorno significativo de su inversión. En promedio, las imágenes representan aproximadamente la mitad del tamaño de archivo de una página web, por lo que incluso las mejoras menores pueden producir resultados descomunales. ¡WebP puede ayudarte enormemente con eso!

WebP es un formato de imagen moderno que puede ayudarlo a reducir el tamaño de sus imágenes sin cambiar su apariencia. En promedio, aprender a convertir una imagen a WebP puede reducir el tamaño de su archivo entre un 25% y un 35% sin que se perciba una pérdida de calidad.

La mayoría de los navegadores modernos y WordPress 5.8+ son compatibles con WebP desde el primer momento. En este artículo, profundizaremos en este nuevo y emocionante formato de imagen y le mostraremos cómo puede aprovechar su genialidad.

¿Listo? ¡Empecemos!

¿Qué es WebP?

Entonces, ¿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, tiene formatos de imagen como JPEG o JPG y PNG.

Nota: Vea cómo los diferentes tipos de archivos de imagen pueden afectar la velocidad de su sitio web.

WebP se enfoca en entregar el mismo archivo de imagen, solo con tamaños de archivo más pequeños. Al reducir el tamaño de sus archivos de imagen, aún puede brindar la misma experiencia a los visitantes de su sitio web, pero su sitio se cargará más rápido.

Por ejemplo, en el estudio de compresión WebP de Google, Google descubrió que un archivo de imagen WebP tiene en promedio:

• 25-34% más pequeño que una imagen JPEG comparable.
• 26% más pequeño que una imagen PNG comparable.

Esa es la razón por la que si ejecuta su sitio a través de PageSpeed ​​Insights, una de las muchas recomendaciones es Sirve 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 del archivo?

Primero, admite la compresión con pérdida y sin pérdida, por lo que la reducción exacta dependerá de si está utilizando compresión con pérdida o sin pérdida.

Con la compresión con pérdida, WebP utiliza 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 valores y luego solo codifica la diferencia. Se basa en la codificación de fotogramas clave VP8.

Lossless WebP utiliza un conjunto de métodos mucho más complicado que fue desarrollado por el equipo de WebP.

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

¿Qué navegadores web admiten WebP?

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

Las imágenes WebP son compatibles con navegadores populares como:

• Cromo (escritorio y móvil)
• Firefox (escritorio y móvil)
• Microsoft Edge
• iOS y macOS Safari (macOS 11 Big Sur y versiones posteriores únicamente)
• Opera (escritorio y móvil)

En el momento en que escribimos esta publicación, Safari admite imágenes WebP solo parcialmente.

Internet Explorer también carece de compatibilidad con WebP (pero Edge admite WebP 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. ¡Eso es una bendición para todos en la web!

En total, alrededor del 95% de los usuarios de Internet utilizan un navegador compatible con WebP. Entonces, aunque ciertamente tiene un soporte mayoritario, ese 5% es un obstáculo menor, especialmente cuando se trata de usuarios de Safari en versiones anteriores de macOS. En nuestro tutorial de WordPress WebP a continuación, le mostraremos cómo manejar esto para que todos sus visitantes tengan una gran experiencia.

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

Según las pruebas de Google, las imágenes WebP son:

• 25-34% más pequeño que las imágenes JPEG comparables.
• 26% más pequeño que imágenes PNG similares.

Si desea obtener más información sobre la metodología de Google, puede encontrar enlaces directos a los resultados completos a continuación:

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

Cómo usar imágenes WebP en WordPress

A partir de WordPress 5.8, podrá utilizar el formato de imagen WebP de la misma forma que los formatos JPEG, PNG y GIF. Simplemente cargue sus imágenes en su Biblioteca de medios e inclúyalas en su contenido. Como WordPress 5.8+ admite el formato WebP de forma predeterminada, no es necesario instalar complementos de terceros para cargar imágenes WebP. Eso debería ser suficiente para los casos de uso más comunes.

Para comenzar de inmediato, puede consultar nuestro manual rápido sobre el uso de imágenes WebP en WordPress 5.8+. Le sugerimos que siga las advertencias sobre la compatibilidad con WebP en WordPress.

Sin embargo, alrededor del 5% de las personas (principalmente usuarios de Safari en macOS anteriores) usan un navegador web que no es compatible con WebP. Si convierte imágenes WebP y las usa directamente en su contenido, esos visitantes no podrán ver sus 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 predeterminado en la mayoría de las cámaras, teléfonos inteligentes y bibliotecas de imágenes en línea. WordPress no admite la conversión automática de imágenes al formato WebP (¡todavía!).

¡No te preocupes! Hay una solucion

Puede utilizar un complemento de WordPress que convierta sus imágenes originales al formato WebP y también proporciona la imagen original como respaldo si el navegador de un visitante no es compatible con WebP.

Por ejemplo, si carga un archivo JPEG en su sitio, el complemento:

• Convierta el archivo JPEG a WebP y proporcione la versión WebP para Chrome, Firefox, Edge, etc.
• Muestre el archivo JPEG original a los visitantes que navegan con Safari (en versiones anteriores de macOS) y otros navegadores que no son compatibles con WebP.

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

A continuación, repasaremos algunos de los los mejores complementos de WordPress para WebP, todos los cuales funcionan con Kinsta y Kinsta CDN.

ShortPixel

ShortPixel es un popular complemento de optimización de imágenes de WordPress que puede ayudarlo a cambiar el tamaño y comprimir automáticamente las imágenes que carga en su sitio de WordPress.

Como parte de su lista de funciones, ShortPixel también puede ayudarlo a convertir automáticamente imágenes a WebP y entregar esas imágenes a los navegadores que lo admitan.

ShortPixel tiene un plan gratuito limitado que le permite optimizar ~ 100 imágenes por mes de forma gratuita. Los planes pagados comienzan en $ 4.99 por mes por hasta 5,000 imágenes / créditos o $ 9.99 por única vez por un paquete de 10,000 créditos.

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

Puede distribuir sus créditos de ShortPixel en sitios web ilimitados; no hay límites por sitio (y todos sus sitios web pueden usar la misma cuenta de ShortPixel).

Para usar ShortPixel para servir imágenes WebP en WordPress, deberá instalar el complemento de WordPress.org y agregar su clave API (que puede obtener registrándose para obtener una cuenta gratuita de ShortPixel).

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

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

1. Marque la casilla para Imágenes WebP
2. Marque la casilla para Entregar las versiones de WebP … (esto aparece después de marcar la primera casilla)
3. Seleccione el botón de radio para Utilizando la sintaxis de la etiqueta (esto aparece después de marcar la casilla anterior)
4. Deja el predeterminado Solo a través de la selección de ganchos de WordPress

Luego, guarde sus cambios.

Si estás hospedando en Kinsta, ShortPixel le dará un mensaje de advertencia sobre la configuración de los archivos de configuración del servidor en Nginx. Para configurar estas configuraciones, puede comunicarse con el soporte de Kinsta, y estaremos encantados de configurar la configuración del servidor por usted.

Imagina

Imagify es un popular complemento de optimización de imágenes del mismo desarrollador que WP Rocket (uno de los pocos complementos de almacenamiento en caché que funcionan con Kinsta).

Puede comprimir y redimensionar automáticamente las imágenes que subes a tu sitio de WordPress. Luego, también puede ayudarlo a convertirlos a WebP y ofrecer esas versiones a los visitantes con navegadores que lo admitan.

En términos de características, ShortPixel e Imagify comparten muchas similitudes. La diferencia más significativa se produce cuando miras los precios. Mientras que ShortPixel le cobra en función de las imágenes sin límite de tamaño por imagen, Imagify le cobra en función del tamaño total del archivo, sin límite de imagen.

Entonces, si necesita optimizar muchas imágenes grandes, el enfoque de ShortPixel podría ser más económico. Pero si necesita optimizar muchas imágenes pequeñas, el enfoque de Imagify podría ser más asequible.

Imagify tiene un nivel gratuito limitado que permite 25 MB de optimizaciones por mes. Después de eso, los planes pagados comienzan en $ 4.99 por mes por hasta 1 GB o $ 9.99 por un crédito único de 1 GB.

Al igual que ShortPixel, puede distribuir los límites de su cuenta en sitios web ilimitados.

Para usar Imagify para entregar imágenes de WordPress WebP, deberá instalar el complemento de WordPress.org y agregar su clave API para comenzar.

Una vez que haya activado el complemento, puede usar el Configuración general cuadro para elegir su nivel de compresión.

Para habilitar las imágenes WebP, desplácese hacia abajo hasta Mejoramiento sección y encontrar el Formato WebP sección:

1. Marque la casilla para Crear versiones webp de imágenes
2. Marque la casilla para Mostrar imágenes en formato webp…
3. Seleccione el botón de radio para utilizar etiquetas
4. Si está alojando en Kinsta y usa Kinsta CDN, ingrese la URL de su Kinsta CDN (incluyendo https: //) en el Si usa una caja CDN (le diremos cómo encontrar la URL de Kinsta CDN a continuación)

Si está utilizando Kinsta CDN, puede encontrar la URL de su CDN abriendo su sitio en el panel de MyKinsta y visitando el Kinsta CDN pestaña de la configuración del sitio:

Al igual que con ShortPixel, si está alojando en Kinsta, deberá crear una regla de Nginx para los depósitos de caché de WebP (comuníquese con el soporte de Kinsta).

Optimole

Optimole es un complemento de optimización de imágenes de WordPress que funciona de manera un poco diferente a Imagify y ShortPixel. Optimole puede comprimir y cambiar el tamaño de sus imágenes automáticamente. Sin embargo, también tiene otras dos características notables:

1. Puede servir sus imágenes a través de su CDN (con tecnología de Amazon CloudFront).
2. Ofrece imágenes adaptativas en tiempo real mediante las cuales Optimole entregará la imagen de 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 a 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 admitan como parte de esta optimización de imágenes en tiempo real.

Optimole tiene un plan gratuito limitado que puede manejar el servicio de imágenes a alrededor de 5,000 visitantes por mes. Después de eso, los planes pagados comienzan en $ 19 por mes para ~ 25,000 visitantes.

Para comenzar, deberá instalar el complemento de WordPress.org y activarlo con una clave API (que puede obtener registrándose para obtener una cuenta Optimole gratuita).

Una vez que lo haga, Optimole comenzará a optimizar automáticamente sus imágenes y a entregarlas a través de su CDN. La compatibilidad con WebP está activada de forma predeterminada, por lo que no es necesario habilitarla manualmente.

Para configurar otras configuraciones, como niveles de compresión y comportamiento de escala, puede ir a Medios → Optimole → Configuración:

Dado que Optimole maneja la entrega de sus imágenes a través de su CDN, no es necesario configurar ninguna regla de Nginx si está alojando en Kinsta.

Aumente ⬆️ la velocidad del sitio mientras reduce ⬇️ el tamaño de las imágenes. Aprenda a aprovechar el formato WebP en su sitio #WordPress 💥Haz clic para tuitear

Resumen

Las imágenes de su sitio de WordPress constituyen una gran parte del tamaño de archivo de una página promedio. Si puede encontrar formas de reducir el tamaño de sus imágenes, puede acelerar su sitio sin dañar la experiencia del usuario. WebP es un formato de imagen moderno que hace exactamente eso al ofrecer una reducción de ~ 25% en el tamaño del archivo en comparación con los archivos JPEG o PNG comparativos.

Alrededor del 95% de los usuarios de Internet ya utilizan un navegador compatible con WebP. Las versiones de WordPress 5.8+ también son compatibles con WebP ahora. Así que no hay ninguna razón por la que no debas usarlo.

Sin embargo, una minoría de navegadores, especialmente Safari en versiones anteriores de macOS, todavía no ofrecen compatibilidad con WebP. Por lo tanto, todavía no puede servir imágenes WebP a todos los visitantes. Para abordar este problema, puede usar un complemento de WordPress que convierte imágenes a WebP y ofrece versiones de WebP a los visitantes cuyos navegadores lo admiten, mientras que usan las imágenes originales a los visitantes cuyos navegadores no lo hacen.

Para obtener más tácticas para optimizar imágenes, consulte nuestra guía completa para optimizar imágenes para el rendimiento web.

Si tiene alguna pregunta sobre el uso de WebP en WordPress, ¡pregúntenos en los comentarios a continuación!