Cómo usar las imágenes WebP en WordPress (reduzca el tamaño del archivo de imagen hasta en un 35%)

Si desea acelerar su sitio web de WordPress, reduzca el tamaño del archivo. ¡WebP puede ayudarlo 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 en WebP puede reducir el tamaño del archivo en ~ 25-35%, sin pérdidas de calidad visibles.
La mayoría de los navegadores modernos y WordPress 5.8+ aceptan webp en el cuadro. En este artículo, profundizaremos en este nuevo formato de imagen interesante y le mostraremos cómo puede aprovechar la maravilla. ¿Listo? ¡Vamos a empezar!
¿Qué es WebP? Entonces, ¿qué es un archivo webp? En resumen, 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: Consulte cómo los diferentes tipos de archivos de imagen pueden afectar la velocidad de su sitio web. WebP se centra en la entrega del mismo archivo de imagen, solo con archivos más pequeños. Al reducir el tamaño de sus archivos de imagen, puede continuar brindando la misma experiencia a los visitantes de su sitio, pero su sitio se cargará más rápido.
Por ejemplo, en el estudio de compresión de Google WebP, Google descubrió que un archivo de imagen WebP es en promedio:
25-34% más bajo que una imagen JPEG comparable.
26% más bajo que una imagen PNG comparable.
Es por eso que, si ejecuta su sitio a través de PageSePeed Insights, una de las muchas recomendaciones es transmitir imágenes en la próxima generación, como WebP: Google PageSpeed ​​Insights sugiere el uso de imágenes WebP, por lo que, a medida que sucede, el formato WebP de Google obtenga estos archivos. ¿Descuentos de tamaño? En primer lugar, acepta la compresión con pérdidas y sin pérdidas, por lo que la reducción exacta dependerá de si usa pérdidas o pérdidas.

Con la compresión de pérdidas, WebP utiliza algo llamado “codificación predictiva” para reducir el tamaño del archivo. La codificación predictiva utiliza valores de píxeles vecinos en una imagen para predecir valores y luego solo codifica la diferencia. Se basa en la codificación de los marcos de clave VP8. WebP sin pérdidas utiliza un conjunto mucho más complicado de métodos que han sido desarrollados 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 acepta WebP? Para que las imágenes de WebP funcionen, el navegador web de un visitante debe aceptarlas. Desafortunadamente, si bien el soporte del navegador ha aumentado mucho, la compatibilidad de WebP aún no es universal.
Las imágenes de WebP son aceptadas por navegadores populares como:
Chrome (escritorio y móvil)
Firefox (escritorio y móvil)
Microsoft Edge
iOS y macOS Safari (solo macOS 11 Big Sur y posterior)
Ópera (escritorio y móvil)
Cuando escribimos esta publicación, Safari solo acepta parcialmente las imágenes WebP. Además, Internet Explorer no tiene soporte para WebP (pero Edge acepta WebP porque se basa en el cromo). Sin embargo, el uso de IE disminuyó a menos del 1% del total de usuarios de Internet. ¡Es una ventaja para todos en la web! En total, aproximadamente el 95% de los usuarios de Internet usan un navegador que acepta WebP. Entonces, aunque ciertamente tiene un soporte mayoritario, que el 5% es un obstáculo menor, especialmente cuando se trata de usuarios de safari en versiones de MacOS más antiguas. En nuestro tutorial de WordPress WebP a continuación, le mostraremos cómo administrar esto, para que todos sus visitantes tengan una gran experiencia. Comparación de las dimensiones WebP vs JPG vs PNG Según las pruebas de Google, las imágenes web son:
25-34% más bajo que las imágenes JPEG comparables.

