Cómo usar imágenes WebP en WordPress

Tabla de contenidos

¡Hola y hola querido lector! Ya estoy una semana más por aquí para contarte todo lo que necesitas saber sobre el formato WebP para las imágenes de tu WordPress.

Es el formato que utilizo en todos mis proyectos y el que recomienda Google en sus informes de rendimiento. Pesa bastante menos que un JPG con calidad equivalente, y eso se nota en la velocidad de carga.

En este post verás qué es, en qué se diferencia de otros formatos, cómo utilizarlo en WordPress y qué precauciones tomar. ¡Al lío!

Resumen rápido

  • WebP pesa bastante menos que JPG y PNG con una calidad visual equivalente.
  • WordPress lo admite de forma nativa desde hace varias versiones: puedes subir WebP directamente.
  • Lo soportan todos los navegadores actuales, así que ya no hay excusa de compatibilidad.
  • Convertir no basta: hay que redimensionar las imágenes al tamaño real de visualización.

¿Qué es el formato WebP?

WebP es un formato de imagen desarrollado por Google como alternativa a JPG, JPEG, PNG y GIF, pensado específicamente para la web.

Su gracia es que consigue el mismo resultado visual con bastante menos peso, gracias a un sistema de codificación predictiva que aprovecha la información de los píxeles cercanos.

Servicio de Diseño web WordPress

Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes

¿Qué ventajas tiene?

  • Menos peso con calidad equivalente, que es lo que importa.
  • Admite compresión con y sin pérdida, según lo que necesites.
  • Soporta transparencias, como el PNG, pero pesando mucho menos.
  • Admite animaciones, sustituyendo al GIF con una fracción de su peso.
  • Mejora las Core Web Vitals, sobre todo el LCP.
  • Reduce el consumo de ancho de banda de tu hosting.

PD. Un matiz sobre la compresión: WebP tiene modo con pérdida y modo sin pérdida. El ahorro grande viene del modo con pérdida, el mismo que utiliza el JPG. Decir que «no pierde calidad» no es exacto: pierde información, pero de forma mucho más eficiente.

WebP frente a otros formatos

Formato Cuándo utilizarlo
WebP Prácticamente todas las fotografías y gráficos de tu web
JPG Como respaldo, o cuando el destino no admite WebP
PNG Solo si necesitas máxima fidelidad con transparencia
SVG Logotipos, iconos y gráficos vectoriales
GIF Prácticamente nunca: WebP o vídeo lo hacen mejor
AVIF Comprime aún más que WebP, con soporte algo menor

PD. Sobre AVIF: comprime mejor que WebP, pero tarda más en generarse y su soporte, aunque amplio, es algo menor. Mi recomendación hoy sigue siendo WebP por su equilibrio entre ahorro y compatibilidad.

Servicio de Diseño web WordPress

Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes

¿Lo soportan todos los navegadores?

Sí. Este era el gran pero del formato hace años, pero hoy lo admiten todos los navegadores modernos, incluidos Safari y los navegadores móviles.

Si te preocupa algún caso muy antiguo, los plugins de conversión sirven WebP a quien lo soporta y el formato original al resto, así que nadie se queda sin ver tus imágenes.

Cómo utilizar WebP en WordPress

Opción 1: subirlas ya convertidas

WordPress admite WebP de forma nativa, así que puedes convertir tus imágenes antes de subirlas con cualquier editor o conversor online y subirlas directamente a la biblioteca de medios.

Es la opción más limpia si estás empezando una página web nueva: no dependes de ningún plugin.

Opción 2: con un plugin de optimización

Es lo más práctico si ya tienes cientos de imágenes subidas. Estos plugins convierten toda tu biblioteca y sirven el formato adecuado a cada navegador:

  • Imagify, del equipo de WP Rocket, con conversión automática y compresión en varios niveles.
  • ShortPixel, muy completo y con buena relación calidad-precio.
  • EWWW Image Optimizer, que permite optimizar en local sin enviar las imágenes a un servicio externo.
  • Converter for Media, gratuito y centrado precisamente en esto.

Tienes la comparativa completa en optimizar imágenes en WordPress.

Opción 3: desde tu CDN

Si utilizas una CDN, muchas convierten al vuelo y sirven WebP automáticamente sin que toques tu biblioteca de medios.

Servicio de Diseño web WordPress

Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes

Lo que WebP no arregla por sí solo

