How To Add Image In Email Body Using Html

Using Images in HTML Email

April 14, 2015 email

Your guide to using images more finer in HTML email campaigns.

This is an old article. If you're visiting it today, at that place's better ways to code emails. Find out more at The Better Electronic mail.

I love a good, all-text e-mail. If you tin pull off an elegant, interesting design using merely type so I'll buy you a beer.

That's merely me, though. About people like seeing a beautiful photograph or a quirky analogy in an email. In this chapter, we'll have a wait at how best to incorporate images in our campaigns. Nosotros'll start by looking at which image formats work best, how to mark them up, using retina-ready images, and what to do when those damned electronic mail clients block our pretty pictures.

Which formats piece of work best?

How many file formats are there for images? A dozen? Two dozen? More?

Fortunately for u.s., we only really need to business organization ourselves with three image formats for everyday use. When it comes to email blueprint, you should only ever meet the following:

JPEG
PNG
GIF

You may run into the occasional BMP, and more recently SVG files, just email designers have largely standardized on the three formats above.

Allow's look at the benefits and drawbacks of each.

JPEG (.jpg)

The JPEG file format, which stands for Joint Photographic Experts Group, is a great selection when you need to include complex graphics like photographs or illustrations. Actually, anything with either a lot of colors or subtle gradations betwixt colors or shades.

JPEGs are lossy, which means that, when compressed to relieve infinite, they discard information that tin pb to a loss in quality or the introduction of visual artifacts. However, unless you lot're using farthermost compression settings, nearly people won't detect the loss in quality.

They are perfect for pictures of people, product shots, and intricate illustrations. I'd wager that near images you see in an email are likely JPEGs. They're a corking pick. More importantly, JPEGs are supported beyond virtually every e-mail customer.

The ii main drawbacks of JPEGs are that they do not support transparency and they cannot be animated. If we want transparency, nosotros'll want to use...

PNG (.png)

The Portable Network Graphics format, or PNG for short, is similar to JPEG in that information technology is a great option for anything with lots of colors. It works equally well for simpler graphics that demand to be nice and crisp. In contrast to JPEG, it is a lossless file format–meaning that it does not discard any data when compressed. Because of this, file sizes for complex images can be larger than when using a JPEG.

There are a few varieties of the PNG format: PNG-viii, PNG-24, and PNG-32. PNG-8 only supports up to 256 colors, compared to the millions for the other two options. While they all support transparency, the added colors in 24 and 32 permit for smoother looking graphics, which is why I recommend using 24. Both produce larger file sizes than 8, simply 24 is a nice tradeoff between quality and file size.

While widely supported, PNG does not work in the worst email client in the world: Lotus Notes, specifically versions 6 and 7. For most of u.s., though, we can safely use PNGs since nosotros aren't catering to dinosaurs. However, if you accept an audience that likes using frustratingly ho-hum, archaic enterprise email clients, you will need to rely on either JPEGs or...

GIF (.gif)

Ah, the GIF. Let's all say it together: GIF, non JIF. Seriously, if you call it a JIF, you can prove yourself the door. I'm looking at you, Kevin.

GIFs are an interesting format. They are definitely non the all-time for complex images, since they but support up to 256 colors. Simply, they excel at displaying text. And they back up transparency. And they work everywhere.

Nigh importantly, GIFs are the only option that allow for animated images. Take yous ever received an electronic mail campaign showing a devastatingly good-looking model cycling through several dissimilar outfits? That's the GIF in action. When you want to add some motility to an email, the GIF is still the best manner to practice it (we'll talk about motion in e-mail a bit later).

Apart from the color back up, the main drawback to using GIFs is that they accept the trend to produce larger file sizes.

Breaking It Down

So, if y'all are wondering which format to use, hither are some handy little guidelines to help you out:

JPEG Use for any complex images that don't crave transparency (due east.g. photos, gradients, product shots).
PNG Use for complex or unproblematic images that crave transparency. Unless you lot are John Hammond.
GIF Use for simple graphics like logos or icons, or when you need animation in an electronic mail.

Now, let's look at how to incorporate images into an bodily electronic mail template.

Coding Images

