Fix your slow loading site FAST with these tricks
Learn how to compress jpegs for faster website loading.
This is a small hack that helps your website load much faster without sacrificing quality. In this video I will show you how to make your jpegs (.jpgs) images smaller in file size without bitmapping or pixelating.
This video is part of my beginner web design course.
The video takes you through three things that will help your site and your process of preparing images for the web.
- Compressing a jpg image in Photoshop
- Making an action in Photoshop, which significantly speeds up your process
- Compressing a jpg using JPEGMINI which there is a free version at https://jpegmini.com
There will be more videos and posts I make as I go through this course. Things I am learning or have made big differences to me. I try and do this with all the things I am improving on in my life and business.
I did it this summer with a series on how I got back into making art and the struggle that it was.
Check the series out here:
The Summer 2022 Recap // The New Normal // Part 3
Part 1 can be found: https://creativesignite.com/burnout22/
Part 2 can be found: https://creativesignite.com/messymiddle/
Part 3 can be found: https://creativesignite.com/the-new-normal-summer2022/
Need to know how to find free images that are copyright free?
Watch this video
Transcript for compression video
[00:00:00] diane: Hey, it’s Diane Gibbs with Creative Ignite and I’m gonna let me show you how to do that. So in this lesson, we’re gonna learn how to create an action in Photoshop, and we’re gonna learn how to compress, um, an image so that it will be a 1920 wide image will be less than 500 K. That’s the ideal is what we’re, so our pages load quicker.
[00:00:26] Here we go. We are in Photoshop. I have already downloaded some [00:00:30] images. I have these, um, images, which are not as large as I would have thought. Um, I think that they’re a little bit bigger than this. This is, we’re gonna choose the biggest one. So 5 4 98 is not as big, I think. Um, four, five. Let’s see what this one is.
[00:00:51] 5 9 96. So I’m gonna open this. . We want to open it in Photoshop. All right, so it’s open. Silas, this [00:01:00] is a beautiful image. Wickedly beautiful. Love it. Okay, over here, if you don’t know how to do actions or you’ve never used actions, there’s a whole bunch of default actions. Well, I don’t know how default is.
[00:01:12] No, I’m just kidding. Um, so I made my own folder called Diane’s Actions, and I’ve bought some actions. It just makes things faster. So I have things that. Quick keys, like to flatten the file, I just have to push f1. Um, so my function keys are not to brighten my [00:01:30] screen or whatever the function. I actually have to hit function in F1 for that stuff.
[00:01:34] But if I’m using a, you know, an external keyboard, then it has function keys and then I can just push that and it’ll flatten anything I have, which is really helpful and it’s something I’ve used in my workflow. So I have some things that are, make it CM yk, make it rgb, do it, 300 DPI at CM yk, all these things that I’ve done, which is really, really, really [00:02:00] helpful to help you go faster.
[00:02:02] I’ve also set some up as quick key command. So if I want this to, uh, rotate counterclockwise, um, then I just hit F 13 and it. Uh, it will rotate it counterclockwise with one step, um, which is really helpful. So, but sometimes you have longer actions, you have a lot of things that you’re doing and you want all your images to be done the same way.
[00:02:27] This isn’t exactly perfect. [00:02:30] I have another way that I do it now, but this is the way I used to have to do it. So I’m gonna show you how to do it. If you wanna see the other video, click here and it’s how to use JPEG mini for this same sort of thing, but, okay. First we. If you don’t already have a folder, then make a folder right here.
[00:02:47] But if you’re like me and you already have a folder for actions, then I’m just gonna click this little button and we are gonna do a couple things. When you’re. Um, compressing. You wanna make sure that you have [00:03:00] a JPEG and you wanna make sure that you have an in an rgb. So we’re gonna create a couple of actions, although this one’s already like that.
[00:03:07] We’re gonna create a couple of actions just in case another image isn’t. So this is gonna be, um, compress and rrgb jpeg, um, and 19. , uh, I’m gonna say under 500 K. That’s what we’re going [00:03:30] for. It’s really kind of a long name, but you can also use function keys. I already have a lot over here, but say I wanted to do F 13, well, f thirteen’s already taken, but it’s gonna automatically say, oh, well if you hold shift and F 13, then you can, you can do that.
[00:03:44] So you can do that or not. But here we go. First thing we’re gonna do is we have the file open, so. , we’re ready to go. We don’t have to open anything else, but it doesn’t matter how long this takes, we [00:04:00] actually just need to, um, it’s just about how long the actual thing takes to do it. It’s not gonna take in, it’s actually gonna be faster than if we were doing it ourselves.
[00:04:10] So the first thing I wanna do is go ahead and do rgb, although it’s already in rgb. I just want this to be in my, um, so I want it to be in an. . So it may or may not have already worked. I [00:04:30] guess I’m just gonna, and then I’m gonna convert it again and I’m gonna delete that one mode, rgb, because it was art already Rrgb.
[00:04:39] Okay. I’m just gonna hit, um, um, well, we’re gonna keep going and then we’re going to, , we can do our image size, um, image size, and we want 72 is fine. This is just kind of showing us how crisp it is. We want [00:05:00] this longest edge to be. Um, we, um, we don’t wanna make it bigger. We don’t wanna make the resolution more.
[00:05:08] We wanna keep it there, but we want to work with pixels and we want this biggest edge to be 19. Okay, now our file size went from 57.9 megs to 5.93 megs. Well, we’re trying to get it to be 500 K, but this is step one. All right. So we’re gonna hit okay [00:05:30] and it odd. It did, did it. Okay. So now we have a RGB file at, um, 1920 on its longest, L Edge or length, whatever dimension.
[00:05:43] Now we need to compress. So we go over here to file and we’re going to go to export, and we’re gonna do it the old way, which is Save for Web. This is the legacy version. There could be another way to do it that is [00:06:00] maybe better, but we’re gonna do it like this. This kind of get lets us know that this is gonna end up being 224.7 K.
[00:06:09] That’s perfect. This is at medium at 45. Well, if we want it to be maximum, that will be a hundred. That’s over a meg, so we don’t want that. Let’s see if we do very high, it gets us closer. 7 47. Well, if we do high, that gets us to three 80, and that’s at 60. You can actually say 62, [00:06:30] you know, and that’s at 400 K.
[00:06:32] That’s fine, but we’re just gonna go back to. three 80 and we are good to go. You can also change your image size here, but this would make a percentage. So this is why we wanna do that first in the uh, other element. And then we want to hit save cuz we are trying, we wanna make sure it’s a jpeg, it’s optimized and we’re going to hit save.
[00:06:56] It should be three 80 point or three 80 k. [00:07:00] Now I am just going to save it into. Folder. So I have everything organized in, and hopefully you do as well. And I usually will have two folders. So one has all the folders that’s in there already. And then this one I’ve already made. It’s, there’s nothing in this folder, but this is where I want these to go.
[00:07:21] This is that I’m doing Save for Web 1920 at uh, and it’s from Photoshop, so it’s gonna be a jpeg, but there we go. So [00:07:30] then we can just close that. , I’m gonna say don’t save. So now I can stop the recording. The one thing I need to do is convert from, uh, I just need to delete this one, not deleting the whole bit.
[00:07:47] I’m just deleting that one J. This will, if it’s not RGB already, it will do rgb. Then it’ll go to 300 dpi. You can see, or, um, not 300 dpi, it’ll go to 1920, [00:08:00] and. You’re gonna export using all this and all this is here. So if you needed to look back at it, you could. And then we’re gonna close the folder. Now.
[00:08:10] We’re gonna batch, we are gonna batch this and we’re gonna tell you how to do that. So if you go back to the, the file, this is, these are the files that we want to compress. Now we have already compressed this one. This one is already been. This was the one we did as our test 3 91. That’s pretty [00:08:30] close. So we’re just gonna do, this was our test so that we know what it is is different than, uh, what it was.
[00:08:40] Um, what will be happening. And this is just because it’s gonna be the folder that it’s in. Okay? So now I’m going to go back to Photoshop and I’m gonna go here automate. And I’m gonna do batch. Okay? So I’m gonna batch. this, I’m gonna do Diane’s action. [00:09:00] I want to, I can use any of the ones that I have here, but I’m gonna do compressed RGB jpeg, you know, this is what I’m going for, this is the action that I’m doing, and then I have to select where all these images are, and it’s gonna choose any of the images that are in this folder.
[00:09:19] Okay. That’s, that’s the, that’s the thing. So sometimes you may not wanna have anything else in some of these. , um, uh, because you can’t just choose [00:09:30] certain ones. So I’m just gonna say, okay, well, um, here they are. They will end up in this and we’re gonna go, it’s gonna choose anything that is a jpeg in these and probably anything inside the, these folders.
[00:09:45] So, and then we have to tell it where we want to, um, save it. So I wanna save it to a folder. I’m gonna choose that folder and I’m gonna choose this one. I’m gonna hit choose, [00:10:00] and it’s saying, do you wanna override the action save as command. Now I’m just gonna show you what this says. When this option is on files will be saved to the destination folder only by save as steps in the action.
[00:10:15] So that means that you would have to save as in action, but we do have a save. So, no, we don’t, um, I don’t believe we have a save as in this action. So we are going to, um, [00:10:30] we want it to be saved, so I’m gonna uncheck that. And it’s just saving it as the file name and the extensions. There’s nothing else that’s really happening and it’s showing you where it’s gonna put it, because that was where we chose.
[00:10:44] We want it to be in this oceans, we want it to be in this one. And we hit. Okay, we’re ready to go. And it’ll just do dash one dash two, whatever. Right. Okay. And we’re gonna hit okay. Now [00:11:00] it does it all on its own because I had those steps in there. There weren’t very many. It’s done. Do you see? I could go to the bathroom and all my work would be done, which is great.
[00:11:11] All right, let’s go check. All right, so we know that they’re in this folder. We know that we had that one. Test one. Here’s the one that. W. That wasn’t the one that was the test. So the one we did through Photoshop said 3 91. This one was 3 89. I [00:11:30] don’t know. I don’t know why that’s different. This one was four 18, this one was 6 62, and this one was the smallest one, and now is 3 97.
[00:11:42] All of them have 19, 20. Absolutely. All of them are at 19. Which is exactly what we want. Okay. So you understand, hopefully you can set this to do lots of different things. You just have to think about your, uh, your workflow. If you’re having to do hundreds of images, it is easier to [00:12:00] make an action to compress them.
[00:12:01] So, but this one thing that this is missing while not this one, cuz it already has, uh, the 1920, you may want to put, you’re gonna have to do this for all the different sizes that you want it. If you’re doing it in. . Um, I am going to, uh, rename and I am going to say 1920, and I’m going to use 1920 after, so it’s gonna have save for Web 1920 [00:12:30] so that when I upload, upload this set to my website, I will also upload a 1200 and an 800 or maybe a 1600, whatever.
[00:12:40] image or length or whatever image so that I can quickly just search. Do I need a large image that’s gonna go across the whole thing? Do I need a medium size image? It’s gonna go pretty big. Or do I need a, just a small image, 800 pixel image? That’s gonna be a lot smaller now. Now they all are labeled and I’ll be able to easily do it.
[00:12:59] This one I could [00:13:00] throw away because I have that right here. And I actually did a better job compressing, but now I’m gonna show you, um, another way. Is using JPEG mini. Now, if I was doing this, this would be save for Web 1920. Um, and this is kind of a pain, um, because I do have to u do all of the different sizes.
[00:13:23] I would have to set it up to do all of the different sizes, which is fine. You could do it in really long action. Uh, I [00:13:30] believe just started the biggest and then shrink it down again to the next size and the next size, and then you’re having to export each time. So you would have three different folders.
[00:13:40] But let me show you about JPEG money. This is, I think there is a free version, but, um, this is $60 a, uh, $60 every time you upgrade. But the old version works, so I’m just clicking on the top. I am going to, this is, where do you want me to put these? I’m gonna put all of [00:14:00] these in save for web jpeg mini in the side.
[00:14:03] The same folder. We already did one here. And I’m gonna hit Okay now I can. The original size max, width, max, height, max Long Edge is the one I like. You can also do Instagram, Facebook, and you can make a custom size as well. But I’m gonna do max Long Edge this way. I could do a vertical at the same time I was doing horizontal.
[00:14:23] I’m never really gonna need something bigger than 1920 for our website. So [00:14:30] I am using this. If I wanna add a size, I just click. Uh, if I delete this, it’s very simple. You go to Max Long Edge and I’m gonna type in 1920 and I’m ready to go. That’s it. As long as you told it where to save it, you’re, you know, golden.
[00:14:47] So I know it’s in this ocean’s. There it is. It’s a folder I already made by clicking new folder. And now I’m gonna hit apply. Now I’m gonna show you, these are the same images that we used before, [00:15:00] the exact same image. . Now we have less control over how perfect the compression is, but all you do is drop ’em in here.
[00:15:13] Now there’s not an action that makes sure that they’re RGB or makes sure, um, that, um, . There’s limitations with this, but this has been what I’ve been using for a while and it’s been amazing. Now, let me show you the difference. [00:15:30] I would have to do it for each one, right? Each one of these, I have to do each size with jpeg.
[00:15:35] Many, you just tell it which one, and it makes all of your images. But the problem is they’re all named the same thing. So you have to go in, select them all, rename, um, and you wanna put. After, after the rest. Now you’re gonna do the same thing here.
[00:15:57] I think I did that wrong. . [00:16:00] Um, oh, boogers. Okay. 1920. Let’s try again. So Max Long Edge is gonna be 19, 20. We have eight hundred, twelve hundred and nineteen twenty. Okay. I’m gonna hit apply and I’m going.
[00:16:21] I have chosen this file, so it is in the oceans, it is the, not this one, the JPEG [00:16:30] mini, and there’s nothing in there right now. And then I’m gonna hit apply. Okay? Now all I have to do is take these images. I’m just holding the command key to select them all, and I’m just dropping them in. Now it’s gonna put them in this.
[00:16:45] but it’s gonna have three separate folders. Now all of these files are named the exact same thing, which is a problem. So I’m gonna select these, click uh, rename, and I want save for web hyphen [00:17:00] 1920 after the name rename. Now I’m gonna do the same thing here, rename. Instead of 1920, I’m gonna do 1200 re.
[00:17:11] Now when I upload them to my website, I can just search for 1920 or 1200 or 800, and then I’ll be able to find the one, all the images that are at that size that I need. So this has been kind of a game changer for me. And then I just, I just can upload [00:17:30] all of these to my, to my website. Um, okay, so it, let’s look at the difference.
[00:17:36] So this one down. . Um, it started out 5 9 96, um, pixels wide, and it says it was 3.2, but I think it was about seven. This one comes back and we got it to 1920 by 12 8, 10 80, and it is 3 91. [00:18:00] Okay. And then, um, let’s look at the one. This is the bottom one. 360 2, so it actually did a better job compressing it.
[00:18:11] Looks great. It’s still 1920 by 10 80, so we are golden. We are ready to go. All right, so let’s go. Thanks for watching. I hope it was helpful. Hit like and subscribe and give me a comment. I would love to hear what else you’d like to see. [00:18:30] Thanks. Bye.