Images In: Resolution, Crops and Token Cost

By the Syncfusion DevTutorials team · Last updated October 27, 2026

Every pixel costs tokens, but shrinking a photo can erase the one number you need. Find the cheapest way to send twelve receipts that still reads every total, with resizing and crops.

What Image Resolution Is

Image resolution = how many pixels wide and tall an image is. The more pixels you send, the more tokens you pay for.

In this lesson, you will find the cheapest way to send a photo that still gives the right answer.

A customer claims a fuel receipt. The phone photo is 3000 × 4000 pixels. To save money, the app shrinks every photo to 2048 pixels on its long side before sending it.

The model reads the total as 6,694. The receipt says 66.94.

Press Play, or use Next to go one step at a time.

• Frame 1: a big photo with a small total.
• Frame 2: how tall the digits are after shrinking.
• Frame 3: what the model read, and how wrong it is.
• Frame 4: two fixes: a full-size photo, or a crop of the totals line.

Simple lesson: shrinking an image saves tokens, but small print is the first thing it erases.

A Real-World Example

Think about sending a photo of a contract to a friend by text message.

• The app shrinks the photo so it sends fast.
• On your friend's phone, the big heading is still clear.
• The small print at the bottom is a grey blur.

If you want your friend to read the small print, you do not send a bigger photo of the whole page. You zoom in on the small print and send that.

A multimodal model works the same way:

• The whole page = the full photo. Big text survives shrinking.
• The small print = the receipt total. It is lost first.
• Zooming in = a crop. Fewer pixels in total, but the important ones stay large.

Simple lesson: send the part that matters, at a size where it is still readable.

What You Will Learn

By the end of this lesson, you will be able to:

• explain how image size turns into tokens and cost
• explain why small print is lost first when an image is shrunk
• use a crop to send only the pixels a job needs
• find the cheapest setting that reads every total
• write an ingest() function that picks the size and crop for each photo

This lesson works on the Ingest stage: the first of the six stages from Lesson 1. Everything here happens before the model sees anything.

Bigger Images Cost More

Lesson 1 showed that an image becomes tokens. A common rule of thumb is about one token for every 750 pixels.

That means the cost grows with the area. Double the width and the height, and you pay four times as much.

Step through all six frames.

• The bar: the tokens for all 12 receipts at each size.
• The score: how many of the 12 totals were read right.
• The last frame: full size reads all 12, at the highest cost.

Simple lesson: the cost grows with the area, so a small change in size makes a big change in price.

Why Small Print Is Lost First

When you shrink an image, every part of it shrinks by the same amount.

• A 40-pixel heading becomes 20 pixels: still easy to read.
• A 15-pixel total becomes 7 pixels: the decimal point is now one pixel, or none.

In the lab, the model needs the total's digits to be at least 10 pixels tall. Below that, the point disappears and the model "tidies" the number into something that looks normal: 66.94 becomes 6,694. Below 7 pixels, digits get mixed up: a 3 becomes an 8.

Click the button and look at the Pipeline tab.

• The receipt on the left: the photo, drawn from its real values.
• What the model sees: the same photo at the size it is sent, with hard pixels.
• The digit height under it: below 10 px, watch the total go wrong.

Simple lesson: the smallest print in the batch sets the size you need.

Crop First, Then Resize

You do not need the whole receipt to read the total. You need the totals line.

A cheap layout pass (the OCR model from Lesson 1, in layout mode) finds where the totals line is. Then Ingest cuts out just that strip and sends it.

Step through all three frames.

• The crop: only the totals line, a small strip of the photo.
• The bar: how tall the digits are in the crop at each size.
• The verdict: the first size where the digits reach 10 px.

A crop is small, so even a high resolution costs few tokens. The layout pass costs a little, but far less than sending the whole photo at full size.

Step through both frames to compare every setting.

• Frame 1: whole photo. Only full size reads all 12.
• Frame 2: crop to totals. From 1024 px up, all 12 are read, for a small fraction of the cost.

Simple lesson: focus beats resolution.

Lab Exercise: The Cheapest Setting That Reads Every Total

Your task: change the Ingest settings until all 12 receipt totals are read, at the lowest cost. Then press Check.

Click the button and open the Pipeline tab.

• Ingest: turn the crop on or off, and pick the long side.
• The line under the table: totals read, cost and tokens for all 12 receipts.
• Compare every setting: a table of all 12 settings, if you want to see them side by side.
• To pass: all 12 totals read (99%), at the lowest cost of any setting.

Build It in TypeScript

A single setting for every photo is simple, but you can do better. Each photo arrives with its size, and the layout pass tells you how tall the total's digits are. So ingest() can pick the size for each photo.

const SIDES = [512, 768, 1024, 1536, 2048] as const;
const SHARP_PX = 10; // smaller digits are misread

export function ingest(meta: ReceiptMeta): ImageSetting {
  // Crop to the totals line, so a high resolution still costs few tokens.
  const long = Math.max(meta.totalsBox.w, meta.totalsBox.h);
  for (const side of SIDES) {
    const scale = Math.min(1, side / long);
    if (meta.digitPx * scale >= SHARP_PX) return { longSide: side, crop: true };
  }
  return { longSide: "full", crop: true };
}

The loop tries each size from smallest to largest, and stops at the first one that keeps the digits at least 10 pixels tall.

Click the button and open the Code tab.

• The editor: the starter sends every photo at 2048 px, whole. Rewrite it.
• Run on the media bank: your function runs on all 12 receipts in a Web Worker.
• The table: each receipt's size, digit height, what was read, and the tokens.
• To pass: all 12 totals read, for no more than the best single setting.

Simple lesson: pick the size per image from what the image contains.

TL;DR

1. Resolution = pixels wide × pixels tall. Tokens grow with the area.
2. Shrinking erases small print first. In the lab, digits under 10 px are misread.
3. The smallest print in a batch sets the size one fixed setting needs.
4. A crop sends only the part that matters, so the digits stay large and the tokens stay few.
5. A layout pass finds where to crop, for a small cost.
6. Ingest is your code. It runs before the model and decides most of the cost.

Common mistakes

Check Your Understanding

Exercises

What to Remember

• Tokens grow with the image's area.
• Shrinking erases small print first.
• The smallest print in a batch sets the size one setting needs.
• Crop to what the job needs, then resize.
• A cheap layout pass tells you where to crop.
• Ingest is your code, and it decides most of the cost.

Further Reading

• Transformers.js documentation, by Hugging Face: image pipelines that run in the browser.
• CanvasRenderingContext2D.drawImage(), on MDN: how to crop and resize an image in the browser before sending it.

Next: Documents: OCR, Layout, Tables and Forms, where invoices break extraction in four new ways, and you fix each one.