Can images (including gifs) be added to a Webflow website from a URL instead of uploading them, to avoid the problem of uploading images larger than 4MB?

Webflow does not support adding images from a direct URL as native image elements. All images must be uploaded to Webflow's CDN to be used in the Designer. Here's how this affects usage of large images like GIFs:

1. Webflow Image Upload Limitations

• Webflow’s file size limit for a single image upload is 4MB in the Designer.
• This limit applies to all image formats including GIFs, JPGs, PNGs, and SVGs.
• Resources larger than 4MB will need to be optimized before uploading.

2. No Support for Direct URL-Based Images in the Designer

• You cannot use a URL (e.g., https://example.com/image.gif) as the src of an Image element in the Webflow Designer.
• Webflow converts all image references in the Designer to its hosted CDN paths upon upload.

3. Workarounds for Linking External Images

If you need to use an image that exceeds the 4MB limit:

• Use an Embed element and insert an img tag referencing the external URL (e.g., <img src="https://example.com/large.gif" alt="...">).
• Ensure the external server allows hotlinking, or the image won’t appear.
• This method bypasses Webflow’s CDN and size restrictions, but does not benefit from Webflow’s image optimization and hosting.

4. Alternative for Dynamic Content (CMS)

• In the CMS, image fields also require actual file uploads to Webflow and follow the same file size constraints.
• You can’t store an external image URL in an image field and expect Webflow to render it like a file.

Instead:

• Use a plain text field for a URL to an external image.
• Then use a custom Embed element in the Collection Page with an external image tag: <img src="CMS field with image URL" loading="lazy" alt="...">.

Summary

Webflow does not allow direct use of image URLs in native image elements. However, you can bypass the 4MB upload limit by using the Embed element to insert images from external URLs using HTML. Be cautious about hotlinking and performance when using large external assets.