Knowledge Base/Knowledge Base/Messages

How Do I Add Images To HTML Messages?

AWeber - Matt H
posted this on July 11, 2012 02:56 PM

You can easily include images in an HTML message through our message editor.

When including an image in your message the image should be hosted online. If you do not have the image hosted anywhere online you can use our image hosting feature.

Instructions for AWeber's current message editor are below. Instructions for the previous version of the editor are further down the page.

Be sure to check out our other knowledge base article on how to adjust the alignment of your images if you are unsure of where to place your images when you upload them.

Have AWeber Host Your Image

  1. First, in the message editor, drag the "Image" block from the toolbar and drop it where you want the image to appear.

    21680591_step01.jpg
     
  2. Using AWeber to add images from your computer to your messages is easy - when you're adding an image in the block editor, simply click the "Upload a File" button.

    21680591_step02.jpg

  3. Select the image you'd like to upload and hit "Open."

    21680591_step03.jpg

  4. Now your image will be added to the message!

    21680591_step04.jpg

  5. You can also drag images from your desktop directly into the "Upload Image" area.

    21680591_step05.jpg

  6. If you would like to have subscribers sent to a specific page when they click the image, enter the URL of that page into the Image link field. Image alt text is the text that appears when someone hovers over the image, or when the image fails to load properly. You can also choose the alignment of your image here.

    21680591_step12.jpg

  7. If you upload an image that is larger than 150 pixels on a side, you'll notice that the "Image Size" buttons are available. You can choose between "Thumb" - making the image fit in a 150x150 thumbnail space - ideal for an image attached to an article, "Optimized" - if your image is over 600 pixels wide, this option will reduce its width to 600 - to ensure that your image will display properly in most mail clients, or "Original" - the image exactly the size you uploaded it. Note that all these options will maintain the aspect ratio of your image - it won't be distorted or stretched.

    imagestep.jpg

    Finally, you can manually resize it by dragging the arrow in the lower right corner of the image itself - just click the "Reset Size" button if you make a mistake.

Using the Image Gallery

  1. Once you've uploaded images to your AWeber account, you can reuse them in any message you send. When you're adding an image, click the "Browse Image Gallery" button to get started.

    21680591_step07.jpg
  2. In the "Image Gallery", you can simply click on a message you've used before to add it to the message - that's all!

    21680591_step08.jpg
  3. To delete an image from your gallery, first click the "i" icon for the image in question. This will give you a few details about the image, including its file size.

    21680591_step09.jpg

    Hit the Delete button that appears to delete the image. Note that this will not affect any messages you already added that image to - it will simply remove the image from your gallery.

Using A Hosted Image

  1. The first thing you'll need to do is to get the URL of your image. To do so, simply find the image, right click on it, and choose "Copy Image Location."

    KB0204_step01.png

    If you do not see "Copy Image Location," you can also select "Properties" from the drop down menu when you right click the image, and copy the Location or Address of the image.
     
  2. Next, in the message editor, drag the Image block from the toolbar and drop it where you want the image to appear.

    21680591_step10.jpg

  3. Click the image to edit it - you'll see a box on the right asking you to enter some information. The URL you got in step 1 should go into Image URL.

    21680591_step11.jpg

Using AWeber's Previous Editor?

  1. The first thing you'll need to do is to get the URL of your image. To do so, simply find the image, right click on it, and choose "Copy Image Location."

    KB0204_step01.png

    If you do not see "Copy Image Location," you can also select "Properties" from the drop down menu when you right click the image, and copy the Location or Address of the image.
     
  2. Once you have the URL of the image, open the message that you would like to add the image to, and click or highlight the place you'd like to insert it.

    KB0204_step06.png

  3. From the toolbar at the top of the HTML Message area, click the "Insert Image" button.

    KB0204_step07.png

  4. In the popup, paste the URL of the image in the URL area at the bottom, then click the Insert button on the right.

    KB0204_step08.png
 
Topic is closed for comments