Aquí está el error más habitual. Convertir una imagen de 3.000 píxeles de ancho a WebP la deja más ligera, pero sigue siendo una imagen de 3.000 píxeles para un hueco de 800.

Antes o después de convertir, asegúrate de:

  1. Redimensionar al tamaño real de visualización.
  2. Definir el ancho y el alto en el código, para evitar saltos de diseño.
  3. Aplicar carga diferida a las imágenes que no se ven al entrar, nunca a la principal.
  4. Escribir un texto alternativo descriptivo, que además ayuda a la accesibilidad.
  5. Nombrar bien el archivo, con palabras separadas por guiones.

Precauciones antes de convertir

  • Haz una copia de seguridad antes de una conversión masiva.
  • Conserva los originales: casi todos los plugins lo permiten, y te da marcha atrás.
  • Revisa las imágenes con transparencia tras la conversión.
  • Comprueba el resultado visual en las imágenes importantes: una compresión agresiva se nota en fotos con degradados.
  • Ojo con el espacio en disco: si conservas originales y WebP, ocupas ambos.
  • Vigila los enlaces externos si cambias las URLs de las imágenes.

Cómo comprobar que se están sirviendo

  1. Clic derecho sobre una imagen y abrirla en una pestaña nueva para ver su extensión.
  2. Herramientas de desarrollo, pestaña de red, filtrando por imágenes: ahí ves el formato y el peso real.
  3. PageSpeed Insights, que avisa si detecta imágenes en formatos antiguos.

Conclusiones sobre el formato WebP

WebP es hoy la opción por defecto para las imágenes de una página web. Pesa menos, lo soporta todo el mundo y WordPress lo admite de serie.

Mi recomendación: convierte tu biblioteca con un plugin y, sobre todo, redimensiona. Convertir sin redimensionar es quedarse a medias, y ahí es donde está la mayor parte del ahorro.

Si quieres que me encargue yo del rendimiento de tu página web, puedo hacerlo en mi servicio de mantenimiento web WordPress. Y si necesitas una página web rápida desde el primer día, te ayudo con mi servicio de diseño web WordPress.

Ahora te toca a ti, querido lector. ¿Ya utilizas WebP en tu página web? ¡Te leo en los comentarios!

Preguntas frecuentes sobre WebP

¿Qué es el formato WebP?

Es un formato de imagen desarrollado por Google como alternativa a JPG, PNG y GIF, que consigue una calidad visual equivalente con bastante menos peso gracias a su codificación predictiva.

¿Admite WordPress imágenes WebP?

Sí, de forma nativa desde hace varias versiones. Pueden subirse directamente a la biblioteca de medios sin necesidad de ningún plugin ni código adicional.

¿Lo soportan todos los navegadores?

Sí, todos los navegadores modernos, incluidos Safari y los navegadores móviles. Además, los plugins de conversión sirven el formato original a quien no lo soporte.

¿Pierde calidad una imagen al pasarla a WebP?

Depende del modo utilizado. El modo con pérdida descarta información, igual que el JPG, pero de forma más eficiente, por lo que a igual calidad percibida el archivo pesa menos. También existe modo sin pérdida.

¿Cómo convertir a WebP las imágenes que ya tengo?

Con un plugin de optimización como Imagify, ShortPixel, EWWW Image Optimizer o Converter for Media, que convierten la biblioteca completa y sirven el formato adecuado a cada navegador.

¿Es mejor AVIF que WebP?

AVIF comprime más, pero tarda más en generarse y su soporte es algo menor. Para la mayoría de páginas web, WebP sigue ofreciendo el mejor equilibrio entre ahorro de peso y compatibilidad.

¿Basta con convertir a WebP para tener imágenes optimizadas?

No. También hay que redimensionar cada imagen al tamaño real de visualización, indicar sus dimensiones, aplicar carga diferida salvo en la imagen principal y cuidar el texto alternativo.

Resumir post con IA
Servicio de Diseño web WordPress

Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes

Pide presupuesto

Y recibe respuesta en menos de 24h

Sin problema. En el último paso cuéntame tu caso y te diré por dónde empezar.

Borja Aranda Vaquero - Consultor SEO, Consultor de Google Ads y Diseñador Web WordPress
Resumen de privacidad

Esta web utiliza cookies para que pueda ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a esta página web y saber qué secciones de la página web te gustan más.