Assets panel

Updated

Upload and manage your site’s static assets.

The Assets panel allows you to upload, manage, and use your site’s static assets (i.e., assets that aren’t added to a CMS Collection item), such as images, documents, and animation files. You can open it when designing or building in Webflow by clicking the “Assets” icon in the left toolbar, or by pressing J on your keyboard.

Supported file types

The Assets panel supports the image, document, and animation file types listed below. 

Note

You’ll receive an error if you try to upload an unsupported file type or if the file size is too large. The maximum file size is 4MB for images and 10MB for documents.

Supported image file types

  • PNG
  • JPEG and JPG
  • GIF
  • SVG
  • WebP
  • AVIF

Supported document file types

  • PDF
  • DOC and DOCX
  • XLS and XLSX
  • PPT and PPTX
  • TXT
  • CSV
  • ODT
  • ODS
  • ODP

Pro tip

You can add well-known files to your Webflow site by creating a “well-known” folder in the Assets panel. Learn more about uploading a well-known file.

Supported animation file types

  • Lottie JSON (a .json file formatted specifically for Lottie animations)
  • lottie (dotLottie)
  • riv

Pro tip

There are three ways to get a dotLottie file:

Naming your files before uploading

To avoid errors when uploading files to the Assets panel and ensure you can link to your assets, use short filenames — 100 characters or less, including the file extension (for example, .png, .pdf, etc.).

How to add files to the Assets panel

Important

Files you upload to the Assets panel are publicly accessible and may be indexed by search engines if they're linked or displayed on a publicly viewable page. Only upload files you have the right to use and distribute.  Learn more about asset privacy in Webflow.

There are three ways to add files to the Assets panel when designing in Webflow:

  • Upload files from the Assets panel
  • Dragging and dropping files directly into Webflow
  • Install a shared Library that contains assets

Upload files from the Assets panel

To upload files from the Assets panel:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Click the “cloud upload” icon
  3. Select the files you want to upload
  4. Click Open

Drag files directly into the Webflow

To add files directly into Webflow:

  1. Open your computer’s file manager
  2. Select the files you want to add
  3. Drag and drop the files onto the canvas

When you drag and drop files onto the canvas, they're automatically added to the Assets panel. When you drag a single image file onto the canvas, an image element is also automatically created.

Note

You can't drag a dotLottie file directly onto the canvas due to browser limitations. Upload dotLottie files to the Assets panel instead.

Install a shared Library that contains assets

If your Workspace has a shared Library that contains assets, you can install it to access those shared assets when designing and building in Webflow. To install a shared Library:

  1. Go to the Components, Assets, or Variables panel
  2. Click the “Manage Libraries” icon
  3. Click Install for the Library you’d like to install onto your site

Then, you’ll have access to assets from the Library via the Assets panel, below your site assets. Learn more about Libraries.

Managing your assets

Once you’ve added assets to the Assets panel, you can manage them in a variety of ways, such as previewing, renaming, replacing, deleting, and organizing them. You can also expand the Assets panel and change how assets are displayed.

Note

It’s not possible to edit the content of images or files directly in Webflow. To make changes to an asset, edit it using the appropriate software and replace the asset with the modified file.

Copy or preview an asset’s link

When you add an asset to the Assets panel, it’s uploaded to Webflow’s CDN (Content Delivery Network) and assigned a publicly accessible link (i.e., a URL). You can copy or visit the link to preview an asset.

To copy an asset link:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Hover over the asset to which you want to copy the link
  3. Click the “more options” icon to open the contextual menu
  4. Click Copy Link

To preview an asset link:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Hover over the asset you want to preview
  3. Click the “more options” icon to open the contextual menu
  4. Click Open Link

Note

You can only manage (rename, replace, delete, organize, compress, and/or edit) shared assets on the Library’s source site. If you want to use a shared asset and make changes to it, you can duplicate the shared asset to make a local copy and add it to your site assets.

Renaming an asset

To rename an asset:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Hover over the asset you want to rename
  3. Click the “more options” icon to open the contextual menu
  4. Click Edit Settings
  5. Enter the new name in the Name field
  6. Click Save

Replacing an asset

When you need to update an asset (e.g., if your company logo has been refreshed, or your restaurant’s menu has been updated), you can replace it in the Assets panel and it will be updated everywhere it’s used on your site.

To replace an asset: 

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Hover over the asset you want to replace
  3. Click the “more options” icon to open the contextual menu
  4. Click Replace
  5. Select the new file
  6. Click Open

Important

Replacing an asset also changes the asset link (i.e., the URL). Any direct links to the asset’s URL, whether on your site or external sites, will need to be updated manually.

Deleting assets

You can delete assets individually or in bulk in the Assets panel. To delete an asset, you’ll first need to delete all instances where that asset is used on your site. If you delete an asset that’s still being used somewhere on your site, it’ll return to the Assets panel the next time your site is published.

To delete assets individually:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Hover over the asset you want to delete
  3. Click the “more options” icon to open the contextual menu
  4. Click Delete

To delete assets in bulk:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Click the “expand panel” icon at the top
  3. Click Select
  4. Check the assets you want to delete
  5. Click the “trash” icon
  6. Click Delete

Organize assets in folders

You can create custom folders to organize your assets how you’d like. Asset folders that you create can contain different file types and child folders.

To create a folder:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Click the “new folder” icon
  3. Optionally select a parent folder if you’re creating a child folder
  4. Enter the folder name
  5. Click Create

To add an individual asset to a folder:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Hover over the asset you want to move
  3. Click the “more options” icon to open the contextual menu
  4. Click Edit Settings
  5. Click the “Folder” dropdown list
  6. Select a folder from the list or click New Folder to create a new one
  7. Click Save

