Cómo convertir JPG a WebP para optimizar tu sitio web

Cómo convertir JPG a WebP para optimizar tu sitio web

WebP ofrece un 25–35% menos de tamaño que JPG a igual calidad visual, y puede ser la mejora de rendimiento web más impactante que implementes. Esta guía cubre la conversión y la implementación correcta.

¿Por qué convertir a WebP?

• 25–35% menos de peso → páginas más ligeras → menor LCP (Largest Contentful Paint)
• Soporte universal: Chrome, Firefox, Safari 14+, Edge, iOS 14+, Android 4.4+
• Google PageSpeed recomienda activamente WebP

Convertir JPG a WebP — métodos

Online

1. Ve a KaijuConverter — JPG a WebP
2. Sube la imagen JPG
3. Ajusta la calidad (80–90 para web)
4. Descarga el WebP

cwebp (herramienta oficial de Google)

# Instalar
brew install webp         # macOS
sudo apt install webp      # Ubuntu/Debian

# Convertir JPG → WebP (calidad 80 = buen equilibrio)
cwebp -q 80 foto.jpg -o foto.webp

# Con calidad más alta (90)
cwebp -q 90 foto.jpg -o foto.webp

# PNG → WebP lossless (sin pérdida)
cwebp -lossless imagen.png -o imagen_lossless.webp

# Lote — todos los JPG de la carpeta
for f in *.jpg; do cwebp -q 85 "$f" -o "${f%.jpg}.webp"; done

# Procesamiento paralelo (mucho más rápido)
ls *.jpg | parallel cwebp -q 85 {} -o {.}.webp

FFmpeg

# JPG → WebP
ffmpeg -i foto.jpg -c:v libwebp -quality 80 foto.webp

# PNG → WebP lossless
ffmpeg -i imagen.png -c:v libwebp -lossless 1 imagen.webp

# Lote con calidad 85
for f in *.jpg; do ffmpeg -i "$f" -c:v libwebp -quality 85 "${f%.jpg}.webp"; done

Python + Pillow

from PIL import Image
import os

# Convertir todos los JPG a WebP
for filename in os.listdir('.'):
    if filename.lower().endswith(('.jpg', '.jpeg')):
        img = Image.open(filename)
        webp_name = os.path.splitext(filename)[0] + '.webp'
        img.save(webp_name, 'WEBP', quality=85, method=6)
        print(f"{filename} → {webp_name}")

Shopify / WordPress / Next.js — conversión automática

Muchas plataformas modernas convierten automáticamente a WebP:

• Next.js: next/image sirve WebP automáticamente en navegadores compatibles
• WordPress con plugins: Smush, ShortPixel, Imagify convierten al subir imágenes
• Cloudflare: activa "Polish" en el panel para conversión automática en el CDN

Implementar WebP en HTML con fallback

<!-- Elemento <picture>: el navegador elige el formato compatible -->
<picture>
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Descripción" width="800" height="600">
</picture>

Safari antigua (iOS 13 y anteriores, Safari 13) no soporta WebP. El <img> con el JPG es el fallback automático.

Para fondos CSS con WebP:

/* CSS puro con @supports */
.hero {
  background-image: url('fondo.jpg');
}

@supports (background-image: url('test.webp')) {
  .hero {
    background-image: url('fondo.webp');
  }
}

O usa la clase .webp que añade Modernizr en el <html>:

.webp .hero { background-image: url('fondo.webp'); }
.no-webp .hero { background-image: url('fondo.jpg'); }

Configurar Apache/Nginx para servir WebP automáticamente

Si tienes acceso al servidor, puedes hacer que Apache/Nginx sirva automáticamente el WebP cuando el navegador lo soporta sin cambiar el HTML:

Apache (.htaccess)

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule ^(.+)\.(jpe?g|png)$ $1.webp [T=image/webp,L]
</IfModule>

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

AddType image/webp .webp

Nginx

map $http_accept $webp_suffix {
  default "";
  "~*image/webp" ".webp";
}

location ~* ^/(.+)\.(png|jpe?g)$ {
  add_header Vary Accept;
  try_files $uri$webp_suffix $uri =404;
}

Calidad recomendada según uso

Con WebP correctamente implementado, el peso de imagen en tu sitio puede reducirse un 30–40% sin cambio perceptible en la calidad visual.