Optimizar imágenes de Webflow con Cloudflare: script Worker de 2023

December 6, 2023

· 12 min

El script de Cloudflare Worker que usamos en 2023 para optimizar y cachear imágenes de Webflow con Cloudflare Image Resizer, con los pasos de DNS y Worker y unas breves preguntas frecuentes.

Actualización, octubre de 2026: las cosas han cambiado desde que escribí esto. El enfoque más reciente está en Optimización gratis de imágenes en Webflow con Cloudflare (2026): nuestro Worker O2O open source. El resto de este artículo se mantiene como registro de cómo lo hacíamos entonces.

Artículo original

Hoy vamos a hacer un viaje mágico al corazón de un script de Cloudflare Worker que llevamos tiempo usando para optimizar las imágenes de nuestro proyecto Webflow. Es un poco como echar un vistazo bajo el capó de un coche deportivo, solo que en lugar de aceite y pistones tenemos JavaScript y expresiones regulares.

Ya publicamos un artículo detallado sobre cómo configurar Cloudflare, pero aquí seguiremos otro camino. Para el artículo original sobre cómo cachear Webflow en Cloudflare y usar la app Cassette de Cloudflare para cachear los assets que viven en el CDN de Webflow, ve a este artículo: Usar Webflow con Cloudflare para cachear y acelerar tu proyecto Webflow

El método del artículo anterior se basaba en usar Cassette para cachear todos los assets de Webflow en un subdominio de tu elección. Podía complicarse un poco para agencias pequeñas de Webflow o freelancers sin mucha experiencia con este tipo de cosas, y aunque el método de abajo no es tan complicado, sigue requiriendo editar nuestro código para que funcione en tu caso. Con el método de abajo usaremos un enfoque distinto.

La configuración inicial del DNS es la misma, y haremos un breve repaso al final de este artículo, pero el resto del proceso se separa a partir de ahí. En lugar de depender de la app Cassette de Cloudflare para cachear tus assets y luego reemplazar los enlaces en tu código, con este nuevo enfoque nos centramos solo en las imágenes y no cachearemos ni reemplazaremos enlaces a archivos CSS, archivos JavaScript ni fuentes. Algunas personas tuvieron problemas porque Rocket Loader de Cloudflare cargaba su código más tarde y rompía las interacciones, etc., así que si te costó excluir los archivos JS y CSS correspondientes, este método puede irte mejor.

Aquí usamos un Cloudflare Worker para encontrar todos los enlaces a imágenes que no sean SVG (que ya están optimizadas; los SVG sí los seguimos cacheando). Después las optimiza con Cloudflare Image Resizer, reemplazando todos los enlaces de imágenes de tu proyecto Webflow por enlaces de Cloudflare Image Resizer. Así, Cloudflare no solo puede optimizar imágenes que no están en tu nombre de dominio (el dominio del CDN de Webflow), sino también cachearlas para usos futuros.

¿Suena divertido, verdad? Un recordatorio: igual que en nuestro otro artículo, esto es avanzado, así que léelo con atención. ¡Manos a la obra!

Nuestro script Image Resizer Worker de Cloudflare para Webflow

El script de arriba es el que se ejecuta ahora mismo en Milk Moon Studio, por lo tanto está configurado para nosotros. Tendrías que reemplazar nuestro dominio, milkmoonstudio.com, en dos lugares de este script, y posiblemente actualizar las dos expresiones regulares del script si tus imágenes no están alojadas en https://assets.website-files.com o en sus dominios prod, como pasa con nuestros assets. Más sobre esto más adelante.

Veamos qué hace el Cloudflare Worker

Nuestro script está siempre atento a los eventos fetch. Cuando llega uno, entra en acción y llama a nuestra función ‘handleRequest’.

Nuestra función handleRequest es como un asistente personal: recoge la petición y revisa su 'Content-Type'. Si no encuentra ningún 'Content-Type', simplemente asume que es una cadena vacía.

Si el 'Content-Type' nos dice que es un documento HTML, obtenemos el texto de la respuesta. Es como abrir el paquete para ver qué hay dentro.

Aquí es donde empezamos a optimizar. Buscamos cualquier URL de imagen que apunte al CDN de Webflow y la reemplazamos por URLs que apuntan a nuestro Cloudflare Worker. Es como redirigir el correo a una oficina de correos más eficiente.

