Pegar una URL de Cloudinary en el elemento de imagen nativo de Webflow funciona, pero ignora por completo la entrega adaptativa. Los atributos srcset y sizes, que le indican al navegador qué tamaño de imagen solicitar, no están disponibles para fuentes externas en Webflow. Aquí te mostramos cómo añadirlos usando un bloque de código personalizado.
Las imágenes demasiado grandes son uno de los lastres de rendimiento más comunes en los sitios de Webflow. ¿El problema? El elemento de imagen nativo de Webflow no expone los controles srcset para imágenes alojadas externamente, por lo que no hay un lugar obvio donde conectar la entrega adaptativa de Cloudinary.
El resultado es que la gente sube imágenes en resolución completa directamente a Webflow y deja que el navegador las reduzca, o usan las URLs de Cloudinary como un src atributo directo y pierden todo el potencial de la entrega adaptativa.
En esta guía, cubrimos dos métodos para servir imágenes de Cloudinary de forma adaptativa en Webflow: un bloque de código con srcset escrito a mano para páginas estáticas, y la biblioteca de JavaScript de Cloudinary para un redimensionamiento automático por elemento. Cada método tiene sus pros y sus contras. Te diré cuál elegir según lo que estés construyendo.
¿Qué necesitas para servir imágenes adaptativas de Cloudinary en Webflow?
Necesitas una cuenta de Cloudinary (el plan gratuito sirve para los tres métodos), al menos una imagen subida a tu biblioteca multimedia de Cloudinary y un sitio de Webflow con un plan de pago. El requisito del plan de pago es para el elemento de código incrustado, que no está disponible en el plan gratuito de Webflow.
Una cuenta de Cloudinary y una imagen subida
Regístrate en cloudinary.com. Después de iniciar sesión, tu nombre de nube aparecerá en la esquina superior izquierda del panel. Es un identificador corto como mycompany que aparece en cada URL de entrega que crees.
Sube tu primera imagen a través de la pestaña de la biblioteca multimedia.
Después de subirla, Cloudinary te mostrará el ID público de la imagen: la ruta y el nombre de archivo usados para referenciarla en las URLs. Para una imagen subida a la raíz de tu biblioteca multimedia llamada hero.jpg, el ID público es simplemente hero.jpg.
Para una carpeta como /site-images/hero.jpg, el ID público es site-images/hero.jpg.
El plan gratuito de Cloudinary incluye 25 créditos de transformación mensuales y 25 GB de almacenamiento. Para un sitio pequeño, eso suele ser suficiente. Si vas a usar muchas variantes srcset en docenas de imágenes, controla tu uso en el panel de Cloudinary y ten en cuenta los límites del plan gratuito antes de publicar en producción.
Un sitio de Webflow con un plan de sitio activo
El elemento de código incrustado requiere un plan de espacio de trabajo Core, Growth, Agency o Freelancer, o un plan de sitio activo en el proyecto en el que estés trabajando. Los sitios gratuitos de Webflow sin uno de estos planes no pueden usar elementos de código incrustado.
Si estás en el plan gratuito de Webflow y quieres hacer pruebas, publica en tu .webflow.io subdominio de prueba después de actualizar.
Una vez que tengas todo esto, configurar la entrega de imágenes adaptativas te llevará entre 15 y 20 minutos para el Método 1, y un poco más para los Métodos 2 y 3 si estás configurando los campos del CMS desde cero.
¿Cuáles son los métodos para servir imágenes adaptativas de Cloudinary en Webflow?
Webflow no tiene un control de interfaz nativo para srcset en imágenes externas, por lo que todos los métodos dependen del elemento de código incrustado o de código personalizado en la configuración del proyecto. La elección entre ellos se reduce a una pregunta: ¿vas a programar a mano unas pocas imágenes o quieres un redimensionamiento automático en toda una página?
| Método | Cómo funciona | Ideal para | Pros y contras |
|---|---|---|---|
| Incrustación de srcset estático | |
Páginas estáticas, imágenes principales (hero), secciones de marketing | Construcción manual de URL; actualiza la incrustación si cambias las imágenes |
| Biblioteca JS de Cloudinary | cloudinary-core script + cld-responsive clase que ajusta automáticamente el tamaño de cada imagen etiquetada |
Páginas con muchas imágenes, patrones de puntos de interrupción consistentes | Requiere JavaScript; se sacrifica la precarga del navegador |
Uso el Método 1 para imágenes principales y secciones destacadas donde sé que la imagen no cambiará a menudo. El Método 2 lo reservo para galerías o páginas de portafolio con una docena de imágenes que no quiero programar a mano.
Método 1: Añadir una imagen responsiva de Cloudinary con una incrustación srcset estática
Este método construye una etiqueta srcset que contiene múltiples URLs de Cloudinary (una por punto de interrupción) y la coloca en un elemento de incrustación de código de Webflow. El navegador elige la imagen con el tamaño más cercano según la ventana gráfica actual. Sin JavaScript ni bibliotecas externas. Solo HTML que funciona.
Para la estructura de la URL de Cloudinary, cada transformación va entre /upload/ y el ID público. El ancho se establece con w_[N], el formato con f_auto y la calidad con q_auto.
Así, una versión de 768px de ancho, con formato y calidad automáticos de hero.jpg se ve así:
https://res.cloudinary.com/[cloud-name]/image/upload/f_auto,q_auto,w_768/hero.jpg1. Construye tu URL base de Cloudinary
Abre tu biblioteca de medios de Cloudinary, haz clic en tu imagen, selecciona “Copiar URL” y luego elige “Copiar URL original con opciones”.
La URL de entrega se verá así:
https://res.cloudinary.com/mycompany/image/upload/hero.jpg
Construirás todas tus variantes de srcset a partir de esta base insertando parámetros de transformación después de /upload/.
2. Genera tus URLs de srcset
Para una imagen responsiva típica, genera cinco variantes de ancho. Estas cubren el rango desde una pantalla móvil pequeña hasta una pantalla retina de escritorio grande:
https://res.cloudinary.com/mycompany/image/upload/f_auto,q_auto,w_640/hero.jpg 640w
https://res.cloudinary.com/mycompany/image/upload/f_auto,q_auto,w_768/hero.jpg 768w
https://res.cloudinary.com/mycompany/image/upload/f_auto,q_auto,w_1024/hero.jpg 1024w
https://res.cloudinary.com/mycompany/image/upload/f_auto,q_auto,w_1280/hero.jpg 1280w
https://res.cloudinary.com/mycompany/image/upload/f_auto,q_auto,w_1920/hero.jpg 1920wDesglose de lo que hace cada parámetro:
f_autole indica a Cloudinary que entregue el formato más eficiente que admita el navegador (normalmente WebP, AVIF o JPEG XL) sin necesidad de mantener URLs independientes para cada formato. Los formatos disponibles dependen de tu plan de Cloudinary. Sinf_auto, Cloudinary entrega el formato original independientemente de las capacidades del navegador.q_autoaplica una compresión inteligente. Ambas son operaciones de transformación gratuitas incluidas en todos los planes de Cloudinary y deberían estar presentes en cada URL de imagen que generes.
¿Por qué estos puntos de interrupción? Cubren desde dispositivos móviles pequeños hasta pantallas de escritorio grandes tipo retina, alineándose perfectamente con los puntos de interrupción responsivos integrados de Webflow, donde la vista de escritorio base comienza en 992px y el punto de interrupción para tabletas se aplica a partir de 991px hacia abajo.
Los puntos de 1280px y 1440px en el srcset se corresponden con los puntos de interrupción más grandes y opcionales de Webflow para diseños de pantalla panorámica. Puedes recortar o ampliar esta lista según tu diseño real: una imagen en una cuadrícula de 2 columnas solo necesita llegar hasta unos 800w.
Pantallas Retina/HiDPI: Un MacBook con una pantalla 2x a 1280px de ancho lógico solicita una imagen de unos 2560px. La entrada de 1920w es la que más se acerca en este srcset, lo que significa que los usuarios con pantallas retina obtienen una imagen de densidad ligeramente menor.
Para imágenes principales (hero) donde la nitidez es clave, añade una 2560w entrada. Para imágenes secundarias, 1920w es suficiente. La mejora a 2560w es mínima con los ajustes de compresión habituales.
3. Escribe la etiqueta![]()
Combina las URLs del srcset con el atributo sizes. El atributo sizes le indica al navegador qué ancho tendrá realmente la imagen en cada tamaño de ventana. Esto es lo que permite al navegador elegir la entrada del srcset correcta.
Para una imagen principal (hero) a pantalla completa:
<img
src="https://res.cloudinary.com/mycompany/image/upload/f_auto,q_auto,w_1024/hero.jpg"
srcset="
https://res.cloudinary.com/mycompany/image/upload/f_auto,q_auto,w_640/hero.jpg 640w,
https://res.cloudinary.com/mycompany/image/upload/f_auto,q_auto,w_768/hero.jpg 768w,
https://res.cloudinary.com/mycompany/image/upload/f_auto,q_auto,w_1024/hero.jpg 1024w,
https://res.cloudinary.com/mycompany/image/upload/f_auto,q_auto,w_1280/hero.jpg 1280w,
https://res.cloudinary.com/mycompany/image/upload/f_auto,q_auto,w_1920/hero.jpg 1920w
"
sizes="100vw"
alt="Descriptive alt text"
loading="lazy"
style="width: 100%; height: auto; display: block;"
/>Para una imagen que ocupa el 50% de la ventana en escritorio pero el ancho completo en móviles:
sizes="(min-width: 768px) 50vw, 100vw"El atributo src es la opción de respaldo. Usa el ancho intermedio (1024w). El atributo loading="lazy" pospone la carga hasta que la imagen esté cerca de la ventana gráfica. Elimínalo en las imágenes principales (hero) que aparecen al principio de la página para evitar afectar al LCP.
Para imágenes principales (hero) que aparecen al principio de la página, omite loading="lazy" por completo o configura loading="eager". Además, añade fetchpriority="high" para indicar al navegador que este es tu elemento LCP:
<img srcset="..." sizes="100vw" src="..." fetchpriority="high" alt="...">fetchpriority="high" es compatible con todos los navegadores modernos y puede mejorar significativamente las puntuaciones de LCP al dar prioridad a la imagen principal sobre otros recursos.
4. Añade un elemento de código incrustado (Embed) en Webflow
En el diseñador de Webflow, abre el panel Añadir (el icono + en la barra de herramientas izquierda). Busca 'Embed' usando el campo de búsqueda o desplázate hasta la sección de Componentes y arrastra el elemento Embed al lienzo.
El elemento Embed aparece como un cuadro gris de marcador de posición en el lienzo. Esto es normal. No mostrará una vista previa de la imagen en el diseñador. Haz clic en él para abrir el editor de código.
5. Pega tu![]()
Con el elemento Embed seleccionado, se abrirá el editor de código.
Pega la etiqueta
6. Publica y verifica con las herramientas de desarrollo del navegador
Publica tu sitio. En la página publicada, abre las herramientas para desarrolladores de tu navegador (F12 o clic derecho → Inspeccionar), busca el
- El
srcsetatributo esté presente con las cinco URL - El
sizesatributo coincida con lo que configuraste - El
srcatributo muestre la URL de respaldo correcta
Para verificar qué imagen cargó realmente el navegador, cambia a la pestaña Red (Network), filtra por Img, recarga la página y busca el dominio de Cloudinary (res.cloudinary.com). El archivo cargado debería coincidir aproximadamente con el ancho de tu ventana gráfica actual.
En un escritorio de 1280px, el navegador debería solicitar la imagen de 1280w o 1024w, no la de 1920w.
Resultado esperado: El navegador carga una imagen adecuada para la ventana gráfica y f_auto entrega WebP o AVIF a los navegadores que los admiten. En un dispositivo móvil de 375px, el navegador debería servir la imagen de 640w en lugar del original de 1920w.
Método 2: Usar la biblioteca JS de Cloudinary para el ajuste automático de tamaño
La biblioteca de JavaScript cloudinary-core de Cloudinary supervisa cada imagen etiquetada con la clase cld-responsive. Reemplaza el marcador de posición data-src por una URL ajustada al ancho exacto en píxeles disponible para ese elemento en el diseño. Esto es automático; una vez configurado, no tienes que escribir srcset en absoluto.
For new projects, Cloudinary recommends @cloudinary/url-gen, but for a Webflow embed context with no build step, cloudinary-core remains the practical choice — the newer SDK assumes a module bundler. If your setup supports ES modules, check Cloudinary's JS SDK docs for the current approach.La contrapartida es que el navegador no puede precargar estas imágenes antes de que se ejecute el script, lo que puede afectar al Largest Contentful Paint en las imágenes principales (hero). No uso este método para imágenes que aparecen en la parte superior de la página, pero es perfecto para cuadrículas, galerías y secciones inferiores.
1. Añade la biblioteca de Cloudinary al código Head de tu sitio
En el Diseñador de Webflow, ve al logotipo de Webflow → Configuración del sitio → Código personalizado → Código Head.
Pega allí la etiqueta del script de la biblioteca:
<script src="https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.js" type="text/javascript"></script>Colocarlo en el código Head asegura que la variable global cloudinary esté definida antes de que se ejecuten los scripts incrustados en el cuerpo.
Para sitios en vivo, fija una versión específica en lugar de @latest para protegerte contra cambios que puedan romper el funcionamiento. Consulta unpkg.com/cloudinary-core para obtener el número de versión actual y luego reemplaza @latest con él (por ejemplo, cloudinary-core@2.14.1).
Haz clic en "Guardar cambios" para guardar el encabezado.
2. Añade un elemento de código personalizado con el script de inicialización y la etiqueta de imagen
En el Diseñador de Webflow, añade un elemento Incrustar (desde el panel Añadir) a la página donde quieras que aparezca la imagen adaptable.
Abre el editor de código y pega:
<img
data-src="https://res.cloudinary.com/mycompany/image/upload/f_auto,q_auto,w_auto,c_scale/hero.jpg"
class="cld-responsive"
alt="Descriptive alt text"
style="width: 100%; height: auto; display: block;"
/>
<script type="text/javascript">
var cl = cloudinary.Cloudinary.new({ cloud_name: "mycompany" });
cl.responsive();
</script>Reemplaza mycompany con tu nombre de nube real de Cloudinary tanto en la URL data-src como en el valor cloud_name.
La w_auto,c_scale transformación le indica a Cloudinary que entregue una imagen ajustada al ancho disponible del elemento. La cloudinary-core biblioteca lee ese ancho del DOM después de que la página se carga y actualiza el data-src a una URL real con el valor de píxeles correcto, por ejemplo, w_800 en una sección de 800px de ancho.
En el sitio publicado, cada imagen se carga con el ancho que Cloudinary determina que coincide con el contenedor. En las herramientas de desarrollo, verás cómo data-src se convierte en un atributo src adecuado con un valor de ancho después de que se ejecuta el script.
3. Prueba en varios tamaños de ventana gráfica
La biblioteca JS actualiza los anchos de las imágenes en incrementos de 100px de forma predeterminada para evitar generar demasiadas imágenes transformadas únicas. Un contenedor de 847px de ancho obtiene una imagen de 900px, no una de 847px. Este es un buen equilibrio entre precisión y la cantidad de transformaciones de Cloudinary.
Cambia el tamaño de la ventana de tu navegador y recarga la página. Deberías ver valores w_[N] diferentes en las URLs de Cloudinary para distintos tamaños de ventana gráfica.
Si ves el mismo valor de ancho independientemente del tamaño de la ventana, es que el script de inicialización no se está ejecutando antes de que se cargue la imagen. Comprueba que el script cloudinary-core esté en el Head Code (no en el Footer Code) y que la llamada cl.responsive() aparezca después de la etiqueta de imagen en el mismo elemento Embed.
El orden importa. La imagen debe existir en el DOM antes de que cl.responsive() busque elementos cld-responsive.
4. Excluye las imágenes principales (hero) de este método
Las imágenes que aparecen al cargar la página (above-the-fold) no deberían usar el método que depende de JS, ya que el navegador no puede precargarlas antes de que se ejecute el script. Para cualquier imagen que probablemente sea tu Largest Contentful Paint, usa el srcset estático del Método 1, o combina ambos: usa el Método 1 para la imagen principal y el Método 2 para todo lo que esté debajo en la misma página.
Un patrón práctico: añade el cloudinary-core script de inicialización una vez en el Head Code de tu sitio, luego usa la etiqueta cld-responsive y los atributos data-src en los elementos Embed.
Ambos métodos conviven perfectamente en la misma página porque utilizan mecanismos totalmente distintos: uno es HTML estático y el otro funciona mediante JavaScript.
¿Qué hace que las imágenes de Cloudinary fallen en Webflow?
Las imágenes que se ven bien en el panel de Cloudinary pero fallan en el sitio de Webflow suelen entrar en una de estas cuatro categorías: código que solo se ejecuta en sitios publicados, un atributo sizes ausente o mal formado, un error en la construcción de la URL o un problema de orden de inicialización con la biblioteca JS.
El síntoma suele señalar directamente a la causa.
La imagen aparece en el Diseñador pero no en el sitio publicado
Causa: Los elementos de código incrustado que contienen etiquetas <script> muestran un bloque de marcador de posición en el Diseñador, no una vista previa real. Los scripts solo se ejecutan en el sitio publicado.
Solución: Publica en tu .webflow.io subdominio de prueba para verificar sin salir a producción en un dominio personalizado. Si la imagen aparece en la URL de prueba pero no en el Diseñador, el código funciona correctamente.
La imagen se carga a resolución completa a pesar del srcset
Causa: Un atributo sizes ausente o incorrecto. El navegador usa 100vw por defecto cuando sizes no está presente, pero esto interactúa con tu srcset de forma distinta a una declaración explícita. Más comúnmente, la imagen se está cargando desde el src fallback en lugar del srcset, lo que significa que el navegador encontró el srcset mal formado.
Solución: En las herramientas de desarrollo del navegador, inspecciona el elemento currentSrc en la consola: document.querySelector('img').currentSrc. Si coincide exactamente con tu src fallback (no con una entrada de srcset), tu sintaxis de srcset tiene un error. Busca comas faltantes entre las entradas de srcset o espacios dentro del descriptor de ancho (debería ser 640w, no 640 w).
La URL de Cloudinary devuelve un error 400 o 404
Causa: Sintaxis de transformación incorrecta o un ID público que no coincide con el archivo subido.
Solución: Prueba la URL directamente en una pestaña del navegador primero. Errores comunes: espacios en el ID público (Cloudinary los codifica, pero pueden causar problemas si se escriben a mano), nombre de nube incorrecto o un segmento de versión que no coincide. Elimina todos los parámetros de transformación y prueba primero la URL base:
https://res.cloudinary.com/mycompany/image/upload/hero.jpgSi esto carga, vuelve a añadir las transformaciones una por una hasta encontrar la que causa el error.
El embed dinámico del CMS muestra la sintaxis de enlace sin procesar en lugar de la URL de la imagen
Causa: La sintaxis de enlace del campo ({{wf ...}}) no se insertó usando el botón "Añadir campo" de Webflow; se escribió manualmente, lo que casi siempre resulta en un código de enlace mal formado.
Solución: Abre el editor de código del embed, borra la sintaxis de enlace manual, coloca el cursor dentro del valor del atributo y usa el botón "Añadir campo" para insertar el enlace correctamente. Webflow genera la sintaxis JSON correcta y escapa las comillas automáticamente.
Las imágenes de la biblioteca JS no cambian de tamaño al modificar el viewport
Causa: La biblioteca JS de Cloudinary cloudinary-core solo activa el redimensionamiento responsivo en la carga inicial y en los eventos de cambio de tamaño de ventana con un retraso de debounce. Si cambias el tamaño de la ventana e inspeccionas inmediatamente, es posible que la imagen aún no se haya actualizado.
Solución: Cambia el tamaño de la ventana, espera unos 500 ms y luego recarga la página. La biblioteca también requiere que el script de Cloudinary en el código del pie de página (Footer Code) de la configuración del proyecto se cargue antes de la llamada cloudinary.Cloudinary.new() en el elemento Embed.
Si el orden de inicialización está invertido (etiqueta de la biblioteca en el Footer Code, script de inicialización en un embed del cuerpo), la variable global cloudinary no existirá cuando se ejecute el script del embed. Por eso la biblioteca debe ir en el Head Code, no en el Footer Code.
El Head Code se ejecuta antes que el cuerpo de la página, por lo que la variable global siempre está disponible para cualquier elemento incrustado que le siga.
Lleva Cloudinary y Webflow al siguiente nivel
La entrega responsiva es la capa de rendimiento. La siguiente capa es el flujo de trabajo: mantener Cloudinary y Webflow sincronizados cuando las imágenes cambian, sin tener que actualizar manualmente las URLs en todas las entradas del CMS.
Explora Webflow + Cloudinary para profundizar en cómo se conectan, qué gestiona cada uno y los patrones de arquitectura comunes.
Consulta la documentación para desarrolladores de Webflow para conocer los flujos de trabajo del lado del servidor, donde una canalización externa sube archivos a Cloudinary y envía las URLs al CMS de Webflow mediante programación.
Preguntas frecuentes
¿Puedo usar URLs de Cloudinary directamente en el elemento de imagen nativo de Webflow?
Sí. Puedes pegar una URL de Cloudinary como fuente de imagen en el elemento de imagen de Webflow, pero perderás la entrega responsiva. El elemento de imagen nativo de Webflow no expone controles de srcset o sizes para URLs externas. Esos atributos solo aparecen para imágenes subidas al alojamiento de activos de Webflow. Para una entrega responsiva, utiliza un elemento de código personalizado (Custom code embed) con una etiqueta
¿Cloudinary servirá WebP automáticamente sin configuración adicional?
Sí, si incluyes f_auto en los parámetros de transformación. f_auto comprueba la cabecera Accept del navegador y sirve WebP, AVIF o JPEG XL cuando son compatibles, usando JPEG como alternativa. Sin f_auto, Cloudinary sirve el formato original independientemente de las capacidades del navegador. Ten en cuenta que AVIF y JPEG XL no están habilitados para f_auto en todos los planes de Cloudinary. Las cuentas basadas en ancho de banda deben contactar con el soporte de Cloudinary para habilitarlos.
