Webflow sync, pageviews & more.
NEW

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?

TL;DR
  • Use an <img> tag inside a Custom Code Embed block to reference external images (only visible on the published site).
  • Host images on a CDN and set them as CSS background images in Webflow’s Designer.
  • Store image URLs in a CMS Plain Text field, then bind them to an Image element (GIFs not supported).
  • Convert large GIFs to WebP or MP4 for better performance and compatibility.
  • Webflow does not support direct image hotlinking, but these workarounds allow external image usage effectively.

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.

Rate this answer

Other Webflow Questions