Después nos ocupamos de los atributos srcset. Pueden contener varias URLs, así que usamos una función para reemplazar cada una. Es como tener una lista de direcciones y actualizar cada una a un nuevo destino. Esto causó algunos problemas en la implementación anterior de Cloudflare con Cassette. Webflow genera SRC Sets: básicamente, una lista de distintos tamaños de cada imagen del proyecto, redimensionadas para varios anchos de pantalla. Esa optimización del lado de Webflow hacía que Cassette solo reemplazara uno o dos enlaces de imagen de un SRC Set y se saltara los demás. Aquí buscamos coincidencias amplias y experimentamos mucho para intentar capturar el conjunto completo con este fragmento, mientras que el bloque de código anterior busca imágenes que no tienen SRC Sets, así cubrimos todos los frentes.

Una vez hechos todos los reemplazos, lo empaquetamos todo de nuevo en una respuesta nueva y la enviamos. Es como volver a embalar la caja que abrimos y mandarla a su destino final.

Si nuestro paquete no es un documento HTML, simplemente lo enviamos sin abrirlo. Si algo sale mal, registramos el error y devolvemos una respuesta 500. Es como decir: "Vaya, algo ha salido mal. Lo intentaremos más tarde".

¡Y eso es todo! Así es como nuestro script de Cloudflare Worker optimiza las imágenes de nuestros proyectos Webflow. Es un poco como una oficina de correos supereficiente, que redirige el correo y se asegura de que todo llegue a su destino lo más rápida y eficientemente posible.

Actualización: assets.website-files.com, assets-global.website-files.com y cdn.prod.website-files.com

Hace poco nos cambiaron aleatoriamente de assets a assets-global, así que aquí abajo tienes un script de Worker actualizado, y también hemos añadido el nuevo https://cdn.prod.website-files.com. Solo tienes que adaptarlo a tu dominio personalizado:

Pasos para implementarlo

Entonces, aparte de eso, ¿qué tienes que hacer?

Configura los ajustes de DNS necesarios en Cloudflare para permitir el caché.
Actualiza el código con tu propio dominio en lugar de milkmoonstudio.com.
Si tus assets no están alojados en assets.website-files.com como los nuestros, actualiza los dos juegos de expresiones regulares que buscan las URLs del CDN de Webflow. Hemos intentado incluir tantos CDN como hemos podido, pero puede que se nos haya pasado alguno.
¡Añade el Cloudflare Worker! Worker de pago, no lo olvides.
Activa Image Resizer / Image Transformations, es de pago.

1. Ajustes de DNS de Webflow en Cloudflare

Bien, amigos, es hora de ensuciarnos las manos con unos ajustes de DNS. Quizá estés pensando: "Un momento, ¿esto no lo vimos en un artículo anterior?". ¡Y tendrías razón! Pero vamos a darle una vuelta y lo incluimos otra vez para quienes no tengan tiempo de leer también nuestro artículo original sobre el caché de Webflow y Cloudflare.

Ahora bien, Webflow te dará un par de instrucciones aquí. Te dirán que añadas dos registros A y un registro CNAME cuando actives SSL en la pestaña Hosting de Webflow (y hoy en día también te dan un registro TXT). También te dirán que desactives el proxy en Cloudflare (el icono de la nube naranja). Pero nosotros vamos a rebelarnos e ignorar todo eso.

Cuando actives SSL, verás unas instrucciones parecidas a estas:

Ajustes de DNS de Webflow

Pero a estas instrucciones les diremos: "¡Gracias, pero no, gracias!". Esto es lo que debes hacer en su lugar:

Primero, desactiva SSL en la parte inferior de la pestaña Hosting y pulsa Save.

Desactivar SSL

Después, copia las nuevas direcciones de los registros A y los ajustes del CNAME:

Guardar los ajustes de DNS de Webflow sin SSL

Guarda los ajustes de DNS de Webflow sin SSL

Ahora vuelve a marcar la casilla de SSL y guarda. Verás que los ajustes vuelven a los de SSL iniciales, pero ignóralos.
Ve a Cloudflare y añade los ajustes de DNS sin SSL. Debería verse más o menos así:

