Skip to content

Todo para WordPress, el desarrollo web — y mucho más

🖼 Cómo servir imágenes WebP en WordPress: 3 métodos
WordPressPlugins de WordPress
11 min2,183 palabras

🖼 Cómo servir imágenes WebP en WordPress: 3 métodos

PageSpeed Insights muestra la recomendación «Servir imágenes en formatos de nueva generación», pero las imágenes de su sitio siguen en JPEG. Convertir todo a WebP es sencillo. El desafío es otro: un pequeño porcentaje de visitantes con navegadores antiguos verá imágenes rotas si usted simplemente reemplaza el formato en el servidor.

La tarea no es la conversión, sino la entrega selectiva: WebP para quienes lo soportan y el original para todos los demás. En WordPress esto se resuelve de tres maneras distintas, cada una para una infraestructura y presupuesto específicos.

💡 Resumen rápido:

  • Entender qué es WebP y por qué es mejor que JPEG
  • Conocer los dos enfoques para servir WebP
  • Elegir uno de los tres métodos según su infraestructura y presupuesto
  • Configurar el plugin y verificar el resultado en Chrome DevTools

Qué es WebP y por qué lo necesita

WebP es un formato de imagen de Google que comprime mejor que JPEG y PNG con la misma calidad visual. Una imagen que pesa 100 KB en WebP pesa entre 55 y 75 KB. No hay magia: solo un algoritmo de compresión más eficiente.

Recomendación de Google PageSpeed Insights para usar formato WebP

El formato no es nuevo. Google publicó la especificación en 2010. Desde entonces, WebP pasó de experimento a estándar: compresión con y sin pérdida, transparencia, animación. En esencia, combina las capacidades de JPEG, PNG y GIF en un solo contenedor.

Comparación rápida con los formatos tradicionales:

JPEG

GIF

PNG

SVG

WebP

Vectorial

❌

❌

❌

✅

❌

Mapa de bits

✅

✅

✅

❌

✅

Transparencia

❌

✅

✅

✅

✅

Animación

❌

✅

✅

✅

✅

Compresión con pérdida

✅

❌

❌

❌

✅

Compresión sin pérdida

❌

❌

✅

❌

✅

Comparación del tamaño de archivo WebP con JPEG y PNG a la misma calidad

La diferencia de tamaño es notable. Para un sitio con cincuenta imágenes por página, pasarse a WebP reduce el peso total varias veces. El impacto en las Core Web Vitals y en el posicionamiento en buscadores es directo.

Por qué no puede simplemente activar WebP en todas partes

La respuesta se reduce a la compatibilidad. Hoy WebP es soportado por más del 96% de los navegadores: Chrome, Firefox, Safari (desde iOS 14), Edge. Pero queda un pequeño porcentaje de dispositivos antiguos que no entienden el formato.

Diagrama de compatibilidad de WebP en los principales navegadores

Si usted simplemente reemplaza todos los JPEG por WebP en el servidor, ese pequeño porcentaje de visitantes verá imágenes rotas. Para un sitio comercial o una tienda en línea, esta pérdida de usuarios es inaceptable.

Así que la tarea no se reduce a «convertir imágenes», sino a «servir WebP a quienes lo soportan y el original a todos los demás».

Dos enfoques básicos para servir WebP

Antes de pasar a los métodos para WordPress, conviene entender cómo negocian el formato el navegador y el servidor. Solo existen dos mecanismos.

Enfoque 1: etiqueta

Al navegador se le ofrece elegir entre WebP y el original directamente en el marcado HTML:

1<picture>
2  <source srcset="img.webp" type="image/webp">
3  <source srcset="img.jpg" type="image/jpeg">
4  <img src="img.jpg" alt="Image description">
5</picture>

Un navegador con soporte para WebP tomará el primer <source>. El resto ignorará la fuente WebP y cargará el JPEG desde <img>.

