Temail - Working with Images

contents

A good understanding of the use of images in your email is essential to reduce the risk of your email landing in the users’ spam box. Below, we have listed some guidelines on image use, how and where to store them.

Image Best Practices

• Image-to-text ratio. If your emails are too image-heavy, they may be sent to users’ spam box. A ratio of 80 percent text and 20 percent image is a good target to go for.


• Image size. Keep your images as small as possible without compromising quality. A large image takes time to load. To maintain image quality, make the original image at least twice the size of the area where it will be displayed in the email. For example, if you’re using a 600px wide image, scale it down to 300px using HTML. As a rule, try to keep your image size under 1 MB.


• Image format. The main formats, JPG, PNG, and GIF each has its pros and cons. Use JPG for photos, or PNG for hi res images (note that PNG generally have larger file sizes). Use GIF for images that don’t contain too many colors.
  Note: Older versions of Outlook do not support GIF formats.


• Make images accessible. For visually impaired user’s, add informative text to images that describe their content using the alt-text parameter of the Image component.

Storing Images

Images must be stored in a public folder so they can be accessed by anyone who opens your email. If you have a public folder within your domain to store images on, that would be the best place to put them. Alternatively, you can use Dropbox. One Drive and Google Drive are a little more difficult to use.

Using Dropbox to store your images

Dropbox has a Public folder that can be used to store your images. We would recommend you create a folder inside of it called "temail-images". Then simply upload your images to that folder and you’re good to go.

To use an image stored on Dropbox, from dropbox.com, right-click the image and choose Copy link. Then, paste it into your image components’ img-url= parameter so it looks like this:

Img-url=https://www.dropbox.com/s/3tivqbxirl02t85/facebook.png?dl=0

Important!! Replace the "dl=0" after the question mark at the end of the Url with "raw=1" (without the quotes) so it looks like this:

Img-url=https://www.dropbox.com/s/3tivqbxirl02t85/facebook.png?raw=1

Setting up a default Image Path

In Temail Settings, you can setup a default image path (optional) so you can add images to your email using just the image filename without specifying the full path. This is best used when you are storing images on your domain server. For Dropbox, this isn’t advantageous because, in Dropbox, the path is not always the same for each image file.

To specify an image path, open Temail settings and fill in the Image Path. ANY image that does not specify a path that begins with http will have this path added to the front of the image. This way, a path is optional, or can be explicitly defined.

For example:

Temail Settings - Image Path: https://mydomain.com/temail-images/
Image Component - Img-Url=logo.png

Results in: Img-Url=https://mydomain.com/temail-images/logo.png