Añadir los ajustes de DNS de Webflow a Cloudflare

Añade los ajustes de DNS de Webflow a Cloudflare

Puedes añadir el registro TXT correcto como pide Webflow: proxy-ssl.webflow.com.
Asegúrate de que las entradas tengan Proxied activado, aunque las instrucciones de Webflow para Cloudflare te digan lo contrario.
Ve a la pestaña de ajustes SSL/TLS en Cloudflare y activa Full:

Configura SSL en Full en Cloudflare

Vuelve a la pestaña Hosting de Webflow.
¡Uf, cuántos problemas! Pero no te preocupes: ignóralos y publica el sitio.

Ignora los errores de DNS de Webflow

¡Y eso es todo! Has navegado con éxito por el salvaje mundo de los ajustes de DNS de Cloudflare para Webflow. Date una palmadita en la espalda: ya estás cacheando en Cloudflare, bueno, salvo los assets.

2. Actualiza el script del Cloudflare Worker con tu propio dominio

Lo único que tienes que hacer aquí es encontrar la parte de milkmoonstudio.com (hay dos) y cambiarla por el nombre de dominio que tienes en Cloudflare. Está justo en el medio, donde el Worker busca las URLs de las imágenes y las reemplaza. Aquí lo tienes:

3. Actualiza los dos juegos de expresiones regulares

Esto es muy, muy importante. En nuestro caso, el CDN de Webflow almacenaba todos los assets del proyecto en https://assets.website-files.com, pero no siempre es así y varía de un proyecto a otro. Así que, igual que en nuestro otro artículo sobre Cloudflare, tendrás que cambiarlo según el dominio en el que estén alojadas tus imágenes. Puedes inspeccionar el código o abrir una imagen en una pestaña nueva para comprobarlo. Estos son dominios habituales del CDN de Webflow:

https://assets.website-files.com
https://website-files.com
https://uploads-ssl.webflow.com
https://global-uploads.webflow.com
https://cdn.prod.website-files.com

No tenemos ni idea de cuántos hay ni de cómo se eligen, pero estos son algunos que hemos visto.

Si tienes suerte y sabes algo de expresiones regulares, será fácil de actualizar. Si no, mira los ejemplos que hemos preparado abajo, seguro que lo entiendes. Tendrás que actualizar las dos, y esto es básicamente lo que buscará el Cloudflare Worker:

Expresiones regulares para https://assets.website-files.com

Expresiones regulares para https://assets.website-files.com

Expresiones regulares para https://global-uploads.webflow.com

