Canalización de optimización por lotes — INP/Calidad/Flujo 2025

Para “optimizar muchas imágenes con seguridad” necesitas una canalización; no herramientas sueltas. Este artículo detalla patrones de diseño/operación que preservan INP/UX y entregan calidad predecible.

Resumen de arquitectura

• Front: arrastrar‑y‑soltar, progreso, cancelar
• Workers: procesamiento en cola con paralelismo controlado
• Almacenamiento: nombres con huella para recambios seguros

Enlaces internos: Compresión masiva, Conversor avanzado

UI que no empeora INP

• Subidas cancelables con fetch() + AbortController
• Carga pesada a Web Workers/colas; hilo principal ligero
• Muestra conteos/tiempo realistas, no “ETA” inestables

Presets de calidad

• Miniaturas: WebP/AVIF calidad media‑alta; prioriza redimensionado
• Fotos: prioriza AVIF; genera JPEG/WebP por compatibilidad
• UI/logos: PNG/WebP sin pérdida con reducción de paleta

Matriz de transformaciones (ejemplo)

• Entrada: PNG/JPEG/HEIC/TIFF → Salida: AVIF/WebP/JPEG (profundidad/ICC según uso)
• Tamaños: 320/640/960/1200/1600 px (alineado con sizes)
• Color: P3→sRGB explícito; incrusta ICC sRGB

Tests automatizados (pseudo)

// Guardia de diferencia visual
expect(butteraugli(original, output)).toBeLessThan(1.2)

Daños / datos estructurados

// Verificar metadatos e integridad
expect(hasICC(output)).toBe(true)
expect(readingTime(articleMdx)).toBeGreaterThanOrEqual(1)

Checklist previa

• [ ] Imágenes LCP alineadas con sizes
• [ ] Alt/atribución integradas
• [ ] Huellas habilitan invalidación segura de caché

Monitorización y rollback

• Identifica trabajos; ante fallos, vuelve a originales
• Visualiza logs CDN por formato/tamaño; tasa de aciertos
• Si empeoran LCP/INP, auto‑rollback a presets seguros

Diseño de colas y backpressure

• Colas por prioridad: miniaturas/héroe/baja
• Backpressure: estrangula entrada cuando supere capacidad; reintentos en cola
• Observabilidad: longitud de cola, espera, tasa de fallos

type Job = { id: string; kind: 'thumb'|'hero'|'bulk'; src: string }

Concurrencia y reanudación

• Paralelismo según CPU/memoria; ajusta por resolución
• Procesa en lotes de 100; reintenta solo los fallidos
• Reanudación: idempotencia con huella src+params

const pool = new WorkerPool({ size: Math.max(2, os.cpus().length - 1) })

Almacenamiento (S3/GCS)

• Orígenes inmutables en original/; variantes públicas en public/
• Metadatos mínimos (p. ej., x-amz-meta-icc: srgb)
• Ciclo de vida: mueve variantes según frecuencia de acceso

Reintentos/idempotencia/expiración

• Reintentos con backoff exponencial + jitter; tope de intentos
• Idempotencia vía hash de src + params (guarda un idempotency-key por solicitud)
• Expira variantes antiguas por clave

Coste

• Pre‑genera tamaños calientes; sube aciertos de caché
• Presets de calidad/anchura reducen intentos fallidos
• Bajo carga, baja effort de AVIF; re‑genera luego con más calidad

Observabilidad

• Log: jobId, src, fmt, w, q, duration, bytes, error
• KPIs: p50/p95/p99, tasa de éxito, reintentos, OOM
• Alertas: umbrales para p95 y fallos

Worker (pseudo)

import sharp from 'sharp'

export async function process(job: Job) {
  const { src } = job
  const buf = await fetchBuffer(src)
  return sharp(buf)
    .withMetadata({ icc: 'sRGB.icc' })
    .resize({ width: 1200, withoutEnlargement: true })
    .toFormat('avif', { quality: 60, effort: 4 })
    .toBuffer()
}

Resolución de problemas

• OOM: baja paralelismo; transmite/segmenta imágenes enormes
• Calidad irregular: introduce presets por propósito
• Atascos: prioriza colas héroe; retrasa baja prioridad

FAQ

P. ¿Conviene muchos pasos de anchura?

R. Un conjunto finito alineado a sizes es suficiente. Demasiado granular fragmenta la caché.

P. ¿Mayor effort de AVIF siempre es mejor?

R. En la práctica, 3–6 ofrece mejor relación coste/rendimiento; demasiado alto reduce throughput.

Resumen

Controla paralelismo, estandariza presets y añade verificación/monitorización/rollback. Empieza pequeño y itera con métricas.