EL PIPELINE DE IMÁGENES
El pipeline FAL plus Sharp que ejecuto en cada sitio de Seahawk para lograr puntuaciones de imagen Lighthouse 100 de forma predeterminada, con números concretos de tamaño de archivo.
Por qué la disciplina en imágenes es la mitad de la batalla de rendimiento
Las imágenes son el elemento LCP en aproximadamente el 70 por ciento de las páginas de marketing. La disciplina en imágenes es la palanca de rendimiento de mayor impacto que conozco. Los equipos que lo hacen bien logran Core Web Vitals sin esfuerzo; los equipos que lo hacen mal luchan con Core Web Vitals para siempre.
La disciplina es estructural: selecciona el formato, redimensiona al momento de la carga, optimiza la codificación, establece dimensiones explícitas, precarga la imagen LCP. Cada una de esas es una inversión de ingeniería única que se amortiza en cada página de cada sitio.
Generación de hero con FAL
Genero imágenes hero mediante FAL flux-pro/v1.1-ultra y Recraft v3. Ambas producen JPEGs de 1200 por 675 píxeles a calidad de codificación completa, típicamente 600KB a 1.5MB por imagen. Cargar sin procesar a Supabase Storage significa que cada página envía ~1MB de hero solo.
FAL cuesta aproximadamente 4 centavos por imagen hero, lo cual es negligible comparado con fotografía manual o licencias de stock.
Re-codificación aguda a WebP
Antes de cualquier carga, la imagen pasa por sharp(buf).resize({width:1600, fit:"inside"}).webp({quality:82}).toBuffer(). Esto produce un archivo WebP 90 por ciento más pequeño que el JPEG fuente sin pérdida perceptual. Un hero de 900KB se convierte en un hero de 80KB.
En 53 imágenes hero en gautamkhorana.com, el ahorro total fue aproximadamente 50MB en todo el sitio. El mismo pipeline aplicado a sitios clientes en Seahawk consistentemente entrega ganancias similares. El código son diez líneas; el impacto es duradero.
Configuración de carga de almacenamiento
Establece cacheControl: 31536000 en la carga de almacenamiento para que el CDN cachee el archivo durante un año. El formato WebP da a los navegadores modernos lo que quieren; los navegadores antiguos recurren a JPEG mediante el elemento picture.
Usa un patrón de URL estable (slug-hero.webp) para que la historia de invalidación de caché sea limpia. Cuando un hero se actualiza, el slug debe rotar (slug-hero-v2.webp) y la base de datos actualiza la URL atómicamente.
La integración frontend
Cada imagen hero debe tener atributos de ancho y alto explícitos en el HTML. Sin ellos, hay cambios de diseño mientras la imagen carga y CLS aumenta. Los componentes Image de Astro y Next.js lo manejan automáticamente; las etiquetas img sin procesar lo necesitan manualmente.
La imagen hero arriba del pliegue debe precargarse con link rel="preload" as="image" en el head del documento. Ahorra típicamente 100 a 400 milisegundos en la métrica LCP. El cambio de una sola línea con mayor impacto disponible en la mayoría de sitios de marketing.
Carga perezosa de todas las imágenes debajo del pliegue con loading="lazy". Los navegadores lo manejan nativamente ahora; no se necesita biblioteca JavaScript.
El pipeline completo en un ayudante único
Extraje este pipeline en scripts/lib/optimize-image.mjs que toma un buffer, ejecuta el cambio de tamaño más la codificación WebP, devuelve el buffer optimizado. Se usa en el pipeline de héroe del blog automático, los scripts de reencodificación en lote y la utilidad de carga manual.
El ayudante único significa que la disciplina está centralizada. Los nuevos scripts que necesitan cargar imágenes llaman al mismo ayudante, obtienen la misma compresión, producen los mismos tamaños de archivo. La disciplina no depende de que ningún ingeniero recuerde ejecutar sharp.