This video tutorial covers how to resize images within VipeCloud’s HTML Builder. You’ll learn tips for adjusting image dimensions to fit your design, from using sidebar controls to resizing images without distorting them. If you’re looking to customize image sizes in your templates, this guide will show you how to work with container constraints, change image dimensions precisely, and maintain aspect ratios. Watch this video to master image resizing in the HTML Builder and create polished, visually balanced emails or landing pages.
Transcript
Transcript
0:02 Hello, Vipers! Here are a few ways you can change the size of an image in the HTML Builder. So, as always, you want to first click on whatever it is that you're going to be editing. 0:15 In this case, we're going to focus on this image right here. So I'm going to click on this right here. 0:21 Now we can see it in the left sidebar. Some details on the image. One important detail is the size of the image. 0:30 These are the dimensions in pixels. And, it's a large image. When it's in thousands, that's going to be definitely a lot of pixels. 0:41 as a rule of thumb too, like, 500 or 600 pixels is still quite a large image. Like you would fill up this whole container right here. 0:51 And then, like, 250 or so, is actually basically what we're looking at right here. And, so the actual source image here is quite large, but it's still quite scaled down to fit into this section right here. 1:04 So, just, uh, some useful things to know there. So, scrolling down, we can see the size. And, actually, yeah, there we go. 1:11 We got 250 is, uh, the size of it right here, limited by this container. And, so we can bring it down in size right there by just clicking down. 1:21 So, this is generally going to be, by the way, like, just the, the first place to check in this builder for, uh, making changes. 1:28 But, when I click up, it's not going to let me because it's at the maximum size of, basically, like, you can think of, like, the frame, or, like, looking at a picture frame right now, basically. 1:40 And, it's limited by that. Uhm, now, we really wouldn't want to make it larger here unless we were going to be making this smaller. 1:50 And, we can actually do that by clicking into the structure here and just changing the dimensions of what we can work with here. 1:58 We've got container 1 right here, container 2 right there. And, we can do that. We're making this one smaller and this one bigger by making those changes right there. 2:08 And, we can control the indent between the, between these right here too. Uhm, but now, let's just say we wanted to complete the, uh, just, we want to highlight this way more. 2:21 So, we're going to actually move this up here and look at that, it's already, now, uh, assuming the size of what we just put it in over here. 2:31 Uh, now it's at 560 pixels. Now it's actually limited based on the width over here. But again, we can, I think we got a little bit of room to now do Nevermind, we got padding over here. 2:43 So, nevermind, it's as large as it can be right here without, again, like, changing, like, the framework of our entire template. 2:52 But, again, we can bring it down right here to a smaller size we want. By the way, too, I'm just rapidly clicking on this, but you can also just, like, type in what you're wanting to work with as well. 3:05 Now, we're doing all of this and not actually changing the size of, like, that source image, but we can do that, too, where, like, let's say we just want to have, uhm, we want this to be, let's see, we've got 350 pixels here. 3:29 Let's say we actually, we want to make this into a 350 pixel wide image as a whole. We're going to edit the original document, so to speak. 3:39 Well, we can go over here to Edit Image. And now we're going to be changing this. We can go to Resize. 3:51 And we're going to change this now. Like we said, to 350. Now, uhm, it's important that you maintain the aspect ratio when you do this. 4:02 Otherwise, you're going to warp it. We're going to be changing one dimension of it, but not the other. And we definitely don't want that. 4:08 So, you can see right here, it automatically calculated that if this is going to be three hundred and fifty pixels wide, then it needs to be two hundred and fifty five pixels high to maintain its aspect ratio. 4:21 We hit apply, and then we hit save. It's going to process in the background around a little bit. And, now you can't really see a difference here, although actually it does look a little bit pixelated. 4:35 But, uhm, but you can see right here now the image is indeed three hundred and fifty pixels wide and tall. 4:44 Uhm, well, and two hundred and fifty five pixels tall. So, uh, these are just a few of the basics of dealing with image sizes in our, uh, in our HTML builder. 5:02 Of course, reach out if you have any questions at all. Let us know if we can help. And, uh, I hope this has been helpful. 5:10 Thank you so much.