Cloudflare Image Resizing vs next/image: optimización de imágenes en el edge
Qué cambia al optimizar imágenes con Cloudflare en vez del optimizador nativo de Next.js, y cómo lo configuro en proyectos desplegados en Workers.
- #cloudflare
- #next-image
- #performance
- #imagenes
El optimizador de imágenes de next/image da por hecho que corres en el runtime de Node de Vercel. En Cloudflare Workers, ese runtime no está disponible del mismo modo, así que la optimización de imágenes necesita otro camino: Cloudflare Image Resizing.
Cómo funciona Image Resizing
Es un servicio del propio Cloudflare que redimensiona, recorta y convierte formato de una imagen al vuelo, en el edge, a partir de parámetros en la URL. Next.js sigue usando el componente
La configuración práctica
En next.config.ts, defines un loader personalizado que construye la URL con los parámetros de Cloudflare (width, quality, format=auto). El format=auto es la pieza importante: Cloudflare sirve AVIF o WebP según lo que soporte el navegador del visitante, sin que tengas que generar tú esas variantes.
El matiz de las Server Actions con Node.js
Algunas funciones (como un middleware que necesite APIs de Node completas) tienen que quedarse fuera del Edge runtime. En esos casos, mantengo un middleware.ts separado del código de imágenes hasta que el adaptador de Cloudflare soporte funciones proxy de Node de forma nativa.
Conclusión
Cloudflare Image Resizing no es una limitación, es una optimización distinta con las mismas garantías de percepción de carga: imágenes en el formato correcto, del tamaño correcto, sin layout shift. El cambio real es de configuración, no de arquitectura del componente.
¿Construyendo algo?
Si esto te ha resonado, podemos hablar. Contactar →