To add assets to a folder in bulk:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Click the “expand panel” icon at the top
  3. Click Select
  4. Check the assets you want to move
  5. Click the “move” icon
  6. Select a folder from the list or click New Folder to create a new one
  7. Click Move

Duplicate a shared Library asset

Shared assets can only be managed (renamed, replaced, deleted etc.) on the Library’s source site. If you want to use a shared asset and make changes to it that shouldn’t be reflected across all of the sites using it, you can duplicate the shared asset to make a local copy and add it to your site assets:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Hover over the asset you want to make a local copy of
  3. Click the “more options” icon to open the contextual menu
  4. Click Duplicate

Note

Any changes made to the duplicated asset will only apply on that individual site. The original shared Library asset will remain unchanged, and future Library updates won’t affect the duplicated version.

Search, filter, and sort assets

You can quickly find assets by searching, filtering, and/or sorting, which is especially useful if your site has a large number of assets. Please note that search only checks for asset names.

To search your assets:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Optionally click the “Filter” dropdown list and select a filter or folder to search for assets in only that filter or folder
  3. Click the Search assets field
  4. Start typing the asset name

Pro tip

You can also use Quick find to search for assets.

You can filter your assets by file type:

  • All Assets
  • Images
  • Documents
  • Lottie
  • Rive

To filter your assets:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Click the “Filter” dropdown list
  3. Select a filter

When you add a file to the Assets panel, it's automatically added to the All Assets filter and the relevant file type filter. For example, if you upload a PDF it’s automatically added to the All Assets and Documents filters.

You can sort your assets in four ways:

  • Newest first
  • Oldest first
  • Alphabetical (A-Z)
  • Alphabetical (Z-A)

To sort your assets:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Click the “Sort” dropdown list at the bottom of the Assets panel
  3. Select a sort option

Expand or collapse the Assets panel and change the view

By default, the Assets panel is collapsed into a sidebar and assets are displayed in a grid view. You can expand the Assets panel and change the view to make it easier to manage a large number of assets.

To expand the Assets panel:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Click the “expand panel” icon at the top

To collapse the Assets panel:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Click the “collapse panel” icon at the top

You can choose between three different view options, all of which you can toggle when the Assets panel is collapsed or expanded:

  • Grid
  • List
  • List - Small

To change the Assets panel view:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Click the “view” icon in the bottom-right
  3. Select the view you’d like

Good to know

When you close the Assets panel and subsequently reopen it, your panel and view options are maintained.

Optimizing image assets for accessibility, SEO, and performance

Once you’ve added images to the Assets panel, you can optimize them in two ways:

  • Add image alt text
  • Compress images and convert them to a web-optimized format

Adding image alt text is important for SEO, as it enables search engines to understand what an image depicts. Additionally, and most importantly, it makes your images accessible to more users such as those using assistive technology.

To add alt text to an image:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Hover over the asset to which you want to add alt text
  3. Click the “more options” icon to open the contextual menu
  4. Click Edit Settings
  5. Click Descriptive
  6. Enter a description of the image
  7. Click Save

Note

If an image has little content and is used for stylistic purposes (eg., a gradient or dividing line) and alt text isn’t relevant, you can mark it as Decorative in the asset’s settings. Screen readers will ignore these images.

You can compress image assets (JPG and PNG) individually or in bulk to reduce their file size, which may improve page performance by reducing load time. When you compress an image, it’s converted to one of two web-optimized formats:

  • AVIF
  • WebP

Important

AVIF and WebP images aren't supported for Open Graph images. We strongly recommend that you don’t compress image assets linked to an Open Graph image to make sure they render when shared via social media or messaging apps.

To compress an individual image:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Hover over the asset you want to compress
  3. Click the “more options” icon to open the contextual menu
  4. Click Compress
  5. Select AVIF or WebP
  6. Click Compress

To compress images in bulk:

  1. Open the Assets panel by clicking the Assets icon in the left toolbar
  2. Click the “expand panel” icon
  3. Click Select
  4. Check the assets you want to compress
  5. Click the “compress” icon
  6. Select AVIF or WebP
  7. Click Compress

Good to know

Assets that can’t be compressed (ie., any asset with a file extension other than JPG or PNG) are automatically skipped when bulk-compressing images.

How to share assets across multiple sites with Libraries

Libraries let you share assets (along with components and variables) across multiple sites in a Workspace. This enables you to upload, organize, and replace assets — such as images, documents, and Lottie & Rive animations — on one site, and make them available to sites across your Workspace.

Libraries are especially useful if you manage multiple websites that share a common brand. For example, if your company updates its logo and you need to replace it on your main site, your ecommerce store, and your blog. With Libraries, you only need to replace the asset once, and the new logo will be automatically updated across all of your sites, everywhere it’s used. Learn how to share a Library.

How to use assets on your site

Once your files are uploaded to the Assets panel, you can use them on your site. You can drag and drop image and animation files directly onto the canvas, where they'll automatically appear as image elements, Lottie elements, or Rive elements. Document (and image) files can be attached to link elements.

When a user clicks the link on your published site, depending on the file type, the linked asset will either open in the browser or be automatically downloaded to the user’s device.

If you want to change the linked asset, you can replace an attachment in link settings. You can also change the settings so the image or document file opens in a new tab when clicked.

Use image assets as background images

You can apply a background image to an element as a style, instead of adding it directly to the page as an image element. For more details, check out our guide to background styles and images.

Note

It’s important to upload an optimized background image with the correct resolution as Webflow doesn’t create responsive images for background images. Learn more about background image resolution.

Related articles