Ventaja: funciona sin configuración del servidor y con cualquier CDN. Desventaja: no funciona con imágenes de fondo en CSS y modifica la estructura HTML. Algunos plugins de caché y carga diferida tropiezan con <picture>.

Enfoque 2: respuesta variada

En el HTML permanece un <img src="img.jpg"> común, pero el servidor devuelve contenido distinto para la misma URL: un archivo WebP a los navegadores con soporte para WebP, el original a todos los demás.

La clave del mecanismo es la cabecera HTTP Accept. El navegador la envía con cada solicitud; el servidor o el CDN deciden qué devolver.

Ventaja: funciona en todas partes, incluidas las imágenes de fondo en CSS. El HTML no cambia. Desventaja: requiere configuración del servidor, y no todos los CDN consideran correctamente Accept en la clave de caché.

Comparemos:

<picture>

Respuesta variada

Imágenes de fondo

❌

✅

Funciona con cualquier CDN

✅

Solo con soporte de Vary: Accept

Configuración del servidor

❌ no necesaria

✅ necesaria

Carga diferida

✅

✅

Compatibilidad con plugins de caché

Puede conflictuar

✅

Ahora veamos cómo se aplican estos enfoques en WordPress.

Método 1: CDN con conversión WebP al vuelo

El camino más simple. Usted conecta un CDN que optimiza imágenes al vuelo y sirve WebP a los navegadores que lo soportan. Las copias convertidas no se almacenan en su servidor, lo que ahorra espacio en disco.

Varias opciones funcionales:

  • BunnyCDN con Bunny Optimizer, comprime y convierte imágenes sobre la marcha, admite WebP en la clave de caché. Desde $0.01/GB.
  • Cloudflare con Polish (plan Pro, $20/mes), compresión y conversión automática a WebP.
  • Cloudinary, un servicio especializado para trabajar con imágenes, WebP de serie.
  • ShortPixel Adaptive Images, un plugin de WordPress que utiliza la CDN de bunny.net. Convierte y sirve WebP automáticamente. Plan gratuito: 500 MB de tráfico al mes.
  • WP Compress, un servicio híbrido: optimización de imágenes más entrega a través de su propia CDN.
Ajustes de Bunny Optimizer para convertir imágenes a WebP

Cuándo elegir el método 1: si está dispuesto a pagar por una CDN y no quiere lidiar con la configuración del servidor. Conecta, activa la optimización y funciona.

Método 2: respuesta variada + CDN

Un método para quienes prefieren resolver la tarea a nivel de servidor sin modificar el marcado HTML.

La esencia: usted configura el servidor para que en una misma URL devuelva WebP o JPEG/PNG según la cabecera Accept. Todas las URL de imágenes en el código permanecen igual.

Configuración mediante WebP Express

La forma más sencilla de implementar la respuesta variada en WordPress es el plugin WebP Express. El plugin tiene más de 400.000 instalaciones activas, actualizaciones periódicas y soporte activo del autor. Hace tres cosas:

  • Convierte las imágenes subidas a WebP.
  • Escribe reglas de redirección (.htaccess para Apache/LiteSpeed o reglas Nginx).
  • Al solicitar una imagen, comprueba la cabecera Accept y devuelve el formato necesario.
Página de ajustes del plugin WebP Express en el administrador de WordPress

Tras la instalación, basta con hacer clic en «Save settings and force new.htaccess rules». El plugin configurará el conversor y las reglas por sí mismo.

Para servidores Nginx

WebP Express genera reglas para .htaccess (Apache/LiteSpeed/OpenLiteSpeed). Si usted tiene Nginx, necesita escribir manualmente las reglas en la configuración:

1&#35;&#35; --- Nginx rules: try WebP first, fallback to converter
2location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
3  add_header Vary Accept;
4  expires 365d;
5  if ($http_accept !~* "webp") {
6    break;
7  }
8  try_files
9    /wp-content/webp-express/webp-images/doc-root/$uri.webp
10    $uri.webp
11    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=$request_filename&wp-content=wp-content
12    ;
13}
14 
15&#35;&#35; --- Route missing .webp requests to the realizer
16location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
17    try_files
18      $uri
19      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
20      ;
21}
22&#35;&#35; --- End WebP Express rules