26% más bajo que las 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:
Jpeg
Png
Ambas pruebas se basan en más de 11,000 imágenes, que incluyen:
La famosa imagen de Lenna
24 imágenes de la suite Kodak True Color Images
100 fotos de tecnick.com
Una muestra aleatoria de más de 11,000 imágenes de Google Image
Cómo usar las imágenes de WordPress WebP que comienzan con WordPress 5.8, podrá usar el formato de imagen Imem de la misma manera que los formatos JPEG, PNG y GIF. Sube tus imágenes en tu biblioteca de medios e incluyas en el contenido. Debido a que WordPress 5.8+ valora el formato WebP, no tiene que instalar complementos de terceros para cargar imágenes webp. Esto 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 pase por las advertencias de advertencia de WordPress WebP. Sin embargo, alrededor del 5% de las personas (principalmente usuarios de Safari más antiguos) usan un navegador web que no acepta WebP. Si convierte las imágenes WebP y las usa directamente en su contenido, esos visitantes no pudieron ver sus imágenes, lo que destruiría su experiencia de navegación. Además, generar imágenes WebP no es tan simple 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 acepta la conversión automática de imágenes IMA en formato (¡todavía!).
¡Sin ofender! Hay una solucion. Puede usar un complemento de WordPress que convierta sus imágenes originales en el formato WebP y también proporciona la imagen original como reserva si el navegador de un visitante no acepta WebP. Por ejemplo, si sube un archivo JPEG en su sitio, el complemento:
Convierta el archivo JPEG en WebP y sirva la versión webp para Chrome, Firefox, Edge, etc.
Muestre el archivo JPEG original a los visitantes Safari (en versiones de MacOS más antiguas) y otros navegadores que no aceptan WebP. De esta manera, todos pueden ver su imagen y todos se benefician de la experiencia más rápida posible.
A continuación, analizaremos algunos de los mejores complementos de WordPress WebP, todo lo que funcione con Kinsta y Kinsta CDN.
Información Si aloja en Kinsta, deberá comunicarse con nuestra asistencia para que podamos crear una regla NGINX para WebP Cache para algunos de estos complementos. Shortpíxel
WordPress ShortPixel ShortPixel Plugin es una optimización popular de imágenes de WordPress que puede ayudarlo a cambiar el tamaño y comprimir automáticamente las imágenes en su sitio de WordPress.
Regístrese para el boletín
¿Quieres saber cómo aumentar nuestro tráfico por más del 1000%? ¡Únase a las más de 20,000 personas que reciben nuestro boletín semanal con los consejos de WordPress!
Suscríbase ahora

Como parte de la lista de características, ShortPixel también puede ayudarlo a convertir automáticamente las imágenes en WebP y transmitir esas imágenes a los navegadores que las aceptan. ShortPixel tiene un plan limitado gratuito que le permite optimizar las imágenes gratuitas de ~ 100 por mes. Los planes pagados comienzan desde $ 4.99 por mes por hasta 5,000 imágenes/créditos o $ 9.99 una vez por un paquete de préstamos de 10,000. ShortPixel cuenta cada tamaño de imagen de WordPress que optimiza como crédito. Entonces, si desea optimizar varias dimensiones de miniaturas de imagen, una sola imagen podría usar muchos créditos. No hay límites para el tamaño del archivo de tamaño.
Puede distribuir sus préstamos ShortPixel en sitios web ilimitados, no hay límites en el sitio (y todos sus sitios pueden usar el mismo shortpixel). Para usar ShortPixel para transmitir imágenes WebP en WordPress, deberá instalar el complemento WordPress.org y agregar la tecla API (que puede obtener para una cuenta gratuita de ShortPixel). En la pestaña General, puede configurar la configuración básica de cómo funciona la optimización de imágenes. Por ejemplo, qué nivel de compresión usar y si cambiar el tamaño o no las imágenes:
Cómo establecer el nivel de compresión y el tamaño de la imagen en shortpixel para activar las imágenes webp, vaya a la pestaña avanzada y:
Marque la casilla para imágenes webp
Marque la casilla para entregar las versiones de WebP … (esto aparece después de marcar la primera casilla)

Seleccione el botón de opción para usar la sintaxis de etiquetado (aparece después de la casilla anterior marcada)

