Optimizar imágenes para web: WebP, AVIF y lazy loading

¿Por qué optimizar imágenes?

Las imágenes representan el 52-67% del peso total de una página promedio. Una imagen sin optimizar de 5MB te puede costar:

• ✗ LCP más lento: si tu hero image tarda 4 segundos en cargar, pierdes usuarios directamente
• ✗ Google ranking: los Core Web Vitals incluyen LCP. Una imagen lenta = ranking más bajo
• ✗ Bounce rate: estudios muestran que cada 1 segundo de delay = +7% bounce rate
• ✗ Coste de ancho de banda: en Cloudflare Images o Imgix, pagas por GB transferido

Una sola optimización (WebP + lazy loading) puede reducir el tamaño total de página en 40% sin perder calidad visual.

Comparativa de formatos: JPEG vs PNG vs WebP vs AVIF

WebP: el estándar moderno (use ahora mismo)

# Instalar
brew install imagemagick  # macOS
sudo apt install imagemagick  # Linux

# Convertir una imagen
convert input.jpg -quality 85 output.webp

# Convertir todos en carpeta
for f in *.jpg; do convert "$f" -quality 85 "${f%.jpg}.webp"; done

# Instalar
brew install webp  # macOS

# Convertir
cwebp -q 85 input.jpg -o output.webp

# Con lotes
for f in *.jpg; do cwebp -q 85 "$f" -o "${f%.jpg}.webp"; done

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Description" width="1200" height="800" loading="lazy">
</picture>

AVIF: el futuro (compresión superior)

AVIF es el formato del futuro. Ofrece 40-50% menos tamaño que JPEG con calidad superior a WebP. Soportado en Chrome 85+, Firefox 93+, Edge 95+. El problema: Internet Explorer y navegadores viejos no lo soportan (pero podemos usar fallback).

# Instalar ffmpeg (soporta AVIF)
brew install ffmpeg  # macOS

# Convertir
ffmpeg -i input.jpg -c:v libaom-av1 -crf 30 output.avif

# O usar imagemagick (más lento pero fácil)
convert input.jpg output.avif

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Description" width="1200" height="800" loading="lazy">
</picture>

Lazy loading: carga diferida nativa

No carguemos todas las imágenes en el primer momento. Solo cargamos las que el usuario ve. Esto reduce el LCP drásticamente.

<img src="image.webp" alt="..." loading="lazy" width="1200" height="800">

<img data-src="image.webp" alt="..." width="1200" height="800" class="lazy">

<script>
const images = document.querySelectorAll('.lazy');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});
images.forEach(img => observer.observe(img));
</script>

Imágenes responsive: srcset y sizes

No sirvas la misma imagen en móvil y desktop. En móvil una imagen 1200x800 se ve como 400x266. ¿Por qué descargar 1200x800 en móvil?

<img
  src="image-400.webp"
  srcset="
    image-400.webp 400w,
    image-800.webp 800w,
    image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 1200px"
  alt="Description"
  width="1200"
  height="800"
  loading="lazy"
>

El navegador elige automáticamente la versión correcta según pantalla. En móvil 400w, en tablet 800w, en desktop 1200w. Ahorras 60-70% ancho de banda en móviles.

Herramientas profesionales para optimizar

Tabla de decisión: qué herramienta usar

Setup automático en tu build

---
import { Image } from 'astro:assets';
import myImage from '../images/my-image.png';
---

<Image src={myImage} alt="Description" />

import Image from 'next/image';

export default function MyComponent() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="Description"
      width={1200}
      height={800}
      priority
    />
  );
}

Evitar CLS con width y height

CLS (Cumulative Layout Shift) ocurre cuando el navegador no sabe el tamaño de la imagen hasta descargarla. Mientras carga, el layout "salta".

<!-- ❌ MALO: CLS issue -->
<img src="image.webp" alt="...">

<!-- ✓ BIEN: CLS evitado -->
<img src="image.webp" alt="..." width="1200" height="800" loading="lazy">

Siempre incluye width y height. El navegador pre-calcula el espacio necesario y el layout no salta cuando la imagen carga.

Hero image: fetchpriority="high"

La imagen del hero afecta directamente el LCP. Dile al navegador que la priorize:

<img
  src="hero.webp"
  alt="Hero"
  width="1200"
  height="600"
  loading="eager"
  fetchpriority="high"
>

fetchpriority="high": comienza descarga inmediatamente. loading="eager": no lazy load (carga en primer byte). Resultado: LCP -30-40%.

Preguntas frecuentes

Impacto en Core Web Vitals

Artículos relacionados