Hello Everyone! In this article, you will learn how to prepare images for HTML Email templates.
We will be covering these topics:
- Type of image editing software to use
- How to slice images accordingly to your design
- Which type of image format to save in
- How to export images
- Additional image compression techniques
This article is for..
If you are new to creating HTML email templates and want to understand more about preparing and using images, then you’re in the right place!
The Problem
The common question is how do we translate the design into a working HTML email template.
Unlike a seasoned web developer or designer, many users do not know how to prepare images that will be used in a HTML email template.
Let’s start preparing, which image editing software should I use and why?
Photoshop is commonly used to design email templates, they have a slicing tool that helps segment different parts of the design. You can export these segments as image files that can be used in our HTML email template.
Photoshop is a paid product, you can find out more on how you can purchase the product here.
But I don’t want to pay, any alternatives?
If you’re not keen on paying, GIMP is an awesome alternative however this article is based on using Photoshop. But don’t worry, you can check out this tutorial video by Dr Ray Pastore on how to slice with GIMP.
Slicing? Segment? Why do we need to slice our design up?
First of all, we need to understand why it is not advisable to use only a single image as our email template.
- Some email clients have image blocking turned on by default, we can still attach a short message if the image is not loaded. This short message is also commonly known as the “alt text”, usually ESPs have this additional option when using images and developers usually can help you insert it through code.
If we have a longer message then we will have a problem displaying all of it correctly. - Makes your email less “search friendly”, mail boxes will have a harder time trying to find your email because everything is an image.
- It is easier to add hyperlinks to sliced up images.
- Some cases, we might want to have an image with a transparent background.
- Screen readers will have problem understanding your emails.
- Not beneficial to a mobile responsive design, text might be too small when viewed in mobile.
Right, so how should we start?
Before anything, let’s start off by getting familiar with the slicing tool.
In Photoshop, you can find the Slice Tool under the Crop Tool button. Simply hold down your mouse’s left button on the Crop Tool icon and an additional menu will appear.
You should see something similar to the image below.
Another way to select the slice tool is through the hotkey ‘C’, once you’ve selected it, the Slice Tool icon should replace your mouse cursor.
Sliced sections are presented like the following:
They are marked with a unique number followed by an icon on the top left side of your design.
Note: You can also select these sections with the Slice Tool, double-clicking them will open up another dialog for you to edit it’s properties.
Editing it’s properties can be very helpful when you export them out as images. You can assign a name to it and your exported images will adopt the name you’ve assigned.
Ok I’m ready, let’s slice and dice!
Hold your horses, before we start slicing, we need to set our requirements first,
- It is important to show the same font as on our design file.
- We want to use as much real text as possible.
Now, let’s take a look at the following example from Brooklinen’s email:
With the requirements above, we cannot use this as a single image. We will need to slice the following sections:
- Header text, “What’s Twill?”
- Bedsheets visual
- Description text, “Ultra-soft fabric made from premium, long-staple cotton with a custom diagonal weave for cozy breathability.”
Below is an image example of how I used the slicing tool in Photoshop to mark out the sections that will be exported later. The tint above the sections are added to make it more obvious.
Here’s another example, don’t let it’s complexity scare you away!
As you can see I’ve marked out the sections with an additional tint to show the distinguish the different sections.
Always remember, the reason we want these as different slices is that we want to have the option of attaching an alt message to the image. It helps by displaying this alt message when images are turned off by the email client or images are not loaded properly.
Time to export these slices!
To export these slices we want to use Photoshop’s “Save for Web” function, go to File > Export > Save for Web. Upon choosing it, a save preview dialog box will appear.
After the dialog appears, you can select your slices and assign an image format to it from the sidebar located on the right before it’s being exported.
When you’re done assigning, you can click on save and another dialog box will appear.
When saving .jpegs, .jpg, you can keep your image quality between medium and high, we prefer high but please take into consideration of your image file size when saving it.
At the bottom you can select the type of slices you want to export, select “All User Slices” or “Selected Slices” and click on “Save” to export them out.
Note: If you selected “Selected Slices”, make sure you’ve selected the slices in the “Save for Web” dialog box before exporting. If you do not select the slices, nothing will be exported.
Slices filenames are usually saved as the project’s filename and a number key.
E.g. If your project name is “untitled” then your slice will probably be saved as “untitled_01”.
Hold up, image formats? How do I know which one to save in?
Don’t worry, we got you covered, use the following guidelines to decide!
Use .jpeg or .jpg if:
- Image slice involves pictures, complex graphics or anything that involves using millions of colors.
- You don’t need transparency
Use .png if:
You need transparency in your image slice.
Use .gif if:
You need an animated image
Hope with the guidelines you can decide better on what type of image formats to use when exporting your image slices.
Additional Image Compression Techniques
Image compression is another essential technique to be applied when preparing images. It helps reduce the file size of the email and enhances user experience by improving loading times.
Faster loading times means better open rate, studies have shown how important load times are. At this age, users are getting more picky about loading emails, if it’s not fast enough they’d probably stop subscribing .
These are some recommendations to help with image compression.
Did you know if you build an email template with Mailworks, image compression will be handled by us? Yep, we got you covered :)
As you’ve noticed, I’ve left the topic of using command line to compress images out because I felt that this article is targeted at a more basic group of audience.
However, In the future, I’ll definitely write an article on using image compression tools.
Summary
When it comes to developing an email template, it is essential to learn how to prepare images. So a little recap on what we’ve learnt so far,
- Using Photoshop to slice images
- Planning the position of the slices in the design
- Export sliced images via Photoshop
- When to use different image types when exporting
- Learn about Image Compression
I hope that this article is useful to everyone who have just started on this journey of developing email templates or doing email marketing. We will be writing another article on how to use images in email templates. So please keep a look out for it.
FAQs
What DPI should I design and export as?
For web, you can should always stick with 72 as per the recommendations from Adobe.
Should I export images with or without background color?
It really depends on your design, as a general rule of thumb, if you can control the background color via code then please export your images without background color.
Should I care about file size?
Yes, file size is important when delivering emails. It does not contribute to the HTML email template but, it affects how the user’s experience because of load times.
What about images for Retina Display?
I am planning to write another article on retina display images and how to prepare them to be used in templates.
But a quick answer to this question is to design 2 times or 3 times the original dimensions and export them as they are.
So for example, if my initial design is for a 600px width email template then I should design it in 1200px or 1800px. It’s looks silly but thats a more layman way of preparing an image ready for retina display.
Ideally, you want to have a software that can allow you to export images at retina display sizes and the image elements that you used in your design should have a high resolution too.
You mentioned Mailworks handles image compression, what is Mailworks and how is image compression applied?
Mailworks is an advanced drag and drop email builder. Our builder allows the user to upload images, compression is then applied.
The level of compression applied is targeted to reduce the file size as much as possible while not affecting the quality of the image.
Sounds interesting, where can I sign up?
It’s still in beta but we are happy to have more user feedbacks to help improve the system further. You can sign it up here!