Deje la opción predeterminada solo mediante la selección de WordPress Hooks
Cómo activar las imágenes de WordPress WebP en ShortPixel y luego guarde sus cambios. Si aloja en Kinsta, ShortPixel le dará un mensaje de advertencia sobre la configuración de la configuración del servidor en NGINX. Para configurar estas configuraciones, puede comunicarse con Kinsta Assistance y nos alegrará establecer la configuración del servidor para usted
Plugin WordPress Imagfy Image es un complemento popular de optimización de imágenes del mismo desarrollador que WP Rocket (uno de los pocos caché que funciona con Kinsta).
¿Estás cansado de un host lento para tu sitio de WordPress? Ofrecemos servidores extremadamente rápidos y asistencia de clase mundial 24/7 de expertos en WordPress. Verifique nuestros planes para comprimir y cambiar el tamaño de las imágenes que cargue en su sitio de WordPress. Luego también puede ayudarlo a convertirlos en webp y dar esas versiones a los visitantes con navegadores que lo aceptan. En cuanto a las características, ShortPixel e Imagify tienen muchas similitudes. La diferencia más significativa se produce cuando observa los precios. Mientras que ShortPixel lo cobra en función de las imágenes de tamaño de imagen, Imagify lo cobra en función del tamaño total del archivo, sin límite de imagen. Entonces, si tiene que optimizar muchas imágenes grandes, el enfoque de ShortPixel podría ser más barato. Pero si tiene que optimizar muchas imágenes pequeñas, el enfoque de Imagify puede ser más accesible. Imagify tiene un nivel limitado gratuito que permite 25 MB de optimizaciones por mes. Después de eso, los planes pagados comienzan desde $ 4.99 por mes por hasta 1 GB o $ 9.99 para un préstamo único de 1 GB. Al igual que ShortPixel, puede compartir los límites de su cuenta en sitios web ilimitados. Para usar Imagify para entregar imágenes webp WordPress, deberá instalar el complemento WordPress.org y agregar la tecla API para iniciar. Una vez que haya activado el complemento, puede usar el cuadro de configuración general para elegir el nivel de compresión.
Cómo establecer el nivel de compresión en Imagify para activar las imágenes WebP, desplácese hacia abajo hasta la sección de optimización y busque la sección de formato WebP:

Marque la casilla para crear versiones web de la imagen

Verifique la casilla para mostrar imágenes en formato webp … seleccione el botón de radio para usar las etiquetas
Cómo activar las imágenes de WordPress WebP en Imagify como para ShortPixel, si aloja en Kinsta, deberá crear una regla Nginx para Cache WebP (contacto con el soporte de Kinsta).Óptimo
Plugin WordPress Optimole Optimole es un complemento de optimización de imágenes de WordPress que funciona ligeramente diferente de Imagify y ShortPixel.Optimole puede comprimir y cambiar el tamaño de las imágenes automáticamente.Sin embargo, tiene dos características notables:

Puede servir sus imágenes a través de su CDN (alimentado por Amazon CloudFront).
Ofrece imágenes adaptativas de tiempo real, por las cuales Optimole proporcionará la imagen de tamaño óptimo para cada visitante.Por ejemplo, alguien que navega en una pantalla pequeña obtendrá una imagen de resolución más baja que alguien que navegue en una pantalla de retina.
Este enfoque es similar a otros servicios de optimización/manipulación de tiempo real, como Cloudinity, IMGIX, Procesamiento de imágenes KeyCDN, etc. Optimole también puede entregar imágenes WebP a los visitantes con navegadores que lo aceptan, como parte de esta optimización de imágenes en tiempo real. Optimole tiene un plan limitado gratuito que puede administrar la transmisión de imágenes a unos 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 en wordpress.org y activarlo con una clave API (que puede obtener registrándose para una cuenta Optimole gratuita). Una vez que haga esto, Optimole comenzará a optimizar automáticamente las imágenes y entregarlas a través de su CDN. El soporte de WebP se activa de manera predeterminada, por lo que no necesita activarlo manualmente. Para configurar otras configuraciones, como los niveles de compresión y el comportamiento de escala, puede acceder al promedio → Optimole → Configuración: