What could be causing the animated webp to not work on my Webflow website when it works perfectly in Designer Mode?
TL;DR
- Ensure browser supports animated WebP and verify the file is actually animated.
- Use an Image element (not CSS background) to embed, disable lazy loading if needed, and re-upload the file directly in Designer to avoid optimization stripping the animation.
- Clear browser cache or test in incognito, and verify animation works via direct image URL from the published site.
If your animated WebP file works in Webflow Designer Mode but not on the published site, the issue is likely related to browser support, image optimization, or asset delivery.
1. Check Browser Compatibility
- Ensure the browser you’re testing supports animated WebP. While most modern browsers do, some older versions may not.
- Chrome, Edge, Firefox, and Safari (v14+ on macOS Big Sur+) support animated WebP. Safari 13 and earlier do not.
2. Verify WebP File Format Integrity
- Confirm that the file is truly an animated WebP, not a static WebP with only the first frame showing.
- Try opening the WebP in another browser or tool to verify that the animation exists outside Webflow.
3. Confirm You’re Using the Correct Asset Version
- In Webflow Designer, you may be seeing a local or preview-rendered version.
- On the published site, Webflow might serve a compressed or optimized version that stripped animation (Webflow may optimize WebP images aggressively).
- Re-upload the file and reinsert it, ensuring it doesn’t get altered during compression. Avoid uploading via CMS if animation is critical—upload directly in Designer.
4. Use the Correct Embed Method
- Animated WebP files work best when embedded using:
- Image element (do not set background-image in CSS, as some animations won’t render).
- HTML Embed element (if necessary, for more control).
- Do not use background image styles if the animation isn’t working there.
5. Check Motion Settings or Lazy Loading
- Webflow might apply lazy loading (loading="lazy") to images, which can cause timing issues.
- Set lazy load to “eager” in the image settings or trigger visibility with interactions.
6. Clear Cache or Try Incognito Mode
- Your browser may be caching an older non-animated version of the image.
- Open the published site in incognito mode or clear browser cache.
7. Test With Direct URL
- Get the direct published URL of the image (from the browser's developer tools) and open it directly to see if the WebP animates on its own.
- If the retrieved file is static, Webflow may have altered or replaced it during optimization.
Summary
Animated WebPs may fail on the published Webflow site due to browser compatibility, optimization settings, or incorrect embedding methods. Use an Image element, verify that Webflow hasn’t altered the file, and avoid using WebP animations as CSS backgrounds. Always test with the published asset URL to validate delivery.