Pipeline de optimización de assets e imágenes sin servidor dedicado

Al desarrollar la web de Wadibrico nos encontramos con un reto clásico de los negocios de suministros y ferretería: más de 58 logotipos de marcas oficiales (Bosch, Makita, Bellota, Stanley...) y decenas de fotografías de producto y de instalaciones físicas. Subir esos recursos tal como los envía el cliente (PNGs de 4 MB con fondos no optimizados o JPEGs con perfiles de color gigantes) arruinaría de inmediato el LCP (Largest Contentful Paint) y aumentaría el consumo de datos móviles de los usuarios.

Pre-procesamiento en build vs transformación on-demand

Muchos frameworks modernos proponen servicios de optimización de imágenes en tiempo de ejecución (/_next/image). Aunque es muy cómodo, en planes serverless o despliegues Edge en Workers puede generar costes adicionales por cómputo o latencias de arranque en frío (cold starts) en la primera carga. Para catálogos de marca estables, el pre-procesamiento estático durante la compilación ofrece el mejor ratio coste/rendimiento.

Automatización del pipeline con Sharp

Implementé un script de pipeline que procesa automáticamente todo el directorio de assets antes del empaquetado final:

• Conversión dual: Genera versiones en AVIF (máxima compresión para navegadores modernos) y WebP (soporte universal garantizado).
• Eliminación de metadatos (Strip EXIF): Elimina datos de geolocalización, miniaturas embebidas y perfiles de color ICC innecesarios, lo que reduce hasta un 35% del peso en fotografías procedentes de smartphones.
• Generación de tamaños adaptativos: Exporta cada imagen en anchos estándar (320w, 640w, 1024w), permitiendo que el navegador elija la resolución óptima mediante el atributo srcset y sizes.

SVG limpio para logotipos vectoriales

Para los 58 logos de marcas, el formato SVG es la opción ideal si está bien depurado. Pasamos cada archivo vectorial por un paso de optimización (SVGO) que elimina metadatos de software de edición (Illustrator, Inkscape), colapsa trazados redundantes y convierte estilos inline a atributos limpios. El resultado: logotipos nítidos con un peso medio inferior a 3 KB por marca.

Cabeceras de caché inmutable en Cloudflare CDN

Una vez procesados, los assets se nombran con un hash de contenido y se configuran con cabeceras de caché agresivas:

``http Cache-Control: public, max-age=31536000, immutable ``

Esto le indica a los navegadores que el archivo nunca cambiará bajo esa URL, permitiendo que tras la primera visita, el carrusel de 58 marcas cargue de forma instantánea desde la memoria caché del dispositivo sin realizar ninguna petición adicional a la red.