# Managing Images in Dyspatch


Save time and promote collaboration by storing all of your images in Dyspatch.

## Image Gallery

All of your image folders and assets are stored in your <a href='https://app.dyspatch.io/library' target='_blank' rel='noopener noreferrer'>Image Library</a>, accessible from the main left-side menu. This helps keep images organized, optimized, and easy to find in a single source of truth.

![Image library screenshot with folders and single images](https://docs.dyspatch.io/img/emails/image-library.png)

<div class="highlight note">Each workspace comes with its own scoped Image Library folder for images and folders not meant to be shared between workspaces.</div>

The Image Library shows assets hosted in Dyspatch. If your organization uses a DAM Integration then those assets are available from the image picker in the Email Builder and Block Editor instead.

### Image Details

Clicking into an image will bring up the image preview with additional
information. Use the **Default Attribute Values** section to configure how your
image should behave when used in an email. This is especially useful for
images that are frequently used, for example, social icons and logos.

## Adding Images

Add up to 10 images at a time by clicking the **Upload Images** button. You have the option to drag and drop your files or select them from your file system.

### Drag and Drop Images Into the Image Gallery

Highlight, drag, and drop your images into the image upload area.

<img class="img-status img-border"  src="https://docs.dyspatch.io/img/emails/image-library-uploads-drag.gif" alt="Dragging and dropping an image into the image upload form"/>

### Upload Images From File Directory

Alternatively, use the file navigation to locate and upload images from your system.

![Uploading multiple images from local device URLs](https://docs.dyspatch.io/img/emails/image-library-uploads.png)

<div class='highlight tip'>We recommend using email-safe image formats: PNG, JPG, and GIF. Avoid WebP as well as vector
formats, like SVG, as they may not display correctly for all users.</div>

### Automatic Image Alt Text

If Scribe AI is enabled for your organization, all images will have alt text generated for them at the time of upload. Select the wand icon to iterate with Scribe to improve the content.

![Default image attribute fields with alt text filled in](https://docs.dyspatch.io/img/emails/image-library-default-attributes.png "class: idm")

Default image alt text is editable, along with default title and link URL, in the image's default values, found by clicking into the image from the Image Library.

### Add Unoptimized Images

All images are automatically optimized for email on upload and include a green checkmark next to their file size. If you'd like to upload files at their original size, select **Upload Unoptimized** from the Upload Images dropdown menu.

![Images drop down menu to upload unoptimized images](https://docs.dyspatch.io/img/emails/images-upload-unoptimized.png "class: idm")

## Editing Images

Make quick edits to an image without leaving Dyspatch.

### Opening the Image Editor:

- **From the <a href="https://app.dyspatch.io/library" target="_blank">Image Library</a>** - select an image's **Edit Image** pencil icon to open the image editor.

![Image library asset with Edit Image icon hovered and pointed to](https://docs.dyspatch.io/img/emails/image-editor-edit-image.png)

- **While Inserting an Image in a Template** - open the image's dropdown menu " <svg xmlns="http://www.w3.org/2000/svg" width="3" height="11" viewBox="0 0 3 11"><title>3 dot</title><path fill="currentColor" fill-rule="evenodd" d="M1.344 8c.363 0 .677.133.944.4.267.267.4.581.4.944s-.133.677-.4.944c-.267.267-.581.4-.944.4s-.677-.133-.944-.4a1.291 1.291 0 0 1-.4-.944c0-.363.133-.677.4-.944.267-.267.581-.4.944-.4zm0-4c.363 0 .677.133.944.4.267.267.4.581.4.944s-.133.677-.4.944c-.267.267-.581.4-.944.4s-.677-.133-.944-.4a1.291 1.291 0 0 1-.4-.944c0-.363.133-.677.4-.944.267-.267.581-.4.944-.4zm0-1.312a1.29 1.29 0 0 1-.944-.4 1.291 1.291 0 0 1-.4-.944C0 .981.133.667.4.4.667.133.981 0 1.344 0s.677.133.944.4c.267.267.4.581.4.944s-.133.677-.4.944a1.29 1.29 0 0 1-.944.4z"></path></svg> " and select **Edit Image**.

![Insert Image asset modal with Edit Image option hovered and pointed to](https://docs.dyspatch.io/img/emails/image-insert-editor-edit-image.png)

### Image Editor Tools

The image editor includes the following tools:

- **Adjust** — crop, rotate, or transform/flip
- **Annotate** — add text overlays or markup to the image
- **Watermark** — add a watermark
- **Resize** — change the image's size
- **Finetune** — adjust brightness, contrast, HSV, blur, and warmth
- **Filters** — apply one of a number of preset filters

![Image of beach with inner section highlighted for cropping in Dyspatch image editor](https://docs.dyspatch.io/img/emails/image-editor-cropping.png)

#### Cropping to a Custom Aspect Ratio

Using the **Adjust** tool, change the crop dropdown option to **Custom**. This allows you to change the width and height of the image's crop
individually.

![Custom crop ratio menu option pointed to in Dyspatch image editor Adjust section](https://docs.dyspatch.io/img/emails/image-edit-custom-ratio.png)

<div class="highlight note">Saving an edited image creates a duplicate. The
original image, and any emails using it, are unaffected.</div>

## Scribe AI Image Generation

Dyspatch's Scribe AI offers image generation to help you create custom assets directly in the platform.

![AI Image Generator Tool](https://docs.dyspatch.io/img/emails/image-ai-generate-button.png "class: idm")

The generator offers detailed control over your output with options for **Generative Style**, **Aspect Ratio**, **Resolution**, and **Use Live Data**.

![AI Image Generator Settings](https://docs.dyspatch.io/img/emails/image-ai-generate-options.png)

### Scribe Image Generation Best Practices

To elevate your results from good to great, incorporate key professional strategies like being hyper-specific with context and intent. Iterate on your designs with conversational refinements, use semantic negative prompts, and control the composition with photographic language.

## Removing Images

Delete images by clicking the dropdown menu " <svg xmlns="http://www.w3.org/2000/svg" width="3" height="11" viewBox="0 0 3 11"><title>3 dot</title><path fill="currentColor" fill-rule="evenodd" d="M1.344 8c.363 0 .677.133.944.4.267.267.4.581.4.944s-.133.677-.4.944c-.267.267-.581.4-.944.4s-.677-.133-.944-.4a1.291 1.291 0 0 1-.4-.944c0-.363.133-.677.4-.944.267-.267.581-.4.944-.4zm0-4c.363 0 .677.133.944.4.267.267.4.581.4.944s-.133.677-.4.944c-.267.267-.581.4-.944.4s-.677-.133-.944-.4a1.291 1.291 0 0 1-.4-.944c0-.363.133-.677.4-.944.267-.267.581-.4.944-.4zm0-1.312a1.29 1.29 0 0 1-.944-.4 1.291 1.291 0 0 1-.4-.944C0 .981.133.667.4.4.667.133.981 0 1.344 0s.677.133.944.4c.267.267.4.581.4.944s-.133.677-.4.944a1.29 1.29 0 0 1-.944.4z"></path></svg> " for that image and selecting **Delete**. Deleting a folder will also delete all of the images in it.

<div class="highlight note">If an image is accidentally deleted, <strong>Don't
Panic</strong>. Your users will still be able to see the image in their
inbox.</div>

## Managing Images

Organize your images by using folders. Drag and drop images into folders in the Image Library. To move an image out of a folder, drag the image onto the **"Image Library"** title at the top of the page. You can also drag a folder into another folder to nest it and further organize your Image Library.

<img class="img-border" src="https://docs.dyspatch.io/img/emails/image-library-folders.gif" alt="Moving an image into a folder then out of a folder" />

<div class="highlight tip">Unsure how to organize your
images? Try dividing them by the types of emails they appear in.</div>

## Using Images in an Email

![Edit images in the Email Builder](https://docs.dyspatch.io/img/emails/images-in-email.png)

Anyone that can build an email [(Editors, Developers,
Admins)](/administration/dyspatch_roles/) can change an image in an email.
See [Using the Email Editor](/emails/using_the_email_editor/) for
more information.

## Using Images in a Theme

![Background image setting for a theme](https://docs.dyspatch.io/img/emails/theme-background-image.png "class: img-size-75")

Keep your email backgrounds stored in Dyspatch's Image Library. You
can insert them into a theme by enabling the <glossary-term
word="theme">theme</glossary-term>'s background image.

## Using Images in a Block

Quickly insert a <a href="https://docs.dyspatch.io/dml/#dys-img" target="_blank">`dys-img`</a> component
by clicking the **Insert Image** button in the Block Editor. Select the image
you want to include and click **Insert Image** to generate a `dys-img`
component.

## Monitoring Image Transfer Data

View your organization's annual image transfer data limit from the <a href="https://app.dyspatch.io/admin/" target="_blank">Admin dashboard</a>.

<div class="highlight note">Overages beyond your annual limit will be billed at $0.12/GB, and charged monthly. Reach out to your account manager directly to discuss adjusting your annual limit. If you're not sure who that is, contact <a href="mailto:support@dyspatch.io">our support team</a></div>

## Custom Image Domain

By default, images hosted in Dyspatch are served from the Dyspatch CDN (`cdn-web-assets.dyspatch.io`). If your organization requires images to be served from your own domain, see [CDN White-Labeling](/administration/cdn_white_label/).