In this area we'll cover the basics regarding uploading and editing of images within your email templates using our new drag & drop editor.
The most eye-catching parts of your template will probably be images.
Images will not be sent along with your email message, instead, they will be linked in from your Media library (Gallery), which is maintained on our server. That is why you do not just throw images directly from your computer into your template, but upload or import them into you Media library first, and pick them from there.
Uploading is the way for your images stored on your computer, while importing (image from url) is an option for getting images to your library directly from the web.
3.3.2 Image settings
After putting an image into the template, click on it to set its properties. Right below the preview you can add a link to the image, as well as an alternative text.
Add Link to an image
Because the images are visually strong, it is a good practice to use them as links – readers will probably try to click on them.
Add Alt text to an image
The alternative text is displayed when the image is not available. Email clients often do not display images right on, only after confirmation from the user. In some rare cases images may not be displayed at all. So it is good to have at least a text describing what the image should tell to the user, or provide something to click on.
Size and aligning
At default, the Image will fill the horizontal space available and adjust its height accordingly to keep the image ratio. The space available will be defined by the container element of the Image, usually a Box or a Column.
If the Image is smaller than its container, it will stay smaller at its maximum size. If it is larger it will be shrunk.
You can shrink the image by hand too if you want to.
The image can be aligned in its container element to the left, center or right.
**It is important to note that the widest view of your responsive template is 600px. This means there is not worth using larger images than this. Keep in mind that the email client has to download the images to display them, and this can be a slow process if there are big files to download, just think of mobile devices. So try to minimize the size of the images you use.
Padding, margin, borders and background.
The other options can be set exactly like in the case of a Box.
The more usual options are the Margin and Borders here. With the Margin you can set a distance to be held to other objects for example Text. Be careful with side margins though, as they may not be welcome in your mobile view. If you want to put image and text next to each other, you should rather set the image’s and its container’s size so that the image has a distance to the next object. Setting top and bottom margins are safe in terms of responsivity, they should not cause any problems in mobile view.
Though it is rarely makes sense, you can set Padding and Background color too. Padding in its own acts like Margin, while Background color in its own makes no difference to the image. But when used together, the Background color can be seen in the padding of the image, acting like a border.