Cómo Convertir una Imagen a WebP (y Por Qué Hacerlo)

Si ya hiciste una prueba en Google PageSpeed Insights y recibiste el aviso "Ofrece las imágenes en formatos de próxima generación", Google te está pidiendo exactamente esto: convertir tus imágenes JPG y PNG a WebP. Es una de las intervenciones de mayor impacto en el rendimiento de un sitio — y también una de las más simples de implementar.

¿Por qué convertir a WebP?

WebP es un formato desarrollado por Google y lanzado en 2010, diseñado específicamente para la web. Usa algoritmos de compresión más modernos que JPG y PNG y ofrece, con la misma calidad visual:

• 25–35% menos peso que JPG en modo lossy (compresión con pérdida)
• 20–30% menos peso que PNG en modo lossless (compresión sin pérdida)
• Soporte para transparencia (canal alfa) — a diferencia de JPG, que no lo tiene
• Soporte para animaciones — a diferencia de PNG, que no lo tiene de forma nativa

En la práctica, el impacto es real. Una galería de productos de e-commerce con 20 fotos de 300 KB cada una en JPG (6 MB en total) puede llegar a 4 MB en WebP con la misma calidad visual — una reducción del 33% en el peso de la página. Para Google, esto significa un LCP más rápido, mejor puntaje en PageSpeed y una mejora potencial en el posicionamiento.

Cuándo no usar WebP

Aunque es el mejor formato para la web moderna, hay situaciones donde WebP todavía no es la opción correcta:

• Email marketing: clientes de correo como Outlook y Apple Mail tienen soporte inconsistente para WebP. Para emails HTML, JPG y PNG siguen siendo más seguros.
• Impresión gráfica: las imprentas y los software de impresión tradicionales no trabajan con WebP. Para archivos destinados a impresión, usa JPG de alta calidad o PNG.
• Plataformas con restricciones de formato: YouTube no acepta WebP para subir miniaturas (acepta JPG y PNG). Algunos formularios de sistemas antiguos exigen JPG. Verifica el formato aceptado antes de convertir.
• Archivos que deben poder abrirse en cualquier computadora: los usuarios finales que hacen clic en enlaces de descarga e intentan abrir el archivo en el visor predeterminado de Windows pueden tener problemas con WebP en versiones antiguas del sistema.

Método 1 — Conversión online (lo más rápido, sin instalar nada)

Para convertir imágenes puntuales — o cuando necesitas un resultado rápido sin configurar nada — un conversor online es el camino más directo. El Conversor de Imagen de ImageTools convierte JPG, PNG y otros formatos a WebP directamente en el navegador, sin enviar los archivos a servidores externos.

1. Entra en el Conversor de Imagen.
2. Selecciona o arrastra las imágenes al área de subida.
3. Elige WebP como formato de salida.
4. Descarga las imágenes convertidas individualmente o en ZIP si son varios archivos.

Método 2 — WordPress (automático para todo el sitio)

Para sitios en WordPress, el enfoque más eficiente es usar un plugin que convierta y sirva WebP automáticamente — sin necesidad de reprocesar cada imagen manualmente.

WordPress 6.1+ (conversión nativa)

A partir de la versión 6.1, WordPress convierte las imágenes a WebP automáticamente durante la subida, siempre que el servidor tenga soporte para la biblioteca libwebp (la mayoría de los servidores modernos con PHP 8+ lo tienen). No necesitas hacer nada — WordPress genera versiones WebP de las imágenes y sirve el formato correcto para cada navegador automáticamente.

Para verificar si está activo: ve a Ajustes → Medios y busca la opción de conversión WebP. Si no está disponible, el servidor no tiene soporte — considera usar un plugin.

Con plugins (versiones más antiguas o mayor control)

Los plugins más usados para la conversión a WebP en WordPress son:

• ShortPixel Image Optimizer — convierte las imágenes nuevas al subirlas y tiene opción de reprocesar toda la biblioteca existente. Gratuito hasta 100 imágenes/mes.
• Imagify — interfaz simple, conversión automática y opción de optimización por lotes. Plan gratuito disponible.
• WebP Express — plugin enfocado específicamente en WebP, convierte y configura las reglas del servidor automáticamente.

Método 3 — Línea de comandos con cwebp (para desarrolladores)

Google distribuye gratuitamente la herramienta cwebp — el codificador oficial de WebP — para conversión por terminal. Es el método más rápido para convertir lotes grandes de imágenes en un servidor o pipeline de build.

Instalación

# Ubuntu / Debian
sudo apt-get install webp

# macOS (Homebrew)
brew install webp

