Overview

The image library gives you a place to upload, tag, and search for images. You can reference and display those images in your messages using absolute image path URLs.

The image library supports .jpeg, .gif, or .png file types (.svg file types are not supported at this time).

Image optimization

We recommend optimizing your images for quality and performance before uploading them. Using dedicated image optimization tools, you have control over multiple optimization parameters, yielding better results 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.

Upload an image

1. Navigate to Content > Images

2. Click the Upload button.

3. Upload the images by dragging them into the upload pane or clicking the Select Files button to select images from your computer.

Add tags to your images for advanced searching options.

4. When finished, click Finish Upload.

5. 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.

Images with a file extension different from the actual image file type cannot be uploaded unless the file extension is changed to match the file type. For example, attempting to upload a .png image with a file extension of .jpg will trigger "The file type does not match the extension" error message.

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 and Password page (Settings > Profile Settings), you can insert images from the image library directly in your message.

1. Place the cursor where you would like to add an image and click the Insert Image button on the wysiwyg editor.

2. Hover over the arrow of the selected image and select Insert.

3. The image will be inserted into the message.

Insert with HTML editor

If the HTML editor is enabled for your account on the Account and Password page you can insert images from the image library directly in your message.

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.

Change image dimensions

When uploaded into the 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 can change the image size that will be displayed by changing the dimensions in the image path. 

Changes to the image size will be performed on the server as opposed to the browser when using HTML or CSS image dimensions. 

Find and replace image paths

If you're coding an email in a third party HTML editor, you can replace 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".

4. 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">

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

In the next article, you can learn about HTML content.