Entrega de imágenes en la era Edge — Diseño CDN 2025

Para crecer en tráfico orgánico, una entrega de imágenes rápida es innegociable. Esta guía organiza los puntos de diseño en edge/CDN por caso de uso y aporta una checklist para evitar errores clásicos en producción.

Fundamentos del CDN de imágenes

1. Define unidades de transformación (origen vs variantes transformadas)
2. Definición de claves de caché (URL, Accept, Accept-Encoding, DPR, etc.)
3. Expiración e invalidación (fingerprint, Cache-Control, stale-while-revalidate)
4. Coordinación con responsive (srcset/sizes correctos)

Enlaces internos: Bases de srcset, Entrega enfocada a INP, Priority hints y preload

Cabeceras HTTP en práctica

Cache-Control: public, max-age=86400, stale-while-revalidate=259200
Vary: Accept, DPR
Accept-Ranges: bytes
Timing-Allow-Origin: *

• Usa Vary: Accept para alternar AVIF/WebP/JPEG
• Si añades Vary: DPR, genera/cachea variantes por DPR en el servidor
• En SSG/ISR, el versionado explícito de URL es lo más seguro (p. ej., hero-640.avif?v=20250922)

Priority Hints / Early Hints

<!-- Para candidatos LCP -->
<link rel="preload" as="image" href="/images/hero-1200.avif" imagesrcset="..." imagesizes="(min-width: 1024px) 1200px, 90vw" fetchpriority="high" />

• No marques todo como alta prioridad (puede competir con presupuesto de CLS)
• Si es posible, envía 103 Early Hints para preconnect/preload anticipados

Divide transformaciones edge vs origen

• Edge: negociación de formato/anchura/calidad de alta frecuencia (AVIF/WebP)
• Origen: pasos caros y críticos en fidelidad (metadatos, ICC, composición con alfa)

Herramientas: Conversor de formato, Compresión masiva, Generador de placeholders

Errores típicos

• Vary configurado pero el CDN no cachea (doble configuración)
• Devolver AVIF a clientes legacy sin Accept: image/avif → índices rotos
• Doble transformación por servicio optimizador y CDN de la app → pérdida de calidad

Checklist (persistente)

• [ ] Imágenes LCP: fetchpriority y sizes correctos
• [ ] Claves de caché vía versionado de URL o Vary
• [ ] Fallback seguro (JPEG) ante errores de transformación
• [ ] alt + datos estructurados para SEO de imágenes

Detalles de la clave de caché

• Claves sugeridas: URL + Accept + DPR + Width + Quality
• Normaliza w/q en funciones edge (p. ej., 320/480/640/…)
• Ejemplo de cabeceras de respuesta:

Cache-Control: public, max-age=604800, stale-while-revalidate=2592000
Vary: Accept, DPR
CDN-Cache-Status: HIT

Estrategia de fallback AVIF/WebP

1. Elige AVIF por Accept, luego WebP, y como último recurso JPEG
2. Fallback en servidor ante timeouts/errores → JPEG
3. En cliente, <picture> con type ayuda a que el navegador elija (usa srcset type para hacerlo explícito)

<picture>
  <source type="image/avif" srcset="hero.avif 1x, hero@2x.avif 2x" />
  <source type="image/webp" srcset="hero.webp 1x, hero@2x.webp 2x" />
  <img src="hero.jpg" alt="..." width="1200" height="630" />
</picture>

Normalización del redimensionado en vuelo

• Conjunto de anchos fijo: 320/480/640/768/960/1200/1600/2000, atado a sizes
• Redondea w entrante al más cercano para evitar fragmentación de caché
• q predefinido por uso: miniaturas 60/fotos 70/UI 80

Seguridad y abuso

• URLs firmadas para evitar transformaciones ilimitadas (w/h/q/fmt firmados)
• Limitación de tasa y circuit breaker ante fallos
• Prohibir filtros pesados que puedan saturar CPU

Observabilidad / costes

• Log: URL, fmt, w, q, dpr, cacheStatus, genTime, size
• Paneles: tasa de aciertos por formato, medianas de tamaño, p95 de generación
• Coste: pre‑generar tamaños calientes; TTL largos para descargar el origen

Función edge (pseudo)

export default async function handle(req) {
  const u = new URL(req.url)
  const w = normalizeWidth(u.searchParams.get('w'))
  const q = normalizeQuality(u.searchParams.get('q'))
  const fmt = negotiate(req.headers.get('Accept'))
  const key = `${u.pathname}?w=${w}&q=${q}&fmt=${fmt}`
  const cached = await caches.default.match(key)
  if (cached) return cached
  const out = await transform(u.pathname, { w, q, fmt })
  return new Response(out.body, { headers: responseHeaders({ fmt, w, q }) })
}

Resolución de problemas

• Sin imagen en navegadores antiguos → corrige negociación Accept o usa <source type>
• Generación lenta → reduce conjunto de anchos, predefine calidad, evita doble re‑codificación
• Calidad inconsistente → fija q por uso; AVIF con effort moderado

FAQ

P. ¿Siempre conviene preferir WebP/AVIF?

R. Equilibra compatibilidad y coste de generación. En superficies de marca críticas, JPEG aún puede ganar.

P. ¿Más ejes en Vary reducen la tasa de caché?

R. Normaliza anchura/calidad para controlar la fragmentación. Limita DPR donde importe.

Resumen

“Claves de caché correctas” y “optimización acotada para candidatos LCP” es el camino más corto para mejorar velocidad percibida y tráfico orgánico. Empieza por imágenes héroe y haz A/B pequeño.