Overview

The image library gives you a place to upload, tag and search all of your message images. You are able to reference and display those images in your messages using absolute image path URLs.

The image library supports file types of JPEG, GIF or PNG.  SVG file types are not supported at this time. 

When uploaded into an image library, your images will be stored at their original dimensions. The image dimensions are reflected in the image path URL.

For example the following image path shows the image dimension as 600x132 pixels:

https://images.cordial.com/163/600x132/logo.png

You have the option to change the image size that will be displayed by changing the dimensions in the image path.  Note that changes to the image size will be performed on the server as opposed to the browser when using HTML or CSS image dimensions. 

Image Optimization

We recommend optimizing your images for the best quality and performance before uploading them to the Cordial image library. Using dedicated image optimization tools, you will have control over multiple optimization parameters, yielding results much better than automated optimization alone.

Cordial's platform serves images as close to the user as possible from over 200 cities around the globe. Where possible, it also performs automatic lossless compression, which we've found to further reduce the existing image size by over 20% on average. All of this enhances the email experience for your recipients.

Uploading an Image

1. Navigate to Content › Images
   
2. Click the Upload button.
3. Upload the images.
   • Use the Add Files button to select one or more images from your computer.
   • You also have the option to drag and drop files from your computer into the window.
   • Add tags to your images for advanced searching options.
   • When finished, click Finish Upload.
   
4. You can sort images by name, file type or last modified. You can also view images in a grid or list and search by name, file type, tags, and last modified date.

Insert Images in a Message

You can insert images from the image library into a message using either the WYSIWYG editor or the HTML editor.

Insert with the WYSIWYG editor

If the wysiwyg editor is enabled for your account on the Account & Password page, you can insert images from the image library directly in your message using the Insert Image button.

1. Create or edit a message.
2. Place the cursor where you would like to add an image and click the Insert Image button on the wysiwyg editor.
3. Hover over the arrow of the selected image and select Insert.
4. The image will be inserted into the message.

Insert with HTML editor

If the HTML editor is enabled for your account on the Account & Password page, you can insert images from the image library directly in your message using the Insert Image button.

1. Create or edit a message.
2. Click the Image Library button in the bottom left of the message editor.
   
3. Obtain the URL of the image by locating the image in the image library, hovering over the info arrow and clicking Copy URL.
   
4. Copy the image HTML from the window.
5. Paste the image HTML where you would like the image to appear in the message.

Finding and Replacing Image Paths

If you are coding an email in a 3rd party HTML editor you have the option of replacing relative image paths when uploading images in Cordial.

This is useful if you've coded an email using relative image paths on your local computer and wish to have all relative paths automatically replaced with absolute paths when uploading.

1. Paste in the HTML code with the relative paths into the message editor.
2. Click the Insert Image button and then the Upload Image button.
3. Select the option to "Automatically find and replace image paths in the template for all uploaded images".
   

   Selecting this option will replace all relative image paths in the message with the absolute paths of the images of the same name in the library.

   For example:

   <img src="logo.png">

   Will be replaced with:

   <img src="https://images.cordial.com/logo.png">

   Note that the relative image paths must be at the root level of the HTML document and not in a nested folder.

In the next article learn about HTML content.