Lo que hacen las reglas: añadir la cabecera Vary: Accept (para que la CDN no almacene en caché WebP para todos), intentar servir el .webp ya creado y, si no existe, enviar la solicitud al conversor.

Crítico: elegir CDN para el método 2

El error que arruina todo el método: la CDN almacena en caché WebP y lo sirve a navegadores sin soporte para el formato. Esto ocurre cuando la CDN no considera la cabecera Accept en la clave de caché.

Proveedores que funcionan correctamente con Vary: Accept:

Bunny CDN, el soporte de respuesta variada se activa en los ajustes de zona.

Configuración de la clave de caché WebP en el panel de BunnyCDN
  • KeyCDN, también admite WebP como parte de la clave de caché. Se activa en los ajustes de zona, sección Caché.
Opción de clave de caché WebP en el panel de KeyCDN
  • Google CDN, considera Vary: Accept por defecto.

En el plan gratuito de Cloudflare no hay una consideración completa de Accept en la clave de caché. Resultado: WebP puede llegar donde no es compatible. Dos salidas: cambiar al plan Pro (20 $/mes) o usar una CDN que pueda trabajar con Vary: Accept de serie (BunnyCDN o KeyCDN).

Combinación WebP Express + CDN en alojamientos populares

El esquema es el mismo para todos: instalar WebP Express y luego actuar según las circunstancias del entorno del servidor:

  • Kinsta / WP Engine, contacte con soporte. Los ingenieros añadirán la configuración Nginx para WebP Express y activarán la clave de caché WebP correcta en su CDN (KeyCDN en Kinsta).
  • Cloudways, un híbrido Apache+Nginx. WebP Express con guardado de .htaccess suele ser suficiente. Las reglas se recogen automáticamente.
  • SiteGround, solicite a soporte que añada las reglas Nginx y use una CDN compatible.
  • LiteSpeed / OpenLiteSpeed / Apache, solo WebP Express y reglas .htaccess. Elija una CDN con soporte para Vary: Accept.
  • VPS propio con Nginx (LEMP), añada manualmente las reglas Nginx anteriores y conecte una CDN con soporte para Vary: Accept.

Cuándo elegir el método 2: si fundamentalmente no quiere modificar el marcado HTML, tiene imágenes de fondo en CSS y está dispuesto a configurar el servidor una vez.

Método 3: mediante etiqueta

Una opción alternativa cuando los dos primeros no encajan. No requiere configuración del servidor, funciona con cualquier CDN. El plugin reemplaza las etiquetas <img> estándar por una construcción <picture>, y el navegador elige el formato por sí mismo.

Desventajas del método:

  • No funciona con imágenes de fondo.
  • Puede entrar en conflicto con temas y plugins de caché que modifican la salida de <img>.
  • Cambia la estructura HTML, lo que a veces rompe los plugins de carga diferida.

Configuración mediante WebP Express

El mismo WebP Express puede funcionar en modo <picture>. En los ajustes seleccione el modo «CDN friendly» y active la opción «Alter HTML». El plugin envolverá sobre la marcha todos los <img> en <picture> con una fuente WebP.

Cuándo elegir el método 3: si no hay acceso a la configuración del servidor y la CDN no admite Vary: Accept. Por ejemplo, un alojamiento económico con limitaciones estrictas o Cloudflare gratuito.

Vídeo: WebP en WordPress en 10 minutos

Si prefiere ver en lugar de leer, aquí tiene un tutorial visual sobre la configuración de WebP mediante WebP Express:

El vídeo muestra la configuración completa de WebP Express desde la instalación hasta la verificación en Chrome DevTools. También se aborda la conversión a AVIF, como paso siguiente después de WebP.

⁉️🤔 Preguntas frecuentes

