Images in Email

[00:00:00]
>> Rodriguez: So text is awesome, I love all text emails. So I love beautiful topography, I love simple designs and simple layouts. But most the time you're gonna wanna include some images in your email campaigns to spice it up, to create a connection with your subscribers, to provide some additional information.

[00:00:18]
I love illustrations and animated gifs for providing some lightweight education inside of email campaigns. But there's a couple of things we wanna make sure that we account for when using images in the email. The first one is that it's great to make images responsive by default and there's a pretty easy way to do that in email that's relatively new.

[00:00:39]
It's been around for a couple of years as technique, but it's an awesome way to not have to target every single image and then override something in like a media query like that sizing. The next thing is to always use alternative text for emails. So we'll look at accessibility after this and why that's important, but you always wanna include some sort of alt text for the images in your email campaigns.

[00:01:00]
There's a couple of rules that go along with that. If you're using something like a decorative image, like an icon or a logo, then usually you want that alternative text to just be md. You still have that alt attribute on the image tag, but it's md because it doesn't provide any additional value or information outside of that decorative element.

[00:01:20]
But then if you're using images that do provide some of that context, some of that additional information, then you wanna use fairly descriptive alternative text that describes what's happening in the image as opposed to what that image happens to be. So instead of saying, illustration of something, you would just describe what that illustration is.

[00:01:39]
That helps cut down on repetition because most screen readers will say image of and then it'll read it at the alternative text. So you don't wanna say, image of a picture of a person eating a sandwich [LAUGH] or something like that. And then you wanna make sure that you stick to the stock standard image formats because some of those newer image formats like WebM, or whatever crazy stuff that Google or Apple are coming up with, they're not gonna work cross email campaigns.

[00:02:08]
So stick to jpg or png files, gif files, you wouldn't really wanna use a TIFF image because that's gonna be massive and be a huge download for people. But that's another thing, you wanna make sure that you compress those images as much as you can without losing quality.

[00:02:24]
You wanna make sure that you're not cutting into people's mobile data plans or causing really long delays in downloading that image. And this is especially important as you start using like animated gifs in emails, which is a super popular technique in an email campaign. But those gifs can get really heavy, that file size can get huge.

[00:02:43]
So if somebody's opening on a mobile device on a mobile connection, then it could potentially take a really long time for that image to download. But those three things are a great way to use images. You wanna make them responsive, you wanna use alternative text, and then you wanna rely on those tried-and-true formats for those images in your email campaign.

[00:03:05]
So when you talk about responsive images the traditional way to do that on the web side would be you have an image, it's used in that image tag in HTML. Then in your CSS, you just target that image and set height to auto, max-with to 100%. Since a lot of email clients will strip out that those embedded styles or strip out that head of our document, we can't totally rely on that.

[00:03:28]
It's been getting better as Gmail and other clients are making updates, but we wanna make sure that our images are responsive by default without having to rely on additional embedded CSS. So the way to do that is to first set a fixed width on that image tag for Outlook so that it's properly setting the size of that image.

[00:03:48]
We saw earlier that when we had that big, giant Retina hero image, for Outlook it was breaking out of that 600 pixel width because we're not doing anything in account for that in Outlook. And the way to do that is to use the width attribute, that image tag.

[00:04:02]
So we'll see in an example here, we're gonna set the width to 600 pixels for Outlook. But then for other clients, especially mobile devices, we can use inline styles. We can use max-width, min-width, and width inline on that image tag, which will force that fluidity, make those images scale across those different device sizes, those different container sizes.

[00:04:21]
So let's see how something like that might work. I'm gonna go back over to the starter email. So we have this hero image, right now we're not doing anything fancy, we just have the source and then the alt attribute, it's empty. But I'm actually going to use one of my snippets here, [INAUDIBLE] saved email image.

[00:04:46]
And you can see that we're doing a couple of different things to this more robust version of an image. So we still have this alt attribute for here, I might say something like, in mailbox.
>> Rodriguez: So we have a little bit more descriptive, it's describing what that hero image is.

[00:05:10]
I'm not saying it's an illustration of red mailbox because that's gonna be repetitive for screen readers, but I'm just describing what it happens to be. If you're using images that contain some sort of text in them, which is really common for those big, splashy hero images. They might have an offer or something like that.

[00:05:26]
You would wanna describe that in your alternative text, you want that textual equivalent of whatever that image happens to be. But for here, it just gonna describe that. We have our source again. But then for Outlook, we're setting this with to 600, which will be 600 pixels. We're including this border of zero, which is important especially as we start linking these images [INAUDIBLE].

[00:05:48]
Usually this will be linked out some sort of landing page or an offer or something like that. Then we have this inline style, which is setting this image to display block, which is good for Outlook because some versions of Outlook will, by default, add some spacing around images if they're not block level.

