Cómo convertir imágenes a WebP (y cuándo no hacerlo)

WebP es un formato de imagen creado por Google que, para una calidad visual equivalente, suele producir archivos entre un 25 % y un 35 % más pequeños que JPEG, y bastante más pequeños que PNG cuando la imagen tiene transparencia. Convertir una imagen a WebP consiste en recomprimirla con un codificador WebP (desde el navegador, la terminal o código) y servirla con un <picture> o directamente con <img>, ya que todos los navegadores actuales lo soportan.

En este artículo verás qué es exactamente WebP, cómo convertir imágenes de tres formas distintas, cómo servirlas correctamente en HTML y en qué casos conviene no usarlo.

Qué es WebP

WebP es un formato de imagen con compresión con pérdida (como JPEG) y sin pérdida (como PNG), que además admite transparencia (canal alfa) y animación (como GIF). Google lo publicó en 2010 y la documentación oficial sigue en developers.google.com/speed/webp.

Lo relevante para una web es sencillo: con WebP puedes sustituir JPEG, PNG y GIF por un único formato más eficiente, sin cambiar el aspecto visible de la imagen.

Qué ahorro real puedes esperar

Google indica en su documentación que las imágenes WebP con pérdida son entre un 25 % y un 34 % más pequeñas que JPEG a un índice de calidad equivalente, y que las WebP sin pérdida son alrededor de un 26 % más pequeñas que PNG. El ahorro concreto depende de la imagen: una fotografía con mucho detalle se comprime peor que una captura de pantalla con zonas planas.

Como referencia práctica, al preparar este artículo se convirtió con sharp la imagen de portada del propio artículo (un gráfico PNG de 1200×630 píxeles con texto y degradados). Estos fueron los tamaños obtenidos:

Formato y ajuste	Tamaño
PNG original	35 KB
WebP sin pérdida	28 KB
WebP con pérdida, calidad 80	24 KB
JPEG calidad 85 (misma imagen)	50 KB
WebP calidad 85 (a partir del JPEG)	30 KB

Es un único ejemplo, no una estadística, pero ilustra dos cosas: que WebP sin pérdida ya recorta un PNG, y que para un gráfico con texto el JPEG es la peor opción con diferencia.

Tres formas de convertir imágenes a WebP

1. Desde el navegador, sin instalar nada

Si solo necesitas convertir unas pocas imágenes, la opción más rápida es una herramienta online que trabaje en tu navegador. En AIMRAN Tools puedes convertir imágenes a WebP (y a AVIF, PNG o JPG) arrastrando el archivo; la conversión se hace en tu dispositivo, de modo que la imagen no se sube a ningún servidor.

Es la opción adecuada para imágenes de un artículo, un logotipo o una captura puntual.

2. Desde la terminal con cwebp

cwebp es el codificador oficial. Se instala con el gestor de paquetes de tu sistema (apt install webp en Debian/Ubuntu, brew install webp en macOS) y se usa así:

# Calidad 80 (buen equilibrio para fotografías)
cwebp -q 80 foto.jpg -o foto.webp

# Sin pérdida (capturas, gráficos, logotipos con transparencia)
cwebp -lossless logo.png -o logo.webp

# Convertir todas las imágenes JPG de una carpeta
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

El parámetro -q va de 0 a 100. Entre 75 y 85 suele ser el rango razonable para fotografías; por debajo de 60 empiezan a notarse artefactos en degradados y bordes.

3. Desde Node.js con sharp

Si generas imágenes en un proceso de build (por ejemplo, en un sitio estático), sharp es la librería más utilizada:

import sharp from 'sharp';

await sharp('entrada.jpg')
  .resize({ width: 1200, withoutEnlargement: true })
  .webp({ quality: 80 })
  .toFile('salida.webp');

La ventaja de hacerlo en el build es que puedes redimensionar y convertir en el mismo paso, y generar varias anchuras para srcset. Frameworks como Astro, Next.js o Nuxt ya integran sharp en sus componentes de imagen.

Cómo servir WebP en HTML

Opción simple: <img> directo

Según Can I use, WebP está soportado en Chrome, Edge, Firefox, Safari (desde la versión 14, de 2020) y los navegadores móviles principales. Si no necesitas dar soporte a navegadores anteriores a 2020, puedes usar <img> directamente:

<img src="/img/foto.webp" alt="Descripción de la foto" width="1200" height="800" loading="lazy" decoding="async" />

Fíjate en width y height: declararlos permite al navegador reservar el espacio antes de descargar la imagen y evita saltos de maquetación, uno de los problemas que miden los Core Web Vitals.

Opción con alternativa: <picture>

Si quieres ofrecer también AVIF (aún más eficiente) o mantener un JPEG de respaldo, usa <picture>:

<picture>
  <source srcset="/img/foto.avif" type="image/avif" />
  <source srcset="/img/foto.webp" type="image/webp" />
  <img src="/img/foto.jpg" alt="Descripción de la foto" width="1200" height="800" loading="lazy" decoding="async" />
</picture>

El navegador elige la primera fuente cuyo type soporta. El <img> final es obligatorio: es lo que se muestra y donde van el alt, las dimensiones y el loading.

Cuándo no conviene convertir a WebP

• Si ya sirves AVIF. AVIF comprime mejor que WebP en la mayoría de fotografías. WebP sigue siendo útil como alternativa intermedia en <picture>.
• Imágenes que el usuario va a descargar y editar. Si ofreces un recurso para que alguien lo abra en un editor, un PNG o un JPEG tiene más compatibilidad con programas de escritorio.
• Imágenes diminutas. Un icono de 2 KB no justifica un formato extra; a menudo un SVG es la mejor opción.
• Recomprimir un JPEG muy comprimido. Si el original ya tiene artefactos, recomprimirlo a WebP con pérdida los acumula. Parte siempre del archivo de mayor calidad disponible.

Errores habituales

1. Convertir sin redimensionar. Un WebP de 4000 píxeles de ancho sigue siendo enorme. Reduce primero a la anchura máxima a la que se mostrará.
2. Usar sin pérdida para fotografías. El modo lossless en fotos genera archivos mayores que el JPEG original. Resérvalo para gráficos, capturas y logotipos.
3. Olvidar el alt. Cambiar de formato no cambia la obligación de describir la imagen para quien no la ve.
4. Borrar los originales. Guarda los archivos fuente: si en el futuro quieres pasar a AVIF o a otro formato, necesitarás la mejor calidad posible como punto de partida.

Conclusión

Convertir imágenes a WebP es una de las optimizaciones con mejor relación esfuerzo/beneficio para una web: menos bytes, misma calidad visible y soporte universal en navegadores actuales. Para pocas imágenes, una herramienta en el navegador como la de AIMRAN Tools es suficiente; para proyectos con muchas imágenes, automatiza la conversión con cwebp o sharp dentro del build, declara siempre width, height y alt, y usa <picture> si quieres añadir AVIF por delante.