Many email campaigns start life as one tall design in Figma, Photoshop or Canva. Email builders, though, work in blocks: a header, a hero, a few product rows, a footer. Slicing the design into separate images lets each block link somewhere different, load progressively and be swapped next week without redoing the whole email.

This guide shows how to do it with the image splitter, which runs in your browser and never uploads your design.

Before you start: export the design at the right size

Most email templates are about 600–640 px wide. Export your design at that width, or at twice that width (1200–1280 px) if you want images to stay sharp on high-resolution phone and laptop screens. Your email builder then displays the image at the template's width.

Export the whole email as one PNG or JPEG. PNG is best while you work, because it keeps text edges crisp; you can choose the final format when you download the pieces.

Step 1: open the design in the splitter

Open the image splitter and choose your file (or drag it onto the page). The tool shows the image's width, height and file size, so you can check the export worked as expected.

Step 2: start with a grid or a preset

For a simple layout, use the quick buttons in the Grid panel, such as 3 rows or 4 rows, to split the email into equal horizontal sections.

For common email layouts, open Presets and saved layouts and pick an email preset such as Header, body, footer or Hero and 2 × 2 products. Presets are starting points: you will adjust them to your design in the next step.

Step 3: move each line to the gap between sections

Drag each horizontal line so it sits in the space between sections, never through text or a button. For exact edges, open Exact line positions and type the position in pixels.

A good rule: if a section has a call-to-action button, keep the whole button inside one block so the entire button can be linked.

Step 4: split a row into columns where needed

If a row holds two products side by side, click that row on the image and split just that tile into 2 columns. Only that row changes; the rest of your layout stays as it is. The pieces are named by position, so a row split in two becomes, for example, 2a and 2b.

Step 5: choose the format and download

In the Download panel:

  • File name prefix: it starts as your file's name; change it to something like spring-sale.
  • Format: JPG keeps photo-heavy sections small; PNG is best for sections that are mostly text, logos or flat colour.
  • Quality: for JPG, 80–90 is a good balance. Each file's real size is shown after it is created.

Then click Download all as ZIP. Files are numbered in reading order, so they sort correctly in any folder.

Step 6: build the email

Upload the pieces to your email builder as image blocks, in file order. For each block:

  • add alt text that describes the block, because some email apps hide images until the reader allows them;
  • add the link for that block;
  • keep key messages, such as the offer and the main call to action, as live text too where your builder allows it.

Tips for lighter, faster emails

  • Large photo blocks are usually the heaviest part of an email. If a piece is bigger than you would like, run it through the image compressor: it shows the exact saving and never hands back a bigger file in the same format.
  • Reusing the same layout every week? Save it under Your layouts in the splitter and apply it to next week's design; it scales to a design of a different height.

Summary

  1. Export the design as one image, 600–640 px wide (or double for sharp screens).
  2. Split it with a grid or an email preset.
  3. Move the lines into the gaps between sections.
  4. Split single rows into columns where needed.
  5. Choose JPG or PNG and download the ZIP.
  6. Upload the blocks in order, with alt text and links.