¿WebP siempre supone una reducción de tamaño?

No siempre, pero en la mayoría de los casos. Para fotos y capturas de pantalla el ahorro es del 25-50%, según los desarrolladores de Google. Para imágenes con texto o colores planos, WebP puede incluso pesar más que PNG-8. Para imágenes de contenido, WebP casi siempre supone una ventaja. Para iconos y gráficos simples, SVG o PNG optimizado es más óptimo. Plugins como WebP Express convierten todo, el resultado depende del formato de origen.

¿Se puede usar WebP sin plugins en WordPress?

A partir de WordPress 5.8, sí. El núcleo acepta archivos .webp al subirlos a la biblioteca de medios. Pero no hay conversión automática de imágenes antiguas ni sustitución de formato para el navegador. Si solo sube imágenes nuevas en WebP y le parece bien la ausencia de alternativa para un pequeño porcentaje de navegadores antiguos, los plugins no son obligatorios. Para una implementación completa en un sitio existente no puede prescindir de un plugin: necesita conversión por lotes y un mecanismo de sustitución de formato.

¿Cómo comprobar que WebP se sirve correctamente?

Abra el sitio en Chrome, pulse F12, pestaña Network, filtre por Img. En la columna Type debería aparecer webp. Alternativamente: en la respuesta del servidor busque la cabecera X-WebP-Express (si usa WebP Express) o content-type: image/webp. Chrome DevTools es la forma más fiable: filtre por imágenes y mire la columna Type. Si dice webp, todo funciona.

¿Qué hacer si el CDN cachea WebP incorrectamente?

Síntoma: algunos usuarios ven imágenes rotas, aunque todo está habilitado en los ajustes. Solución: asegúrese de que el CDN considera las cabeceras Accept y Vary en la clave de caché. En los paneles de BunnyCDN y KeyCDN hay interruptores explícitos para esto. Si no hay Accept en la clave de caché, la primera solicitud desde Chrome creará una copia WebP, y todos los usuarios posteriores, incluido Safari sin WebP, recibirán exactamente esta copia. En Cloudflare no hay solución gratuita: o plan Pro o cambiar de CDN.

¿WebP o AVIF, qué elegir en 2026?

AVIF ofrece una compresión aún mejor (20-30% más pequeño que WebP a la misma calidad), pero el soporte de navegadores aún va rezagado: alrededor del 92% frente al 96% de WebP. En 2026, WebP sigue siendo el estándar de facto para la web. AVIF está alcanzándolo, pero la brecha en el soporte de navegadores sigue siendo crítica para proyectos comerciales. Una estrategia práctica: WebP ahora, AVIF cuando el soporte supere el 95%.

Qué método elegir para su tarea: desglose final

La elección del método no depende de cuál es "mejor en general", sino de su stack específico y su disposición a invertir tiempo o dinero:

  • Dispuesto a pagar por un CDN y no tocar el servidor, método 1 con BunnyCDN (desde $0.01/GB) o Cloudflare Pro ($20/mes). Configúrelo en cinco minutos y olvídese.
  • Tiene acceso al servidor y quiere resolverlo de una vez, método 2 con WebP Express y un CDN que soporte Vary: Accept. Funciona con imágenes de fondo, no modifica el HTML.
  • Sin acceso al servidor y presupuesto limitado, método 3 con WebP Express en modo <picture>. No es ideal, pero es mejor que no tener WebP en absoluto.

Pruebe el método elegido en staging. Verifique las cabeceras de respuesta y la columna Type en Chrome DevTools. Asegúrese de que los navegadores antiguos reciben JPEG, no enlaces rotos. Y solo entonces despliegue en producción.

Pruebe WebP Express, el plugin cubre ambos métodos de servidor de serie y es gratuito. Escriba en los comentarios qué enfoque eligió y con qué escollos se encontró.

Redacción
RedacciónEquipo editorial→ All publications

Un equipo profesional de escritores y editores especializados en la creación de contenido de calidad.