TT – Editing Images for Email Templates

We’ve all done it. You create an awesome looking email template, send a test email to yourself, and suddenly the images have all changed size and position on the page.

This is down to a quirk of the way different email clients process images. Some, like Gmail, will happily use the size you’ve specified in the email code. Others, like Outlook, will only look at the actual size of the image.

The result? An email that only looks correct in certain email templates. But don’t worry, this video will show you how to edit images to be displayed correctly within email clients such as Outlook.

The image editing software used in the video is called Pixlr. If you’d like to try Pixlr for yourself, you can find it here.

There are lots of other tools out there that you can use those, including Photoshop and Canva. Why not let us know in the comments which image editor you prefer?

Our Tuesday Tips series is a weekly video blog of helpful hints and tricks to use OpenCRM to its fullest capacity. Stay up to date with this series, as well as our webinars and knowledgebase videos by subscribing to our YouTube Channel.

Video Transcript:

Hello, and welcome to this week’s tuesday tip.

Today i’m going to show you how to resize images for use in email templates.

Resizing images before you add them to an email template is important because certain email clients – specifically Outlook – will only use the image’s actual size they will not look at an edited height
and width within the email code.

What do I mean by thi?

Well if we look at this email template that I built using stripo, the image looks like it is the right size.

But if we look at the same email in Outlook we can see the image now looks too big.

And this one here is now a rectangle instead of a square.

Editing the image within the email template using the image properties option located here makes it look as though the height and width are correct but if I open the actual image we can see that it is much larger and that is the only thing Outlook pays attention to.

So what can we do?

We will need to resize the actual image and then re-upload it to the template.

There are lots of resizing tools out there including Photoshop.

The one I tend to use is called Pixlr because it is free and online. (https://pixlr.com/)

Once I open the image within Pixlr, I simply click here to resize it and edit the width so that it will fit within my email template.

Now I can save it and then I simply re-upload it to the email template.

Now to fix the blog images, you can see the one on the bottom looks a bit squashed.

That’s because I’ve tried to make a rectangular image fit in a square space.

Remember how it appeared in Outlook – fixing this in a tool like Pixlr is easy –

Instead of editing the size here I click this button to crop it.

Now I can shave off those extra pixels making the image a square and then i just re-upload it the way I did with the other image.

When I test it we can now see that all images appear in Outlook exactly as they do in OpenCRM.