> ## Documentation Index
> Fetch the complete documentation index at: https://buttercms.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Uploading assets

> Learn how to upload images, videos, documents, and other files to your ButterCMS Media Library.

## Upload methods

### Method 1: Upload Media button

1. Click on the **Upload Media** button in your Media Library.

![Upload Media Button](https://cdn.buttercms.com/WMeiANJjTO6wJMTPVf5Q)

2. You can add one or multiple files at once from various sources:
   * My Device
   * URL
   * Image Search
   * Dropbox
   * Google Drive
   * Facebook
   * Instagram
   * Box
   * GitHub

![Upload Sources](https://cdn.buttercms.com/tJhBv8FQl62yIR7uWPl2)

### Method 2: Drag and drop

Simply drag and drop your files directly into media fields for quick uploads:

![Drag and Drop Images](https://cdn.buttercms.com/Lk2KYq4PR2uOMJFlHHZy)

{/* SOURCE: file_path="knowledge-base/how-to/how-to-add-and-adjust-media-files-in-your-blog-posts-and-pages.md" section="Adding media to posts" */}

You can also drag and drop files directly into media fields within your content:

![Drag and Drop in Fields](https://cdn.buttercms.com/RQCOQhY6SRWZiN0XvP7a)

## Editing images during upload

Edit your images in the ButterCMS Media Library before saving them:

![Edit During Upload](https://cdn.buttercms.com/3BvpYztBTaCX453OhhBK)

<Tip>
  You can crop, rotate, and apply a circle crop right during the upload process. After uploading, additional transformations like resizing, filters, and adjustments are available in the [Image Editor](./image-editing-transformations).
</Tip>

## Optimal file sizes

For optimal page speed and appearance, follow these guidelines:

<Info>
  ButterCMS automatically [converts images to WebP format](automatic-image-compression-webp) for better performance.
</Info>

| File Type               | Recommended Size          |
| ----------------------- | ------------------------- |
| Large/background images | No more than 1 MB         |
| Standard images         | 1200 pixels width or less |

### Best practices

* **Compress images** before uploading using tools like TinyPNG or TinyJPG
* **Resize large images** to 1200 pixels or less
* **Use appropriate formats** — JPEG for photos, PNG for graphics with transparency
* **Let ButterCMS optimize** — we automatically convert to WebP for better performance