Duplica la velocidad de tu web convirtiendo imágenes a WebP — Consejos de optimización 2026

Por qué es necesario convertir a WebP

Las imágenes son, con diferencia, el elemento que más pesa en una página web. Según los datos de HTTP Archive de 2025, el tamaño medio de una página web es de 2,6 MB, de los cuales más de 1,5 MB corresponden a imágenes. ¿Sabías que convertir los archivos de imagen al formato WebP puede reducir hasta un 40 % el peso total de la página?

Impacto en los Core Web Vitals:

• LCP (Largest Contentful Paint): reducir el peso de la imagen hero produce resultados inmediatos.
• FCP (First Contentful Paint): la reducción del peso total de la página también mejora indirectamente este indicador.

Estado actual de la compatibilidad de WebP con los navegadores

En 2024, la gran mayoría de los navegadores admiten WebP. Que más del 96 % de los navegadores del mundo sean compatibles con este formato es un dato impresionante. IE11 no lo admite, pero su soporte oficial por parte de Microsoft finalizó en 2022 y su cuota de uso real ya es inferior al 0,5 %, por lo que prácticamente no hay que tenerlo en cuenta.

Next.js — conversión automática a WebP

Si usas Next.js, el componente sirve automáticamente imágenes en WebP a los navegadores compatibles. La optimización de imágenes es automática sin necesidad de realizar conversiones manualmente.

import Image from "next/image"
export default function HeroImage() {
  return (
    <Image
      src="/hero.jpg"          // aunque se suba en JPG
      alt="Imagen principal"
      width={1200}
      height={630}
      priority                 // las imágenes LCP necesitan prioridad
      quality={85}             // subir de 75 a 85 mejora la calidad con un leve aumento de tamaño
    />
    // → el navegador recibe automáticamente la imagen en WebP si es compatible
  )
}

Cloudflare Images — optimización de imágenes en el borde (edge)

Si usas Cloudflare como CDN, activa la función Polish: convierte automáticamente las imágenes a WebP en el edge sin necesidad de modificar ni una sola línea de código.

Configuración: en el panel de control de Cloudflare, ve al dominio correspondiente y selecciona Speed → Optimization → Polish: Lossy o Lossless. Solo disponible a partir del plan Pro ($20/mes).

Comparativa de herramientas de conversión manual

1. Squoosh (Google, gratuito)

• Conversión directa desde el navegador
• Vista previa en tiempo real para comparar calidad y tamaño
• Compatible con WebP, AVIF, PNG y JPEG
• URL: squoosh.app

2. cwebp (línea de comandos, gratuito)

# Conversión de un archivo individual
cwebp -q 85 input.jpg -o output.webp
# Conversión por lotes de una carpeta completa (Linux/Mac)
for f in *.jpg; do cwebp -q 85 "$f" -o "${f%.jpg}.webp"; done

3. Sharp (biblioteca Node.js) Integración en el proceso de construcción (build pipeline) para conversión automática:

const sharp = require("sharp")
await sharp("input.jpg")
  .webp({ quality: 85 })
  .toFile("output.webp")

Gestión de la compatibilidad con la etiqueta

Para los navegadores que no admiten WebP, usa la etiqueta para definir una imagen de reserva (fallback):

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descripción de la imagen" width="800" height="600">
</picture>

El navegador utiliza la primera fuente que admite: AVIF si es compatible, WebP si lo admite, y JPG en caso contrario.

Ejemplo real de reducción de tamaño

Tomemos como ejemplo una entrada de blog con 5 imágenes:

• Tamaño medio en JPEG: 500 KB × 5 = 2,5 MB
• Tras la conversión a WebP: aprox. 330 KB × 5 = 1,65 MB
• Ahorro: 850 KB (reducción del 34 %)

Reducir la imagen hero de 500 KB a 150 KB puede mejorar el LCP de 2–4 segundos a menos de 1,5 segundos.

Conclusión

La conversión a WebP es una de las optimizaciones de rendimiento web con mejor relación inversión/resultado. Los usuarios de Next.js obtienen la optimización automática con el componente ; en otros casos, usa Cloudflare Polish o el convertidor de imágenes integrado.