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

# Image library

> Upload and organize signature images in the Image Library, sort them into folders, and edit with auto crop and background removal before adding them.

The Image Library is a shared asset manager for all images used in your signatures: logos, banners, profile pictures, and more. Open it by clicking **Update image** in the [styling panel](/en/editor/styling-panel) when an [image block](/en/editor/image-blocks) is selected.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/image-library-main-panel.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=05f211dc809c4eebd99fb71a91818942" alt="Image library panel opened from styling panel" width="3456" height="1930" data-path="images/image-library-main-panel.png" />
</Frame>

## Uploading images

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/image-library-upload-area.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=5ea688eca274f6a58ac6d8812d9fdbc2" alt="Image library upload area with drag-and-drop and file select options" width="3456" height="1920" data-path="images/image-library-upload-area.png" />
</Frame>

You can add images to the library in three ways:

* **Drag and drop** a file directly into the upload area
* **Select File** to browse your computer
* **Import from an external source**: Canva, Dropbox, Google Drive, OneDrive, Box, or SharePoint

Supported formats are JPEG, PNG, and GIF, with a maximum file size of 5 MB. Images are automatically resized to fit your signature, and you can fine-tune dimensions later in the styling panel.

<Tip>
  For logos and icons, use PNG with a transparent background. This ensures your image looks clean regardless of the email client's background color.
</Tip>

## Organizing with folders

The left sidebar shows your folder structure. Use folders to keep assets organized. For example, separate folders for logos, banners, and campaign images.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/image-library-folder-sidebar.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=9c32e51e752a3a0b4cf64735dfdffb76" alt="Image library folder sidebar for organizing signature assets" width="3456" height="1928" data-path="images/image-library-folder-sidebar.png" />
</Frame>

* Click the **+** next to "Folders" to create a new folder
* Click the **pencil icon** on a folder to rename it
* Click the **trash icon** to delete a folder
* Folders can be nested. Use the **+** on an existing folder to create a subfolder

Click a folder to browse its contents. Use the **← Root** link to navigate back to the top level.

## Browsing and finding images

Once you have images in the library, the browsing toolbar helps you find what you need:

* **View mode**: Toggle between grid view (thumbnails) and list view (compact rows with details)
* **Sort**: Order images by Date (newest or oldest first), Name, or Size
* **Filter By**: Narrow results by file type: JPEG, PNG, or GIF
* **Search**: Type in the search bar to find images by name

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/image-library-browsing-toolbar.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=16e614864f1f750703b2d0736816cbdc" alt="Image library browsing toolbar with view, sort, filter, and search controls" width="3456" height="1930" data-path="images/image-library-browsing-toolbar.png" />
</Frame>

## Image details and selection

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/image-library-image-detail-view.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=0ff415b9260b88d910a9b82c1689483b" alt="Image detail view with preview, metadata, and action buttons" width="3456" height="1930" data-path="images/image-library-image-detail-view.png" />
</Frame>

Click an image to open its detail view. Here you can see:

* A large preview of the image
* **Image details**: name, dimensions, file size, upload date, creation date, and file type

From this view, you have three actions:

* **Select**: Use this image in your signature block
* **Edit image**: Open the image editor (see below)
* **Delete**: Remove the image from the library

## Editing images

Click **Edit image** to open the built-in editor, which offers two tools:

* **Auto Crop**: Automatically trims whitespace or empty areas around your image. Useful for cleaning up logos that have extra padding.
* **Remove Background**: Strips the background from your image, leaving only the foreground subject. Great for product images or headshots that need a transparent background.

You can also manually crop by dragging the blue handles to define the area you want to keep.

Click **Save** to apply your edits, or **Cancel** to discard them.

## Dark mode images

Email clients that support dark mode can invert or alter how images display. This behavior is controlled entirely by the recipient's email client, and there is currently no reliable technical way to provide a separate dark mode version of an image that all email clients will respect. For this reason, Scribe does not offer dark mode image variants.

The best approach is to upload images that look good in both light and dark mode.

<Tip>
  Use logos and images that remain visible on any background. A logo with dark colors on a transparent background can become invisible in dark mode. To avoid this, use a version of your logo with a solid background, or choose a color variant that stays readable on both light and dark surfaces.
</Tip>

## Related articles

* [Editor overview](/en/editor/editor-overview)
* [Add blocks](/en/editor/add-blocks)
* [Template library](/en/editor/template-library)