Adding an epitome to an email is actually surprisingly elementary. All it actually requires is the img tag. But, there are a few things that you lot should always keep in heed when adding images.

First, you always need to utilise absolute paths for your images. You take to host an paradigm somewhere, it doesn't matter whether information technology is on your ain server or your ESP's. Never utilise relative paradigm paths. And then, instead of doing this, which is common on the web:

          <img src="/path/to/image.jpg" />

You need to practice this:

          <img src="http://site.com/path/to/image.jpg" />

That will successfully go your epitome into a campaign, simply it might not look its best. Depending on where you view your e-mail, you'll likely see a few problems. Let's swoop in and see how we tin can combat these issues.

Problem 1: Images Aren't Properly Sized

Unless you're slicing up a pattern in Photoshop or know precisely what size yous need to relieve an image, chances are proficient that just dumping images into an email will consequence in improperly sized images and broken designs.

While we can easily constrain images within a parent element on the web–without specifying an image'due south size-we demand to explicitly state the width of an epitome to ensure that it displays at its intended size. Particularly in Outlook, which can't interpret an epitome's size from the file. Even so, this isn't typically done in an inline way. Instead, we apply the width aspect on the img element.

          <img src="http://site.com/path/to/epitome.jpg" width="600" />

This works for most e-mail clients. Occasionally, you may run into a problem with an image's height being improperly interpreted. In this case, you tin can either add together the height attribute or rely on CSS to set the height property to car.

Attribute Method:

          <img src="http://site.com/path/to/epitome.jpg" width="600" height="200" />

Inline CSS Method:

          <img src="http://site.com/path/to/image.jpg" width="600" manner="top: motorcar;" />

Embedded CSS Method:

          <style blazon="text/css">   img { height: motorcar !important; } </style>

1 affair to keep in mind is that Microsoft Outlook is really weird with images. For whatsoever reason, Outlook has bug inferring the size of an prototype from a file and won't necessarily display it as intended without explicitly declaring the dimensions of an epitome in code. While it tin can be an issue for any image, it is most noticeable when using hullo-res images for Retina devices, which we'll talk nearly in just a bit. At the very minimum, you lot should declare a width for your images. So, moving forward, we will incorporate that into our boilerplate img tag.

Problem 2: Borders Effectually Images

For most images, you'll probable want to link an image out to a landing page. They are heady, people are drawn to them, and they are familiar with tapping on images to have them places on the web. So it makes sense to link images in an email.

When y'all wrap your img tag with an link, though, some email clients will automatically add a blue edge around the image to denote that it is a link. While this is neat from a usability standpoint, information technology sucks from a designer's perspective.

To prevent blue borders, we add the border attribute to our boilerplate image tag and make the value zero.

          <img src="http://site.com/path/to/paradigm.jpg" width="600" border="0" />

Now, even when images are linked, we tin sleep easy knowing that they won't have whatever nasty blue borders effectually them ruining our design.

Problem 3: Gaps Around Images

Some designs call for images placed next to or on meridian of each other.

While this is like shooting fish in a barrel enough to pull off, you may notice some electronic mail clients displaying a gap between or beneath the images, making the e-mail expect broken. This is due to how some rendering engines (justifiably) handle images in regards to the baseline of text elements in the certificate.

The easiest fix for ensuring your images appear without gaps is to add the following to your img tag:

          <img src="http://site.com/path/to/image.jpg" width="600" border="0" mode="display: block;" />

That display: block; rule takes the baseline out of the equation and keeps everything tidy. Simply keep an centre on where y'all're applying it, as non every paradigm needs to be fabricated into a block-level element. If you have something similar an icon next to a line of text, making that icon a block-level element will force information technology down on its own line.

Problem 4: Prototype Blocking

This is the large one when it comes to using images in email. As mentioned earlier in the book, a lot of electronic mail clients (and some users, also) volition disable the loading of images in an electronic mail until you specifically tell them to download and brandish images. Always encounter something similar to this?

Building Connections

That's image blocking in activeness. Gmail used to exist one of the chief culprits, only recently enabled images by default. Litmus actually did a nifty study when this happened and found out that nearly 43% of all Gmail users had images disabled.

