Modifying Images in Emails

Regarding Uploaded Images and Upscaling

When you upload images to the Lead Gen & CRM platform, be sure to upload an image that accurately represents the size you want to display. Otherwise, there may be issues with image scaling. This applies especially when setting uploaded content as background images. You will need to import images at a set resolution for them to render properly when set as background images. 

In Lead Gen & CRM, the most common image scaling issue is upscaling, where the image is made to display as larger than its uploaded dimensions. When images with small dimensions are enlarged, they are upscaled and often become distorted, appearing blurry or pixelated. For example, if you upload an image with dimensions of 200×200 pixels, it will display best at that size. If you try to use the image in a way that forces the image to become larger, it will upscale and not look as it did originally. To enforce a maximum width, select the Advanced tab and enter the max-width property.

The best way to work with uploaded images is to use images that match the dimensions of your emails, pages, or other content. Setting dimensions in a layout or template first, then uploading an image that fits those dimensions, will reduce scaling issues.

Currently, the generally accepted standard resolution for web pages is 1920 pixels wide by 1080 pixels tall. However, there is no uniform standard, as many video displays have resolutions larger than this.

Be aware that when viewed on certain video displays, even images saved with specific dimensions might not display correctly for every person who views your web page. What may look fine on one display might be distorted on another. 

Adding Clickable Image Links

You can add clickable links to images in emails. To add clickable links, create or edit an email with a layout block containing image space.

1. Click the image to add a link.
2. Click the Link icon in the Content Editor menu bar.
   
    
3. Enter the URL of the link.
4. Optionally, add an image title.
    
   Note: Image titles and alt text are two different things. The link title provides more information about where the link will send the user and is helpful for SEO.
   
   
5. Decide if clicking the image should open the link in a New Window or the Current Window. 
6. If you'd like to link to one of your Lead Gen & CRM landing pages, use the Link List field. The link selected here will also update the URL field above, with the landing page's URL. 
7. Classes can be set to change the look and performance of your links, using CSS and JavaScript. You may select one of these pre-set classes using the Class field. 
8. Click Save.
   
   
   
   
9. Click Save again. 
   
    

Adding text on top of images

You can insert a text block into a row and then turn the row's background into an image. This can help create sections in your email, like navigation menus. 

1. Drag a text block element into the email template. For navigation menus, a multi-column layout is ideal.
   
    
2. Edit your text as necessary. 
   
    
3. Hover over the row and click the Edit icon.
   
    
4. Either enter the URL of the hosted image you want to use or click the Choose File button to upload an image. 
5. Click Done. 
   
   

Editing Images

You can edit images with the Image Editor.

To edit images, create or edit an email with a layout block containing image space.

1. Click on an inserted image.
2. Click the Edit Image icon in the Simple Editor bar.
   
    
3. Click one of the edit options inside the Image Editor.
   
    
   
   
4. Edit the image and then click Apply. 
    
   Important: Upscaling the dimensions of an inserted Image element can cause the image to stretch.
   
   
5. Click Save.
   
   

   

The Simple Editor and the Image Editor

When you click on an image, a small toolbar will appear. That toolbar, called the Simple Editor, has several features that let you quickly modify an image. The Simple Editor also houses the Image Editor.

Lead Gen & CRM's Image Editor can be used to add or edit images directly within the Email Designer. This means that, for simple image editing, you do not need an external image editor.

Simple Editor Features

The Simple Editor has several innate features.
 

Icon		Feature		Description
		Rotate Counterclockwise		Rotates the image counterclockwise by 90 degrees.
		Rotate Clockwise		Rotates the image clockwise by 90 degrees.
		Flip Vertically		Flips the image vertically.
		Flip Horizontally		Flips the image horizontally.
		Edit Image		Opens the Image Editor.
		Image Options		Opens the image's General and Advanced settings.

Image Editor Features

The Image Editor offers many editing features.
 

Icon		Feature		Description
		Crop		Crops the image to the chosen size.
		Resize		Resizes the image's dimensions through pixel values.
		Orientation		Orients the layout of the image horizontally or vertically.
		Brightness		Adjusts the overall brightness of the image.
		Sharpen		Counteracts blur and sharpens the image's appearance.
		Contrast		Modifies the contrast of black and white in the image.
		Color Levels		Alters the image's red, blue, and green levels.
		Gamma		Corrects levels of luminescence in the image.
		Invert		Inverts the image's colors.