Según el dominio de assets de tu CDN, puede que tengas que trastear un poco, y sí, nosotros también somos malos en esto, quiero decir \/[^\s"']+\ 🤮

4. Añadir el Cloudflare Worker y la ruta del Worker

Bien, has hecho los cambios de DNS, has actualizado el script y deberías tener algo así:
<iframe height="300" style="width: 100%;" scrolling="no" title="Cloudflare Image Resizer - Worker Script" src="https://codepen.io/milkmoonstudio/embed/LYXrvaW?default-tab=js" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/LYXrvaW">
Cloudflare Image Resizer - Worker Script</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

¿Y ahora qué? Tendrás que hacer 4 cosas: añadir un plan de Cloudflare Workers, activar Image Resizing, crear el Worker y añadir la ruta del Worker.

Ve a Workers & Pages, haz clic en Plans y añade un plan. Hay un nivel gratuito. No sabemos si funcionará, nosotros tenemos un plan, así que puedes probar el nivel gratuito y contárnoslo.

Selección del plan de Cloudflare Workers

Después, abre los ajustes de tu dominio, ve a Speed, Optimization y luego Image Optimization, y activa Image Resizing:

Activa Image Resizing

El siguiente paso es crear el Worker y añadir el script. Vuelve al menú principal y luego a Workers & Pages. Haz clic en Create Application y después en Create Worker.

Crea una aplicación Worker

Crea un Cloudflare Worker

Ponle un nombre y pulsa Deploy.

Nombra el Cloudflare Worker

Edita el código, borra lo que hay, pega tu script y pulsa Save and Deploy.

Añade el script al Worker

Por último, vuelve a la página de ajustes de tu sitio, selecciona la pestaña Workers Routes y añade una ruta. Selecciona el Worker y asígnale la ruta. Yo quiero que se ejecute en todas partes, así que lleva comodines: *.milkmoonstudio.com/*

Añade la ruta del Worker

Ya está: ahora puedes probar el sitio para comprobar que funciona.

Cambia los ajustes de Image Resizer (opcional)

Si miras la URL real de Image Resizer en el script del Worker que usamos para reemplazar la imagen de Webflow en el código de la página, verás que usamos ajustes bastante básicos:

https://milkmoonstudio.com/cdn-cgi/image/f=auto,quality=90/

F es de formato y lo tenemos en Auto, así que comprobará el navegador, el dispositivo, la conexión, etc. y decidirá el formato. AVIF se aplica en la medida de lo posible; si no, WebP, etc., si hay compatibilidad. También hay restricciones de tamaño y dimensiones de imagen para la conversión a AVIF, etc. Verás además que hicimos las imágenes con pérdida al 80 % de calidad. Hay muchas, muchas más opciones que puedes encontrar en la documentación del formato de URL de Cloudflare y añadir. Solo recuerda que, al mirar la opción que quieres implementar, tienes que seguir el formato de URL, porque estás colocando esa opción dentro de una URL.

Ahora puedes usar Page Rules para cachear todo (hoy en día eso se hace con Cache Rules, ya que las Page Rules se están retirando). Hay más sobre esto en nuestro artículo original sobre el caché con Cloudflare, échale un vistazo si necesitas ayuda.

Deja un comentario abajo si quieres y echa un vistazo a nuestros otros artículos sobre Cloudflare:

Optimización gratis de imágenes en Webflow con Cloudflare (2026): nuestro Worker O2O open source

Usar Webflow con Cloudflare para cachear y acelerar tu proyecto Webflow

Acelera tu página: Cloudflare Zaraz y Google Analytics

Estamos planeando un vídeo tutorial, así que estate atento.

La forma más fácil de probar tu configuración es usar la extensión DrFlare. Abre DrFlare desde las Dev Tools y recarga la página. Verás estadísticas detalladas y podrás pasar el cursor sobre las imágenes, etc., para analizarlas en el propio sitio.

Preguntas frecuentes

¿Cómo optimizo las imágenes de Webflow con Cloudflare?

Pones un Cloudflare Worker delante de tu sitio que reescribe cada enlace de imagen del CDN de Webflow como un enlace de Cloudflare Image Resizer, de modo que Cloudflare convierte, comprime y cachea las imágenes por ti. Eso es lo que hace el script de arriba. Si empiezas de cero hoy, usa mejor la guía 2026 del proxy de assets y la optimización con Cloudflare.

¿Qué es cdn.prod.website-files.com?

Es uno de los dominios del CDN de Webflow desde los que se sirven tus imágenes, archivos y fuentes subidos. El dominio que usa cada proyecto varía, y por eso las expresiones regulares del paso 3 tienen que coincidir con el tuyo.

¿Necesito un plan de pago de Cloudflare para esto?

No necesariamente. Según los precios de Cloudflare, el plan gratuito de Workers cubre 100 000 peticiones al día e Image Transformations incluye 5000 transformaciones únicas al mes, así que un sitio pequeño puede probarlo gratis. Nosotros usamos un plan de pago de Workers, y los sitios con más tráfico lo necesitarán.

¿Sigue funcionando esta configuración de imágenes con Webflow y Cloudflare?

Funcionaba cuando lo escribimos, y el enfoque sigue siendo la forma en que optimizamos las imágenes, pero los detalles han cambiado. Cloudflare Image Resizer es ahora Image Transformations, las Page Rules se están sustituyendo por Cache Rules, y nuestro Worker actual firma las URLs de sus imágenes y funciona con la configuración Orange-to-Orange de Webflow. La guía 2026 lo cubre todo.

Para ver el panorama general de la velocidad, echa un vistazo a nuestro artículo sobre cómo la velocidad de página impulsa el éxito del negocio y a otro sobre cómo vaciar tu caché de DNS tras publicar en Webflow. Si quieres que lo configuremos por ti, ponte en contacto con nosotros.