Webflow sync, pageviews & more.
NEW

What could be causing the animated webp to not work on my Webflow website when it works perfectly in Designer Mode?

TL;DR
  • Test the animated WebP in supported browsers like Chrome or Firefox to rule out compatibility issues.
  • Use a custom Embed element with an inline <img> tag to retain animation, avoid using the Image Element.
  • Verify the source file is correctly encoded and animated outside of Webflow.
  • Rename and re-upload the file, then republish the site to bypass CDN caching.

If your animated WebP works in Webflow Designer but not on the published site, it’s likely due to browser compatibility, file handling, or asset delivery issues.

1. Browser Support Limitations

  • Safari (as of early versions) lacks full support for animated WebP. Ensure you're testing in a browser that supports animated WebP like Chrome, Firefox, or Edge.
  • Check the published site in multiple browsers to rule out compatibility issues.

2. Webflow Asset Optimization

  • Webflow may optimize or convert assets on publish, depending on their settings and purpose.
  • If your animated WebP is being added in the Image Element, Webflow may treat it as static and serve only the first frame.
  • To retain animation, always use Background Image via CSS, or embed the animated WebP using a custom Embed element with an inline <img> tag.

3. Incorrect Upload or Conversion

  • Some tools that export or convert to WebP may not encode animation correctly, or only include a single frame.
  • Recheck your source file by opening it in multiple tools like Chrome, ImageMagick, or Squoosh to verify the animation plays outside Webflow.

4. Content Delivery Network (CDN) Caching

  • Webflow’s CDN may cache an earlier version of your file without animation.
  • Force a republish: Made a small change and republish the site to clear the cache.
  • Rename the file before re-uploading to avoid CDN serving the older cached version.

5. Using the Right Method to Embed

  • Best way to retain animation:
  • Use a custom Embed and include the direct image reference:
    <img src="https://cdn.prod.website-files.com/..." loading="lazy">
  • Ensure image isn’t being auto-converted by Webflow, which can happen when dragged directly into the canvas.

Summary

If your animated WebP works in Designer but not when published, it's likely due to browser support, asset optimization, or how it was integrated. Use an Embed element for full control, test in a supported browser, and republish your site after verifying the file plays properly elsewhere.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I correctly set up the robots.txt file in Webflow to ensure certain pages are not ignored by search engines?
Why is the empty state not visible when filtering CMS items in Webflow?
How can I convert shadows from Figma to Webflow? In Figma, shadows have parameters X and Y, while in Webflow, there is only Distance with Angles. How can I determine the angle from X and Y in Figma for Webflow? Thank you.
How can I create a multi-image slider from CMS in Webflow, similar to the Atelier template, where the images scroll to the right instead of having just one image sliding over itself? You can view my current implementation on my site Read-Only.
Any articles or posts on custom variable font integration in Webflow projects?
How can I change the URL corresponding to each page in my Webflow site without using hashtags, but by adding an 'appendix' instead?
How can I create an overlapping layout in Webflow using a separate div block for the gray box and ensuring the image stretches to the edge of the screen?
How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?
How can I prevent 404 errors in Google Search Console for CMS Collection Pages in Webflow that only contain a photo, name, and external links, without creating a layout or using redirects?
Can Webflow be used as a CMS for two different websites and can it automatically update both websites if changes are made using a CSV file?
Why is there a difference in pricing for the CMS site plan on Webflow between my friend's account and my newly created account?
How can I create different types of "Parallax" effects in Webflow without using custom code?
Can a third party payment gateway, such as "Tap Pay," be integrated into Webflow for an ecommerce site that does not support any of the available payment methods provided by Webflow? If so, how can this integration be achieved?
How can I fix the issue with border radius not displaying properly on iOS when applied to a parent div instead of the image itself in Webflow?
How can I add caption text to the Webflow CMS Lightbox Gallery?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?
Is there a way to auto-scroll the page in Webflow after a certain amount of time, without the script automatically scrolling back up if the user has already scrolled past the designated point?
How can I close a dropdown in Webflow when clicking on a link?