How to upload images in Webflow?

Webflow offers several ways to add images to your project, depending on whether you are working in the Designer, the CMS, or the Asset panel. Understanding each method helps you keep files organized and avoid bloating your site with unused assets.

Upload methods

Asset panel

The most common way to upload images is through the Assets panel on the left sidebar in the Designer.

1. Open the Designer and click the Assets tab in the left panel.
2. Click the Upload button or drag files directly into the panel.
3. Supported formats: JPG, PNG, GIF, WebP, and SVG.
4. Once uploaded, images appear in the asset list and can be dragged onto any element that supports images (Image elements, background images, CMS image fields).

You can also create folders inside the Assets panel to keep things organized.

Direct drag and drop onto the canvas

You can drag an image file from your computer directly onto the Designer canvas. Webflow will automatically create an Image element and place the file in your Assets panel.

CMS image fields

When working with CMS items, each Collection can have Image-type fields. To upload images into CMS items:

1. Open the CMS tab and select the Collection.
2. Create or edit an item.
3. Click the image field and upload a file from your computer or choose one from your existing Assets.

CMS images are separate from site Assets. They live inside the Collection and are not shared with the global Asset panel.

External image URLs

You can also reference external images by URL. In an Image element, click the gear icon and switch the source to External URL. The image will load from the external source rather than being hosted on Webflow's CDN.

Use external URLs with caution. If the external host goes down, the image will break on your site.

Size and format recommendations

• Compress images before uploading to keep load times fast.

• Use WebP for photographs and PNG for graphics with transparency.

• Keep individual images under 4 MB.

• SVG is best for logos and icons — scalable and lightweight.

Managing uploaded assets

After uploading, you can rename files, move them into folders, and delete unused assets from the Assets panel. Deleting an asset that is in use will remove it from your design, so check the usage indicator before deleting.