Cómo servir imágenes WebP en lugar de JPG o PNG con WordPress


Google se encuentra en la cima de la cadena alimentaria de internet. La compañía influye (o dicta) mucho de lo que sucede en línea. Y su nuevo formato de imagen, WebP, continúa esa tendencia. Dado que la velocidad de carga de la página es cada vez más importante (principalmente debido a Google Page Rank), los desarrolladores y diseñadores consideran la compresión de imágenes como la forma más fácil de reducir los tiempos de carga. Las imágenes WebP de Google son ~ 30% más pequeñas que las imágenes JPG o PNG típicas y mantienen una calidad equivalente. Y lo mejor de todo, no tiene que preocuparse por convertir sus imágenes a WebP manualmente.

En este artículo, le mostraremos cómo usar este nuevo formato de imagen con WordPress, aunque todavía no es compatible de forma predeterminada.

Hagámoslo.

(incrustar) https://www.youtube.com/watch?v=1_q09vCTQwc (/ incrustar)

Suscríbase a nuestro canal de Youtube

Usando Optimole para Servir WebP en WordPress

WebP, como formato de imagen, no es compatible de forma predeterminada en WordPress. Puedes subir una imagen .webp, pero al igual que un archivo SVG, encontrarás mensajes de error. Y de nuevo, como usar Archivos SVG con WordPress, hay una solución fácil a través de un complemento para hacer que su sitio WP haga zoom de inmediato.

Usando imágenes WebP con WordPress

De los servicios WebP que hemos probado, nuestro favorito es Optimole. Hemos tenido la mejor suerte de hacerlo funcionar con ajustes mínimos, por lo que queremos guiarlo a través de cómo configurarlo y hacer que su instalación de WordPress sea compatible con WebP de la manera más sencilla posible.

Primero, obviamente, vas a querer descargar e instalar el complemento en sí. Está en el repositorio de WP.org, y es totalmente gratuito. Como es el servicio basado en API que lo potencia (hasta cierto punto). Si bien es posible convertir imágenes tradicionales a WebP sobre la marcha utilizando PHP, no todos los servidores web le dan permiso a su servidor. Si tiene ese permiso, también puede buscar en el WebP Express enchufar. Tienes mucho control con eso, pero es uno que requiere más ajustes para que funcione sin problemas.

Una vez que tenga Optimole instalado y activado en su sitio web de WordPress, encontrará una nueva opción de menú en Medios – Optimole.

Su clave API Optimole

Usando imágenes WebP con WordPress

Antes de poder acceder a cualquier configuración o configuración, debe tener una cuenta Optimole. Si ya ha configurado uno, puede hacer clic en el Ya tengo una clave API botón. Si no, Registro y clave de API de correo electrónico. La cuenta básica para una clave API es gratuita, y obtienes aproximadamente 5,000 visitas en ese nivel. Si necesita más que eso, hay niveles de precios disponibles.

Usando imágenes WebP con WordPress

Optimole define una visita como "cualquiera que visite su sitio una vez (…) Cada usuario solo se cuenta una vez. No importa lo que hagan en su sitio, cuántas imágenes descarguen o cuántas páginas visiten; es solo un usuario. Si abandonan su sitio y regresan el mismo día, siguen siendo solo un usuario."

Una vez que se quede sin las visitas medidas, solo las imágenes de WebP dejarán de publicarse. Tus imágenes no lo hacen. Encontrará la clave API en su panel de Optimole en la parte superior.

Usando imágenes WebP con WordPress

Simplemente péguelo en su panel de control de WordPress y estará listo para comenzar a servir imágenes de WebP con WordPress.

Usando imágenes WebP con WordPress

Sus paneles de Optimole WordPress

En su panel de WordPress, obtiene información básica sobre la optimización de su WebP. Esto le permite solucionar problemas y evaluar qué tan exitosa es realmente la aceleración. De esa manera, puede entrar y ajustar varias configuraciones.

Usando imágenes WebP con WordPress

Primero, ve la cuenta adjunta a la API y, en la parte inferior de la pantalla, el complemento muestra las imágenes optimizadas más recientemente. Puede ver cuánto más pequeñas son las imágenes WebP que se sirvieron de las originales que cargó en WordPress.

Luego está el Posible Cuestiones pestaña en la parte superior. A nadie le gusta ver la pestaña resaltada, pero también todos necesitamos ver qué conflictos pueden surgir también.

Usando imágenes WebP con WordPress

El problema principal que enfrentamos es con otros complementos de compresión y entrega de imágenes. Como puede ver en la imagen de arriba, el complemento Jetpack funciona de manera similar a Optimole a través del Photon APIT, para que puedan golpear cabezas. Para nosotros, esto se manifestó como ninguna imagen entregada al visitante en absoluto. No hemos tenido problemas con otros servicios de compresión como TinyPNG o Smush.

Usando los paneles

Si desea información más detallada sobre cómo le está yendo a su sitio con WebP, el panel de control externo de Optimole tiene esa información para usted.

Usando imágenes WebP con WordPress

En lugar de simplemente 9.5x más pequeño, puede ver los tamaños de archivo reales que se han servido. Además de los archivos que se archivan durante un período de 30 días.

Usando imágenes WebP con WordPress

También puede establecer Marcas de agua en el panel de Optimole (o WP) para que cuando alguien reciba un WebP desde su sitio de WordPress, su logotipo se active automáticamente. Es un proceso simple y obtienes control sobre la opacidad, la ubicación, etc.

Usando imágenes WebP con WordPress

Básicamente, puede hacer lo mismo desde ambos paneles. Ya sea bajo el Configuraciones pestaña en WordPress, o visitando el tablero externo en Optimole. Depende completamente de con qué se sienta más cómodo, así como del nivel de datos que necesita en un momento dado.

Además, podrá controlar el nivel de compresión, carga lenta y cuándo / si ciertas imágenes se sirven como WebP en función de los nombres de archivo. Encontrará todo esto debajo de Configuraciones pestaña de Medios – Optimole.

Usando imágenes WebP con WordPress

Terminando

La mejor parte sobre el uso de WebP con sitios web de WordPress es que no tiene que trabajar manualmente con los archivos. Sin cargas adicionales, sin tiempo de compresión adicional, nada. Debido a cómo funcionan las API, todos los cálculos y procesos se ejecutan sobre la marcha en tiempo real. Google realmente ha hecho que Internet funcione más rápido usando WebP en lugar de JPG o PNG. Sin embargo, el mayor beneficio es que las imágenes mantienen la misma calidad incluso con un tamaño significativamente reducido. Puede ser de autoservicio por parte de Google lograr que use su formato para acelerar su sitio para que pueda clasificarlo mejor, la experiencia del usuario final también es mejor. Y eso es lo que importa al final.

¿Qué le parece servir imágenes de WebP a los visitantes de su sitio web?

Artículo presentado imagen por vladwel / shutterstock.com