How to Add High-Resolution Images to Your Email

GIFs. Lists. Infographics. This kind of high quality content is everywhere, and it's changed the way that we look at content on the go.  And with increasing broadband and WiFi speeds, we're consuming this content at a faster rate than ever before.Marketers have started using high resolution images in emails as well. Using those images comes with a catch, however. Increasing the quality of the image also increases the amount of time for the image to load in your email client.

The way HubSpot works around this is by automatically compressing images in emails and pages so that they load faster, creating a seamless experience for the end user. But what if you’re not worried about loading times? What if you wanted to deliver the highest quality images to your customer’s email inbox? 

Well, you’re in luck.  We have just the trick to help you enter the internet-high-quality-image-superhighway.

To go around the automatic resizing HubSpot does, we need to do a bit of tinkering with the image we are using. We do this by adding a small bit of code into the source code of the email. This bit of code is called a "query parameter" and will prevent HubSpot from automatically compressing the image.

Now we know what you’re thinking: "I ain’t some kind of Neo-like figure who can enter code willy-nilly." Neither are we, but by following a few simple steps, you can walk with the Chosen One.

Scenario One:

The first thing to do is to load up your email and click into the main email body that contains your glorious hi-res image. Click on the small button just to the left of the spellcheck icon called the Source Code. The popup might look scary, but don’t be afraid! We won’t spend too much time here.

What you're looking for is the image you have inserted into the email. It will end with a .jpg, .png, etc. (you know, the usual image file types).

Once you locate the file, you’ll need to add this tiny bit of code to the end of it:

?noresize

This bit of code will prevent HubSpot from automatically compressing the image.  The image will now render in its full resolution beauty in the end user’s email client. Make sure you hit "Save" on the Edit Source Code window and you can go on about your email. If you have multiple images in there, you can add the above code at the end of all those images as well.

Scenario Two:

Now, some of you are thinking: "But what if I have an image module in my email? Where will I add this funky code?"

Fret not, avid reader. We can repeat the above trick, but we have to add a small step in between—replacing the image module with a rich text module. A rich text module allows us to tinker with the code, while an image module doesn’t give us this awesome luxury.

You can do this right in your email by clicking on the Settings tab at the top of the email, scrolling down to the template and selecting Edit Template. Now, this will make the change in all your emails that are associated with this template, so if you are worried about that, I would advise making a clone of the template.

Once the Edit Template screen pops up, all you’ll need to do is click on the little gear that is associated with the image module, click on Swap Module and then select a rich text module.

Once the rich text module is inserted, hit Publish Changes in the template screen.  You'll return to the edit screen of the email (just to be sure, let’s refresh this page as well). The rich text module will be there, so you can then insert the image you want. Finally, enter the code as we outlined above by clicking on the Source Code button.

There you have it. With this simple trick you can now send out emails containing images with the highest of qualities.

Doing this is important for many reasons.  Maybe you're sending an email blast to people who consume content on their retina screen iPads and you want to deliver the best quality content. Maybe your email contains an infographic which loses its quality if it's compressed. 

Whatever the reason, the above hack will allow you to delight customers in a new way. It will increase load times in the email client, but we’d like to do it anyway, right?