In the HTML builder, an image's display width is limited by the container it sits in, and its file size affects how fast the email loads. You can shrink an image on the page, change the container it sits in, resize the image file itself, or compress the file before uploading it.

How to Change an Image's Display Width

Click Email, then Templates.
Open the HTML email template you want to edit.
Click the image in the builder to open its settings.
Scroll to the image size setting and enter a smaller width in pixels, or use the down arrow to lower it.
Click Save.

The settings also show the dimensions of the source image. As a rough guide, 500 to 600 pixels fills a full-width section, and about 250 pixels fills half of a two-column row. The width can't go above the width of the container the image sits in, so the up arrow stops at that limit.

How to Make an Image Larger Than Its Container

To show an image wider than its current limit, give its container more room or move the image into a wider one.

Click the structure that holds the image.
Change the container widths so the container with the image is wider and the one beside it is narrower.
To use a full-width container instead, drag the image into it.
Click the image and set its width.
Click Save.

Padding on the container also counts against the width, so an image in a full-width section can still be a little narrower than the section.

How to Resize the Image File

Changing the display width leaves the source image at its original size. To change the image file itself, use the builder's image editor.

Click the image in the builder.
Click Edit Image in the image settings.
Click Resize.
Enter the new width in pixels, and keep the aspect ratio locked so the height updates to match.
Click Apply.
Click Save, and wait for the image to finish processing.

If you change only one dimension without keeping the aspect ratio, the image stretches or squashes. A source image resized to a small width can look slightly pixelated if you later display it larger.

How to Compress Images Before Uploading

Inboxes limit how large an email can be, usually between 10 and 25 MB. Photos from a phone or a professional photographer are often several megabytes each, so a template with several of them can go over the limit, load slowly, or arrive with images missing. Compressing an image lowers its file size a lot with little visible change in quality.

Open a free image compression tool in your browser, such as tinypng.com. VipeCloud isn't affiliated with these tools.
Upload your image to the tool and download the compressed file.
To tell the two files apart later, add "compressed" to the file name.
In the HTML builder, click the image and replace it with the compressed file.
Click Save.

For uploading and placing images, see Inserting Images, Links, and Attachments Into Emails.

How to Check the Total Size of Your Template

If your template has a landing page, you can load it in your browser and read its total size from the browser's developer tools.

In the HTML builder, click Save & Preview Landing Page. The landing page opens in a new tab.
Right-click the page and select Inspect.
Open the Network tab.
Refresh the page.
Read the total transferred size at the bottom of the Network tab.

A total well under 10 MB is safe for every major inbox.

Key Notes

An image's display width can't exceed the width of its container, minus padding.
Changing the display width doesn't change the file size. Use Edit Image or compress the file to make the email lighter.
Apple Mail can display resized images incorrectly. See Backgrounds in Apple Mail.
Large images also slow down the HTML builder itself while you edit.

Video Walkthrough

Use the timestamps below to jump to specific sections:

0:02 - Selecting an image and checking its dimensions
1:04 - How to change an image's display width
1:40 - How to make an image larger than its container
3:05 - How to resize the image file
4:21 - Applying and saving the resized image