How can I solve the issue of receiving a "Render Failed" message when trying to render my composition with 80 jpeg images in Webflow? I followed the steps in a video tutorial and each image is originally 960x540.

You're encountering a "Render Failed" error in Webflow, likely due to performance or file size limitations when handling a large number of images (80 JPEGs). Webflow's designer and CMS have practical limits based on browser memory and platform rendering capabilities.

1. Optimize Image File Sizes

• Compress each JPEG to reduce file size without major quality loss. Use tools such as TinyJPG, Squoosh, or ImageOptim.
• Even though resolution is 960×540, large file sizes (e.g., >500 KB per image) can overload browser memory during rendering.
• Aim to keep each image below 200 KB, ideally under 100 KB if possible.

2. Convert to Modern Formats

• Consider converting JPEGs to WebP format, which offers superior compression.
• Webflow supports WebP, and smaller image payloads reduce rendering strain.

3. Use Lazy Loading

• If your composition is loading all 80 images on page load, it can cause render failures.
• Use loading="lazy" on image elements. In Webflow, images added via Image elements or CMS Collections default to lazy load unless marked as “eager”.

4. Break the Render into Smaller Chunks

• If you're creating a large animation (e.g., scrolling sequence or composition), try splitting the image sequence into smaller groups.
• Use After Effects with Lottie or custom Webflow Interactions to trigger image visibility in groups of 20–30, rather than all 80 at once.
• Too many image layers or keyframes can exceed browser capacities, especially on lower-end devices.

5. Use Lottie Instead of Image Sequences (when possible)

• If your composition was animated in After Effects, export it as a Lottie JSON using the Bodymovin plugin.
• Webflow has native support for Lottie animations, which are vector-based and significantly more efficient than JPG sequences.

6. Test in Incognito and Other Browsers

• Try rendering in a private/incognito window with no extensions.
• Test in both Chrome and Safari to verify if it's a browser-specific issue.

7. Check Browser Console for Errors

• Open Developer Tools (right-click → Inspect → Console tab) during rendering.
• Any memory or script failure errors may confirm performance limits or image file issues.

Summary

To fix the "Render Failed" error in Webflow caused by 80 JPEG images:

• Compress and optimize images (JPEG or convert to WebP)
• Use lazy loading to defer image rendering
• Split the sequence into smaller groups to reduce render load
• Consider Lottie if images are part of an animation
• Check for browser/memory limitations causing the failure

Reducing image payload and optimizing how they’re used will usually resolve render failure issues.