How to coding Image in Email Template

Following are some points that should think to use image in Email Template

Avoid background images
Outlook will not recognize background images. Instead, use a background color, and use images in other ways in your email.

Use absolute image paths
If you upload an image to an individual email using the HubSpot image library, this automatically happens for you. If including an image in an email template, host the image on your website. You could upload the image to your HubSpot file manager. Then make your image paths point to the full URL, such as: http://www.yoursite.com/yourimage.jpg.

Declare image width and height
This will ensure that your email design will maintain its structure when images are turned off by email clients.

Use ALT text
Some email clients block images by default, so each image should have compelling ALT text that is compelling.

using-images-in-emails

 

 

 

 

Optimize image size
Make your image file sizes as small as possible without losing their visual integrity. This will prevent long email load times.

Avoid using PNG images 
Lotus Notes does not support PNG image formats. Use a format such as JPG or GIF instead.

Avoid using image maps
Hotmail will not recognize image maps.

Use Gmail and Hotmail glitch fix 
When using multiple images, this insline CSS property eliminates a white gap in between adjacent images.

<img src="http://www.yoursite.com/yourimage" width:"10px" height: "10px" style="display:block">


 copy right from (http://help.hubspot.com/articles/Best_Practice/email-templates-design-code:)
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s