Skip to main content
All CollectionsMulti-Channel Communications
How To Compress Images For Emails
How To Compress Images For Emails
V
Written by VipeCloud Developer
Updated over a week ago

If your emails contain too much data, you can run into issues with them loading slowly, or even having issues with parts not displaying at all. A common cause of this is too many images whose files are too large. Compressing your images is a great way to have it all: plenty of images in your email without sacrificing quality or display issues.

Transcript

0:01 Hello, Vipers! Let's talk about, uhm, something that many people don't realize is something that they need to pay attention to when it comes to sending emails, especially sending emails using an HTML builder where you're using lots of images and including a lot of media in there. 0:23 And when you're using lots of images, it's quite easy to go over the limit that email inboxes are willing to support, basically. 0:35 When they're loading up an email, they have a lot of information on in terms of their size, which can range between as little as 10 megabytes, but I think that's pretty uncommon. 0:47 But it can go up to about 25 megabytes. And so if you're familiar with how large images can be, particularly when you're talking about either professional images or photos, or images that are taken with a cell phone, these can be multiple megabytes in size for just a single image. 1:06 If you're using lots of images, then going over these limits is actually quite easy to do. And so if you're sending emails to people, and people are complaining about images not being there on the receiving end, or if you're wondering why things just take so long to load, you know, when somebody's loading 1:27 up your email template, or even the template builder itself, that's really slow, then you should take a look at the size of the images that you are sending to people. 1:39 Um, so in this example here, we've got an image here of yours truly, this is a professionally taken picture from, uh, from my wedding, and this, as you can see right here, is my wedding large dimensions of 3.7k, uh, pixels to 5.5k, and when we look at the information here, we can see that it is 3.1 megabytes 2:04 in size, that is quite large. So, as you can imagine, if we're using a whole bunch of these images, that can, overload the, uhm, just the overall limits. 2:18 So, one way that I would suggest approaching this is to compress your images, and so what this can do is it can actually technically lower the quality of the images, but not very noticeably at all, and it'll disproportionately lower the file size of the images themselves. 2:44 So, let's take a look at what this would look like. This is a tool that I just created. I googled, you know, image compression, and this was the top one that came up, you know, we're not affiliated with this company at all, they're totally separate from us, but I found this to be a really useful tool 2:59 , and it is free, and to save you guys the time, I just simply already did, already took care of this, but it was as easy as going to this this URL. 3:09 You know, tinypng.com, I drag-and-dropped my image over here, note that they do have a maximum of 5MB each, uhm, but, I mean, that is, that's a ginormous image right there, so you should be fine, and, I, uh, I took care of that, and look at this, it took my 3.1MB image, reduced its file size by 82% down 3:35 to 5.77KB, and, uh, you, you're probably gonna, uh, generally have images even smaller than this in the end, because this particular image I'm using is especially large for the example, but anyway, I, I did this, I went over here, I downloaded the image, I uploaded it to VibeCloud, cloud. And let's go 4:00 over here and change the image. Now I'd recommend doing what I did here, which is adding to the name something like this for compressed so that I know which one is which, because they look basically the same. 4:13 Uhm, and let's switch over here. Well, here we go. Same image, different file. 82% more. More lightweight, and as you can see, you can barely tell the difference. 4:26 And this is a large image in this template here, too. You're probably going to generally be designing things a little bit differently than this, but this actually, in this example, would, uhm, actually pose greatest likelihood of us seeing images. 4:42 Uh, issues with it, because it's so large, and, uh, and it's looking just fine to my eyes, and, so yes, what I would recommend doing, if you're trying to make your email templates more lightweight, is just being mindful of the size of those images that you're uploading, and if they are high-quality phone 5:01 , like, images, from phones, or a professional photographer, or anything like that, compress them before they go in, and just, in general, uh, keep an eye on the sizes of the images that you're, uh, that you are uploading into your templates, and have a bit of a running tally, have a sense of how large 5:23 , uh, your email template is overall. Now, uh, I'm gonna show you something a little bit more on the technical side here, uh, so, I might, I might lose some people here, if you, uh, if you get lost, don't worry about it, um, but there is a way to really see what the actual size of your entire template 5:42 is, and if you're using, uh, email template landing pages, I think it's the easiest way to do it, where if I go over here and hit save and preview landing page, it's gonna open up a new tab, now I can then go in here, right click, inspect, go over to this network tab right here, refresh it one more time 6:07 , and I'm done. I will see right here exactly how large my template is, in this case it's 2.6 megabytes, well under that limit, and this way I know I am good to go, even for the, uh, the stingiest of inboxes, uhm, so that's also just a way that you can get an idea of how large your template is. 6:31 To make sure that you are running under the limits. So, I hope that this is helpful for everybody, of course, as always, let us know if you have any questions at all.

Did this answer your question?