# Windows — descarga el binario en: https://developers.google.com/speed/webp/download

Conversión básica

# Convertir un archivo JPG a WebP con calidad 80
cwebp -q 80 foto.jpg -o foto.webp

# Convertir PNG a WebP lossless (sin pérdida)
cwebp -lossless logo.png -o logo.webp

# Convertir todos los JPG de una carpeta (Bash)
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

El parámetro -q controla la calidad (0–100). Para la web, los valores entre 75 y 85 ofrecen el mejor equilibrio entre calidad visual y tamaño de archivo. Usa -lossless para imágenes que necesiten compresión sin pérdida (logos, capturas de pantalla con texto).

Método 4 — Node.js con sharp (para pipelines de build)

Para proyectos que usan Node.js — como sitios en Next.js, Gatsby, Nuxt o cualquier build automatizado — la biblioteca sharp es la opción más eficiente para la conversión a WebP en pipeline:

// npm install sharp

const sharp = require('sharp');

// Convertir JPG a WebP con calidad 80
sharp('foto.jpg')
  .webp({ quality: 80 })
  .toFile('foto.webp');

// Convertir PNG a WebP lossless
sharp('logo.png')
  .webp({ lossless: true })
  .toFile('logo.webp');

// Convertir todos los archivos de una carpeta
const fs = require('fs');
const path = require('path');

fs.readdirSync('./imagenes')
  .filter(f => /\.(jpg|jpeg|png)$/i.test(f))
  .forEach(file => {
    const input = path.join('./imagenes', file);
    const output = path.join('./imagenes', file.replace(/\.[^.]+$/, '.webp'));
    sharp(input).webp({ quality: 80 }).toFile(output);
  });

La biblioteca sharp usa la librería nativa libvips y es significativamente más rápida que las soluciones JavaScript puras — ideal para generar versiones WebP durante el build de sitios estáticos.

Cómo implementar WebP con fallback para navegadores antiguos

Aunque la compatibilidad de WebP en 2026 supera el 97%, todavía pueden existir contextos donde se necesita un fallback — sistemas corporativos con IE11, dispositivos muy antiguos, o simplemente para garantizar la máxima compatibilidad.

La solución correcta es la etiqueta HTML <picture>, que permite declarar fuentes alternativas de imagen en orden de preferencia:

<!-- El navegador usa WebP si lo admite, si no usa JPG -->
<picture>
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Descripción de la foto" width="800" height="600">
</picture>

<!-- Con múltiples tamaños para pantallas Retina -->
<picture>
  <source
    srcset="foto-800.webp 800w, foto-1600.webp 1600w"
    type="image/webp">
  <source
    srcset="foto-800.jpg 800w, foto-1600.jpg 1600w"
    type="image/jpeg">
  <img src="foto-800.jpg" alt="Descripción de la foto"
    width="800" height="600" loading="lazy">
</picture>

El navegador evalúa las fuentes en el orden declarado: si admite WebP, usa el <source> con type="image/webp". Si no lo admite, recurre al JPG en el <img>. La etiqueta <img> al final es obligatoria — es la que define el alt, las dimensiones y el comportamiento predeterminado.

Configurando el servidor para servir WebP automáticamente (Apache)

Una alternativa a <picture> es configurar el servidor para detectar si el navegador acepta WebP y servir la versión correcta automáticamente. En Apache, agrega esto al .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Sirve .webp si existe y el navegador lo acepta
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule ^ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Con esta configuración, basta con tener los archivos .webp junto a los originales en la misma carpeta. Apache detecta si el navegador acepta WebP mediante el encabezado Accept y sirve la versión correcta sin ningún cambio en el HTML.

Verificando el resultado en PageSpeed

Después de implementar WebP, ejecuta Google PageSpeed Insights (pagespeed.web.dev) en la URL del sitio. El aviso "Ofrece las imágenes en formatos de próxima generación" debería desaparecer o disminuir significativamente. En el panel de oportunidades, verás la ganancia estimada en KB para cada imagen aún no convertida.

Otra forma de verificarlo: abre Chrome DevTools (F12), ve a la pestaña Network, filtra por "Img" y mira la columna "Type" en las imágenes cargadas. Si aparece webp, la conversión está funcionando.

¿Qué nivel de calidad usar en la conversión?

La calidad de WebP sigue la misma lógica que JPG: valores más altos preservan más detalles pero producen archivos más grandes. La diferencia es que, para la misma calidad visual, WebP suele usar un valor de calidad 10–15 puntos por debajo del JPG equivalente.

Preguntas frecuentes