Google está en la cima de la cadena alimenticia de Internet. La empresa influye (o dicta) mucho de lo que sucede en Internet. Y su nuevo formato de imagen, WebP, continúa esta tendencia. A medida que la velocidad de carga de la página se vuelve cada vez más importante (principalmente debido al Page Rank de Google), los desarrolladores y diseñadores consideran que la compresión de imágenes es la forma más fácil de reducir los tiempos de carga. Las imágenes de Google WebP son aproximadamente un 30% más pequeñas que las imágenes JPG o PNG típicas y mantienen una calidad equivalente. Lo mejor de todo es que no tiene que preocuparse por convertir imágenes a WebP manualmente.
En este artículo, le mostraremos cómo usar este nuevo formato de imagen en WordPress, aunque todavía no es compatible de forma predeterminada.
Vayamos al grano.
Suscríbete a nuestro canal de YouTube
Usando Optimole para WebP en WordPress
WebP como formato de imagen no es compatible de forma predeterminada en WordPress. Puede cargar una imagen .webp, pero al igual que el archivo SVG, recibirá mensajes de error. Y de nuevo, similar al uso de archivos SVG de WordPress, hay una solución fácil usando un complemento para hacer crecer su sitio WP.
De los servicios WebP que hemos probado, nuestro favorito es Optimol. Fuimos muy afortunados de que funcionara con un overclock mínimo, por lo que queremos guiarlo a través del proceso de configuración y hacer que su instalación de WordPress sea compatible con WebP de la manera más sencilla posible.
Primero, por supuesto que lo harás descargue e instale el complemento en sí. Está en el repositorio de WP.org y es completamente gratis. También lo es el servicio basado en API que lo alimenta (hasta cierto punto). Si bien es posible convertir imágenes tradicionales a WebP sobre la marcha con PHP, no todos los alojamientos otorgan este permiso a su servidor. Si tiene dichos permisos, también puede consultar WebP Express enchufar. Esto te da mucho control.pero es uno que requiere más ajustes para funcionar sin problemas.
Una vez que Optimole esté instalado y activado en su sitio de WordPress, encontrará la nueva opción de menú en Medios – Optimole.
Su clave API de Optimole
Debe tener una cuenta de Optimole para acceder a cualquier ajuste o configuración. Si ya tiene uno configurado, puede hacer clic en Ya tengo una clave API botón. Que no, Regístrese y envíe una clave API por correo electrónico. La cuenta básica para la clave API es gratuita y recibe alrededor de 5000 visitas en este nivel. Si necesita más, hay niveles de precios disponibles.
Optimole define una visita como «cualquier persona que visite su sitio una vez [. . .] Cada usuario se cuenta una sola 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, seguirán siendo solo un usuario.«
Cuando se agotan las visitas medidas, sólo dejan de mostrarse las imágenes WebP. Tus pinturas en sí mismas no lo son. Encontrará la clave API en su panel Optimole en la parte superior.
Simplemente péguelo nuevamente en su tablero de WordPress y estará listo para alojar imágenes WebP con WordPress.
Sus tableros Optimole WordPress
En tu panel de WordPress recibirás información básica sobre la optimización de WebP. Esto le permite solucionar problemas y evaluar la eficacia de la aceleración. De esta manera, puede ingresar y ajustar varias configuraciones.
Primero, verá la cuenta conectada 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 se muestran las imágenes WebP que las imágenes originales que cargó en WordPress.
Entonces hay Posible Temas pestaña en la parte superior. A nadie le gusta ver una pestaña resaltada, pero todos también necesitamos ver qué conflictos pueden surgir.
El problema principal con el que nos enfrentamos se refiere a 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 de Photon APITpara que se golpeen la cabeza. Para nosotros resultó en una falta de entrega del cuadro al visitante. No tuvimos problemas con otros servicios de compresión como TinyPNG o Smush.
Uso de tableros
Si necesita información más detallada sobre cómo su sitio maneja WebP, el tablero externo de Optimole tiene esta información para usted.
En lugar de solo 9,5 veces más pequeño, puede ver los tamaños reales de los archivos que se entregaron. Y también ese autoinforme dentro de los 30 días.
También puede establecer marcas de agua en el tablero de Optimole (o WP) para que cuando alguien reciba WebP de su sitio de WordPress, muestre automáticamente su logotipo. Es un proceso simple en el que tiene control sobre la transparencia, la ubicación, etc.
Básicamente, puede hacer lo mismo desde ambos paneles. O debajo Ajustes en WordPress o visitando un panel externo en Optimole. Depende completamente de con qué te sientas más cómodo, así como del nivel de datos que necesites en un momento dado.
Además, podrá controlar el nivel de compresión, la carga diferida y cuándo / si algunas imágenes se sirven como WebP en función de los nombres de archivo. Todo esto lo encontrarás bajo el lema Ajustes pestaña z Medios – Optimole.
Envase
La mejor parte de usar WebP con sitios de WordPress es que no tiene que trabajar con los archivos manualmente. Sin cargas adicionales, sin tiempo de compresión adicional, nada. Debido a la forma en que funcionan las API, todos los cálculos y procesos se ejecutan sobre la marcha en tiempo real. Google realmente ha hecho que Internet sea más rápido al usar WebP en lugar de JPG o PNG. Sin embargo, la mayor ventaja es que las imágenes conservan la misma calidad, incluso con tamaños significativamente reducidos. Por parte de Google, puede ser egoísta usar su formato para acelerar su sitio web para que puedan obtener una clasificación más alta y una mejor experiencia para el usuario final. Y eso es lo que importa al final.
¿Qué piensa acerca de compartir imágenes WebP con los visitantes de su sitio web?
Artículo destacado con una imagen de vladwel / shutterstock.com
