Makeinfo guide

Splitting a
long page

Most people already know they have to split. The question is where to cut. Pick badly and the seams read as flaws; pick well and nobody can tell it was split at all.

Published · Updated

Why to split, briefly

Per-image limits, loading speed, and the size a browser can display. Choosing image dimensions covers those in detail. This article is about what comes next: where to cut.

A good cut crosses nothing

There is one criterion. Find a height where a horizontal line would pass through no block at all.

Cutting through the middle of a block goes wrong in two ways. One is the content itself: a sentence breaks in half, or a product photo spans two images. The other is more visible — some platforms put a small gap or a border between images, and when that gap runs through the middle of a photo the product looks cracked.

Cut in the empty space between blocks instead and the seam reads as margin that was always there, whether the pieces sit flush or slightly apart.

How makeinfo picks the position

When you choose split PNG, it works like this.

  1. Collect the top and bottom edge of every block as candidates.
  2. Take the range from the current position down to the maximum height.
  3. Keep only the candidates in that range that cross no block.
  4. Choose the lowest of what remains, because filling each piece as far as possible keeps the number of pieces down.

Block edges are the candidates because free placement has no concept of a "row". Wherever a block sits, its top and bottom are the points where content actually ends and begins.

With no position available, it cuts anyway

If no usable candidate exists in the range, it cuts at the maximum height regardless — through the middle of a block if that is what is there. Not cutting would leave one piece over the limit and the upload would fail outright.

This usually happens in one of two situations.

  • A single block is taller than the maximum height. Typically one very long photo placed whole. Raise the maximum height, or split the photo across two blocks.
  • Blocks overlap vertically. If the next block starts before the previous one ends, there is no free height anywhere in that stretch. Easing the overlap slightly is enough to create one.

The cut lines in the editor show you where it will land before you export. If a line runs through a block, suspect one of the two above. The lines are for reference only and do not appear in the exported images.

Move them yourself and yours wins

If the automatic positions are not what you want, drag the cut lines. Once you have touched them, the automatic calculation stops interfering — letting it push your positions around would defeat the point of moving them.

There are cases where choosing yourself is better.

  • To match the sections of the content — cutting where the subject changes (introduction / specs / shipping) makes each piece a single coherent chunk, which reads better.
  • To keep the first piece short — a first image that appears quickly reduces drop-off. One approach is a short opening piece with just the main image and the product name.
  • To hit a piece count — when the platform limits how many images you can attach.

The criterion stays the same when you place them by hand: choose a height that crosses no block.

What to set the maximum height to

The default is 2000. That value is in editor units, so the export scale multiplies it. Exporting at 2× means each piece can be up to 4000px tall.

Work it out in this order.

  1. Check the destination's per-image limit. Height limits and file size limits are often separate.
  2. Divide that by your export scale. A 4000px limit exported at 2× means a maximum height of 2000.
  3. Leave a little room. Pieces can end up shorter than the limit while looking for a cut position, never longer — but file size varies with content, so do not cut it fine.

Too many pieces makes uploading tedious and adds loading requests. Five to ten pieces per page is comfortable in most cases.

When seams still show

Sometimes the position is right and it is still noticeable.

SymptomCause and fix
A thin line at the boundaryThe platform is inserting a gap between images. It is nearly invisible against a flat background, so keeping the area around the cut a solid color helps.
Background color differs slightly between piecesA gradient across the background can make the top and bottom of a piece read as different colors. Keep gradients inside blocks and leave the cut zones flat.
One piece looks softer than the restThe photo used in that stretch was probably small to begin with. That is a source problem, not a splitting problem.
The last piece is very shortA little content spilled over into an extra piece. Move a cut line to merge it into the previous piece, or add a closing line to fill it out.

Exporting and uploading

Split PNG produces several files, so they come down as a single zip. Downloading them individually gets blocked by browsers or prompts every time, and even when it works the files scatter among everything else.

Filenames are numbered — projectname_01, _02 and so on. Upload them in that order or the content will not run continuously. Some platforms do not sort by name when you select several files at once, so check the preview afterwards.

Split files cannot be reopened

Split PNG is for uploading. Each piece holds only part of the whole, so loading one back does not restore your work.

The format that can be reopened is the full PNG (a zip when there are many photos). Text, layout, photos and uploaded fonts travel inside it, so opening it puts you straight back into editing.

You will certainly need to change a price or a date later. Once you have uploaded the split PNGs, keep a full PNG somewhere safe. That one habit turns the next edit into a few minutes of work.