[00:06:05]
So if you display block it, then it will just cut that out. And then we're setting the max-width to 100% so that it doesn't break out of any containers. We're setting the min-width here to 100 pixels, that's just we don't really want it any smaller than that. But the chances of it getting smaller than 100 pixels on a mobile device is slim to none, so it's just a nice default.

[00:06:25]
And then we're setting the width to 100% so that it naturally scales across those different container sizes. So let's open that back up in our browser, and you can see that now it's listening to that container size. It's rendering it properly, it's not breaking it out of there.

[00:06:43]
I'm gonna add a little bit of padding just above here so it stands out a little bit more. Oops.
>> Rodriguez: So yeah, it works well, it's contained within that 600 pixel structure of our email campaign. And then most importantly though, when we start scaling it down for different device sizes, then it will flow across those different device sizes.

[00:07:12]
So we can pop this open in Litmus and see how that actually works.
>> Rodriguez: So in all these email clients, it'll just be properly constrained. So that's where that response of by default comes into play. Apple Mail, works awesome. But more importantly, when we get into the Outlooks, then it won't be blowing out that giant container.

[00:07:37]
We're still getting this really wide email layout because we aren't using tables or doing anything specific for Outlook yet, which we'll look at later this afternoon. So yeah, all the Outlooks it's properly size using that width attribute. This is really important for Retina images because we are using those larger images and scaling them down to ensure that works properly for the Outlooks.

[00:08:00]
But yeah, it's a nice hack to use that max-width, width, and min-width on any of those images you need to scale down. Importantly though, we're not doing anything to this logo image because that's already small enough that we don't really need to worry about scaling that image across different device sizes.

[00:08:17]
So we can just leave that width in there, we can use the border radius, and all that good stuff as we did before. But we're not gonna do anything really specific to that because we don't need it to scale across different device sizes. So yeah, we are doing all that stuff in our images now.

[00:08:34]
We're using that HTML attribute for Outlook to make sure that width's constrained and that we are using those inline styles to make sure that it is responsive across device sizes. That alternative text becomes into play when we start looking at image blocking in emails. So most people have seen images like this or emails like this where that email is all image-based.

[00:08:55]
It's everything in that email with the exception of that little top preheader text up there that says view in browser and then probably the footer, which probably has some super long lengthy disclaimer that's completely unnecessary. It's all an image. So a lot of email clients will disable those images by default largely for security reasons.

[00:09:15]
We actually did a study a few years ago because Gmail changed how they handle images. Previous to the change, they were blocking images by default and then they started caching all those images in the email on their own servers and then displaying those by default. So by caching them on their own servers, they could check and make sure they're not a security risk, and then it enabled those.

[00:09:35]
But it over-wrote your URLs and pointed to Google server, it was a whole thing. But we actually looked at before and after, and we were able to determine that about 43% of all email sent had images blocked on Gmail. And you extrapolate that out to all those other email clients that have this similar behavior.

[00:09:53]
That's potentially half your audience that aren't seeing your emails if we're using all image based emails. So it's a huge problem even for people that don't rely on something like assistive technology like a screen reader. They won't see your content and the chances of them going into their settings and enabling those images or clicking on that little pop-up for an image saying, download this external content is slim.

[00:10:16]
They're not gonna take the time to do that because they're busy people. They have other things to get to and, unless you have that brand relationship that's really strong, they don't care about your email so they're just gonna delete it or mark it as spam or something like that.

[00:10:31]
When it comes to people using screen readers, if you're sending all image based emails, they don't really have any content to work with, so we wanna make sure that we have as much content for those users as possible. And that's why it's important to use live HTML text, that true text, in our emails as opposed to just image based emails.

[00:10:51]
And a design like this, it's relatively simple to recreate in HTML and CSS. The only thing that really needs to be an image are these people over here, those images of the models. Whereas all of this is just text and you could easily do that with HTML and CSS, the buttons are easy enough to do.

[00:11:07]
A lot of the companies will push back and say, you know, we have brand guidelines, we have a style guide that we have to follow. And a lot of times they'll have typefaces that are proprietary to them or they might not work on web fonts or something like that.

[00:11:22]
In those cases, you should still push back and try to use good alternatives for those fonts or those styles that work cross email clients and are accessible. But if you're using all images or you have to rely on images, then provide that descriptive alt text because something like your URL isn't gonna help people out.

[00:11:40]
They could very easily have the Handbag and Shoe Shop, visit the shop or whatever that text is as the alternative text for those images so that when people don't see it or if people are using screen readers, they know exactly what they're getting into. They can get that value out of your email campaign.