Webflow does not allow direct hotlinking of images from external URLs, meaning you must upload images to Webflow’s asset manager or use an embed option to reference externally hosted images. Below are the available workarounds:
1. Use an <img>
Tag in an Embed Block
- Add a Custom Code Embed block where you want the image.
- Use the following format inside the embed block:
<img src="https://example.com/image.gif" alt="Description">
- This method works in Webflow’s published site but won’t display in the Webflow Designer.
2. Host Images on a CDN and Use CSS Background Images
- Upload the image to an external CDN (e.g., Cloudinary, Imgur, or your own hosting).
- In Webflow’s Designer, select an element (such as a Div Block).
- Go to Style > Background and set the image URL as the background image.
3. Use Collection Fields for CMS-Hosted Images
- If using Webflow’s CMS, add a Plain Text field to store image URLs.
- In the CMS collection page, insert an Image element and bind it to the URL field (this works only for static images, not GIFs).
4. Convert Large GIFs to WebP or MP4
- GIFs larger than 4MB won’t upload in Webflow.
- Consider converting to WebP for better performance or an MP4 inside a Webflow Video element.
Summary
Webflow does not support image hotlinking directly but allows HTML embeds, CSS background images, CMS URL fields, and media conversion as workarounds. To avoid the 4MB upload limit, consider using an external CDN and referencing the file in your design.