While that doesn't necessarily use to every other e-mail client, nosotros can certainly make some assumptions...

Prototype blocking is a huge trouble. If your message is fifty-fifty partially tied up in an prototype, subscribers won't encounter it. That's why I abet using every bit much HTML text equally is humanly possible. But, nearly everyone will need to take images in an email at some indicate. And then, how do we mitigate the effects of image blocking?

Unproblematic: we use the alt attribute to provide some contextual information about our images.

          <img src="http://site.com/path/to/image.jpg" alt="Lifting off to the futurity" width="600" edge="0" way="brandish: block;" />

Now, when our images are blocked, virtually email clients volition display the culling (ALT) text, providing subscribers with at to the lowest degree some information about what the hell's going on.

Building Connections

The cool thing about ALT text is that nosotros can actually get fairly artistic with it. Using inline styles on the img tag, we can style our ALT text so that it fits into our design aesthetic. We can make use of font styling and background colors to make a pattern that holds upwardly beautifully even in the absence of images.

          <img src="http://site.com/path/to/image.jpg" alt="Lifting off to the futurity" width="600" edge="0" manner="color: #00bafc; font-family: Arial, sans-serif; font-size: 18px; display: block;" />

Building Connections

ALT text should be baked into your prototype tags, at least for most images in an email. In some cases, information technology doesn't brand sense to use ALT text, similar with logos or icons. These images tend to be smaller in size, so trying to cram a bunch of ALT text in that infinite doesn't make a whole lot of sense. Likewise, those elements commonly don't have a textual equivalent, so you don't really demand to describe them if you don't want to.

That being said, nearly every epitome likewise provides the opportunity to get cheeky and have some fun with ALT text. Some senders use ALT text as a place to include inside jokes, weird musings, and even emoticons. While non anybody sees them, having little easter eggs like that in an e-mail is a killer fashion to build a relationship with subscribers and only make someone's twenty-four hours.

Retina Images

With the introduction of the iPhone iv, Apple popularized the Retina display. Retina displays pack a huge number of pixels into a screen, far more than than traditional computer displays. This increased pixel density makes the screen exceedingly precipitous and clear, and then much so that the human being eye tin can no longer distinguish private pixels.

One of the side effects of a Retina display is that images that are not optimized for them appear to be fuzzy or blurred. This tin can get frustrating, peculiarly for notoriously picky designers. The way to get effectually this is to apply higher resolution images and scale them downwardly to the appropriate size in our code.

Every bit an case, allow's say we have a photograph that needs to exist 600x400 pixels. Normally, nosotros would export that image from our graphics editor at that size. To make it appear crisp on Retina displays, we would instead save it out at least twice the intended size. In this instance, we would export it at 1200x800 pixels.

Then, in our code, we would just use the 600x400 sizing:

          <img src="http://site.com/path/to/retina-image.jpg" alt="And then Crisp" width="600" meridian="400" border="0" style="display: cake;" />

Now, that movie looks absolutely beautiful on Retina displays.

The major drawback of using Retina images in an electronic mail is that the increased image dimensions equate to an increased file size, also. For mobile users with limited information plans, this tin can be a very real concern. There are typically ii methods that can help out.

Optimizing Images

One way to keep file size down, not only for Retina images, is to optimize and compress your images using software. While most designers play with the quality setting in Photoshop, applications built specifically for compressing images are typically more effective than whatsoever Photoshop tin can practice.

It's skilful practise to run your images through an optimization tool before uploading them to your server. There are a variety of tools available, my favorites being ImageOptim and JPEGmini. If you're using Retina images, running them through 1 of these is a great way to keep your mobile subscribers happy.

Using Compressive Images

Another solution for reducing the file size of a Retina image is to utilize what are referred to every bit compressive images. Compressive images aren't a new file format, but a style to export a JPEG to keep the file size small while all the same retaining skillful quality.

Essentially, you would have an image that is at to the lowest degree iv times its intended size. This enormous image is and so saved with an extremely low quality setting in Photoshop. Even though the large image looks terrible when viewed at full size, when information technology is scaled downwards in the lawmaking, it retains its item–all without the added file weight.