Sin embargo, entregar imágenes a través de WebP no es fácil. Depende del servidor web de su servidor, cdn seleccionado, tema, complementos de almacenamiento en caché, etc.
Esta guía lo ayudará a entregar imágenes WebP a WordPress de tres maneras.
¿Qué es WebP?
Nuevo formato de imagen para la web
por Google
WebP es un formato de imagen (como png y jpg) desarrollado por Google. Las imágenes WebP (.webp) tienden a ser mucho más pequeñas, lo que acelera los sitios web y usa menos ancho de banda.
Dependiendo de la imagen, puede reducir el tamaño del 25% al 70%.
JPEG, PNG, GIF, etc. tienen sus pros y sus contras. La siguiente tabla le dará una idea:
| JPG | GIF | PNG | SVG | |
| Vector | ❌ | ❌ | ❌ | ✅ |
| Ráster | ✅ | ✅ | ✅ | ❌ |
| Transparencia | ❌ | ✅ | ✅ | ✅ |
| Animación | ❌ | ✅ | ✅ | ✅ |
| Perdió | ✅ | ❌ | ❌ | ❌ |
¡WebP tiene casi todas las características mencionadas anteriormente! Entonces, ¿por qué no podemos usar WebP en todas partes?
¿Por qué no usar WebP en todas partes?
Como puede ver, solo el 80% de los dispositivos solo admiten WebP. No solo los navegadores heredados, Safari/iOS Safari todavía no es compatible con WebP.
¿Por qué es tan difícil servir WebP?
Como notó, entregamos imágenes de acuerdo con el navegador. Si el navegador no es compatible con WebP, debemos proporcionarles la imagen original (jpg/png/gif).
Hay dos formas principales de servir WebP:
Usando la etiqueta de la imagen
Nosotros podemos usarimagenetiqueta para decirle al navegador que tenemos un formato WebP. Si el navegador lo admite, se cargará la imagen normal/de respaldo.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Por respuesta diferente
En una respuesta diferente, como de costumbre, tiene un archivo. Exactamente:
<img src="img.jpg" />Una URL de imagen admite la entrega de archivos jpg y webp. Esto es lo que hace el servidor.
Aunque es una extensión de archivo .jpg, si el navegador es compatible con WebP, la respuesta será WebP. También llamada "respuesta diversa".
Etiqueta de imagen frente a respuesta diversa
Cada uno tiene sus ventajas y desventajas. Aquí hay una tabla de comparación:
| etiqueta de imagen | Respuesta diversa | |
|---|---|---|
| Funciona con imágenes de fondo. | ❌ | ✅ |
| compatible con CDN | ✅ | ✅ (solo algunos) |
| El servidor necesita ser configurado | ❌ | ✅ (nginx) |
| Funciona con carga diferida | ✅ | ✅ |
¿Cómo servir imágenes en WebP en WordPress?
Método n. ° 1: use CDN solo con la conversión fly WebP
Esta es probablemente la solución más simple. Algunos proveedores de CDN actualmente admiten la conversión de imágenes a WebP sobre la marcha junto con la optimización de imágenes.
Aquí hay algunos:
- conejitoCDN
- Cloudflare con polaco (Plan Pro)
- nublado
- Imágenes adaptables ShortPixel (usa StackPath CDN)
- Comprimir WP
También puede ahorrar espacio en disco con este método, ya que no tiene que almacenar imágenes WebP regulares y convertidas.
ConejitoCDN
BunnyCDN viene con Bunny Optimizer, que puede comprimir imágenes y convertirlas a WebP sobre la marcha.
Método n.º 2: uso de respuesta diversa + CDN
Como se describió anteriormente, una "respuesta de variedad" tendrá una sola URL de imagen que puede mostrar imágenes WebP y no webp según el navegador solicitado.
También debemos elegir la CDN correcta que admita encabezados de solicitud WebP como clave de caché. De lo contrario, una vez que la imagen de WebP se almacene en caché en el servidor, se entregará a los navegadores que no admitan WebP.
Personalización de respuestas variadas en WordPress
La forma más fácil de configurar una respuesta enriquecida para WebP en WordPress es usar el complemento WebP Express. Simplemente instale el complemento y haga clic en "Guardar configuración y forzar nuevas reglas .htaccess".
WebP Express configurará el convertidor WebP y sobrescribirá las reglas para que, cuando reciba una solicitud, convierta las imágenes a WebP sobre la marcha y, si el navegador no es compatible con WebP, se entregará la imagen predeterminada.
Si estás en Nginx
WebP Express agrega las reglas de reescritura '.htaccess' necesarias, pero solo funciona en un servidor Apache, LiteSpeed u OpenLiteSpeed. Si está utilizando Nginx, necesita editarnginx.configy agrega el siguiente código:
# Reglas de WebP Express# --------------------ubicación ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vary Aceptar; expira 365d; si ($http_accept !~* "webp"){break;}try_files/wp-content/webp-express/webp-images/doc-root/$uri.webp$uri.webp/wp-content /plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content;}# Dirija las solicitudes para webps no existentes a la ubicación del convertidor ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (las reglas de WebP Express terminan aquí)El código anterior agrega los encabezados de respuesta requeridos (la administración de caché también varía) e intenta entregar WebP si existe; de lo contrario, rediríjalo al convertidor (según el soporte del navegador)
Proveedores de CDN que admiten Diverse Response
Si su proveedor de CDN no es compatible con WebP como clave de almacenamiento en caché, los archivos WebP se enviarán a los navegadores que no son compatibles con WebP. Del mismo modo, existe la posibilidad de que las imágenes que no sean webp se envíen a los navegadores compatibles.
conejitoCDN , claveCDN , CDN de Google y muchos otros proveedores de CDN admiten WebP como clave de caché. Asegúrate de habilitarlos en la configuración.
VconejitoCDN :
VclaveCDN :
¿Está utilizando el plan gratuito de Cloudflare?
Desafortunadamente, el plan gratuito de Cloudflare no admite WebP como clave de caché. Use un CDN como BunnCDN o actualice a su plan profesional.
Configure una respuesta diversa + CDN con proveedores de alojamiento populares
Asegúrese de que WebP Express esté instalado.
- Kinsta o WP Engine: comuníquese con su equipo de soporte para agregar la configuración de Nginx anterior e incluir la clave de almacenamiento en caché de WebP en su CDN (KeyCDN).
- Cloudways: simplemente instale WebP Express y guarde la configuración usando .htacess. Debido a que Cloudways utiliza un enfoque híbrido de Apache + Nginx, funciona de manera inmediata.
- SiteGound: póngase en contacto con el soporte para agregar la configuración de Nginx. Utilice una CDN compatible como se indicó anteriormente.
- Servidor LiteSpeed / OpenLiteSpeed / Apache: simplemente instale WebP Express y guarde la configuración con '.htacess'. También use un CDN compatible como se indica arriba.
- VPS personalizado con Nginx (LEMP Stack) - Configuración
nginx.confy use un CDN compatible como se indicó anteriormente.
Método n.° 3: uso de una etiqueta de imagen
Si los dos métodos anteriores no funcionan para usted, puede usar la etiqueta de imagen. No requiere configuración del servidor (edición de nginx.conf) y es compatible con todos los proveedores de CDN.
El uso de este método cambiará el HTML para la entrega de WebP. No funcionará con imágenes de fondo, es incompatible con algunos temas, complementos de almacenamiento en caché, complementos de carga diferida, etc.
Si usa este método, todas las etiquetas img se convertirán así:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Si el navegador soporta WebP se entrega el archivo correspondiente, caso contrario se entrega una imagen normal.
Personalización de una etiqueta de imagen para WebP en WordPress
La forma más fácil de configurar una etiqueta de imagen es a través de WebP Express.
Establezca el modo de operación en "Apto para CDN" y habilite "Alterar HTML".
Conclusión
¡Ojalá llegara el día en que todos los navegadores admitieran WebP!
Si puede gastar unos pocos dólares al mes, entonces la forma más fácil y eficiente es usar un CDN como BunnyCDN, que convertirá las imágenes a WebP sobre la marcha. De lo contrario, apégate al método n. ° 2 que mencioné anteriormente.
