HTML newsletters, otherwise known as the bane of your existence, can be…challenging. There are so many little things to forget and so many different ways to cause angry emails from your boss when he opens it up in Outlook. A blog post on email newsletter best practices could be 17 pages long, so let’s get started… Just kidding. Today, I just want to give you some tips to make your images email newsletter friendly. This is a problem that has come up a lot for people in our immediate circle recently, so I wanted to give you some best practices.

Host the Image Yourself

Images on the internet all live somewhere. They all have their own dedicated URLs. You can see the URL of any picture on the internet by right-clicking on any image anywhere and clicking on “View Image”. The URL it sends you to is where that particular image lives. In HTML newsletters, you “call” images (i.e. make them show up) by inserting the URL where the image lives. Because you can access any image’s URL, this means that you can insert any image you find on the internet into your newsletter.

Awesome, right?

Pshhh. No. Don’t do it. This is a horrible practice. You have no control of that image. Whoever uploaded it onto the interwebs could take it down, resize it, put something else in its place, any number of changes. Make sure that you have control of where-ever your image is hosted. Ideally this means uploading your own images within the media library of your email blasting program. This may sound like common sense, but it’s shocking how often people call images that they don’t control.

Resize Before you Embed

Another common mistake that people make is uploading a large photo or image and then restricting the size in the HTML code by defining the width or height. If you do this, the email client (or whatever is loading your HTML code) will load the original size and then shrink it down.

This happens many times when someone uploads a photo they’ve taken with a digital camera. The image is 10 megapixels which translates to multiple megabytes of image size. The well-intentioned nonprofit worker calls the image in her newsletter code and then specifies the width in the HTML code to be 1/10 of the width. However, when someone opens the email, their email client downloads the entire 4Mb image and then resizes it. This means that not only does the size of your email skyrocket but it takes forever to load that image. You’ll see this sometimes where small images in emails take forever to load. The best practice is to resize the image beforehand to the size you want to use in the email. Then upload the image to where it will live, then call the image in the HTML code. Try right-clicking on the image above and clicking “View Image” to see an example of uploading a large image and then constricting it to appear small.

Respect Those Who Don’t Load Images

Many email clients don’t load images automatically. You either have to click to “load images” or they have to be in your address book for the images to show up. In addition, some people choose not to load images at all to save data usage (think mobile devices) or for spam reasons. On top of that, people that are disabled or blind won’t be able to see the images.

Best practice dictates that you should assume that images will be blocked from your email. Make sure that your email makes sense without them. This means ensuring that all of your images have alt text. ALT text is the ‘alternative’ text that shows up if the image doesn’t load. This is also what screen-readers (tools for blind or disabled people to surf the web) read to know what the image is. Alt text is put in the image tag like this:

<img src="http://www.photosgalore.com/awesomephoto.jpg" alt="This is what un-loaders will see instead of your image">

Get Rid of that Link Border

If you “linkify” an image by wrapping it in the warm hug of an anchor tag, some email clients will put a horrendous link border around it (see example to the left).

Sometimes (<1% of the time) this is helpful. For the other 99.9% of the time, you can lose the link border without getting rid of the link, by inserting border="0" into the image tag:

<a href=”http://www.awesomewebsite.com”><img src="http://www.photosgalore.com/awesomephoto.jpg" border="0" alt="Awesome Photo"></a>

Sink

In the sunshiny world of web-based HTML code, floats make the world go ’round. We can use them to make images move to one side of the page and have the text conveniently wrap around them. In the dark, damp, island of misfit toys world of HTML eNewsletters, however, floats are only supported by some email clients. This means that if you want your image to look pretty in Outlook, you have to find another way to do it. For HTML newsletters, don’t float; stick with the HTML commands align=”left”, align=”right” or align=”center”.

What Else Did I Forget?

While HTML newsletters are certainly a B to get working correctly, I hope these tips will save you some heartache and hair-pulling at least in terms of your images. What other tips would you add for the HTML newsletter authors out there?