A social media resizer sounds like a tiny utility.
Upload an image.
Pick Instagram.
Resize.
Done.
Then you try to support multiple platforms and discover the real problem.
The problem is not resizing.
The problem is turning one source design into many different aspect ratios without making the outputs look broken.
Start with presets as data
Do not hard-code every platform into UI logic.
A better design starts with a preset model.
Conceptually:
const presets = [
{
id: "instagram-portrait",
platform: "Instagram",
label: "Portrait Post",
width: 1080,
height: 1350
},
{
id: "tiktok-vertical",
platform: "TikTok",
label: "Vertical",
width: 1080,
height: 1920
}
];
Now the UI is generated from data.
That makes it easier to:
- add new presets
- update dimensions
- group by platform
- search presets
- export multiple targets
The preset list becomes product configuration rather than scattered conditionals.
The hard part: aspect ratios
Suppose the source is a wide 16:9 graphic.
Now the user asks for a 9:16 vertical output.
You have three basic choices.
1. Contain
Scale the whole source until it fits.
Result:
- nothing is cropped
- empty space may appear
2. Cover
Scale until the entire target is filled.
Result:
- no empty space
- part of the source is cropped
3. Stretch
Force the source to exactly match the target.
Result:
- no empty space
- no crop
- distorted content
For most creative work, stretch is the dangerous one.
Humans notice distorted faces, logos, circles, and product shapes immediately.
Crop position becomes a UX feature
"Cover" is not enough.
You also need to decide which part gets cropped.
Center crop is a reasonable default:
[ SOURCE IMAGE ]
[TARGET]
But it fails when the important content is near an edge.
A better resizer lets the user:
- drag the image
- zoom
- reposition
- preview output
Now the app is not just calculating dimensions.
It is helping the user preserve visual intent.
Safe areas complicate things further
A 1080×1920 canvas does not mean every pixel is equally useful.
Platform UI can overlap portions of vertical content:
- captions
- buttons
- usernames
- navigation
- device chrome
So a more advanced resizer can visualize a "safe" region where important text and logos should stay.
This is not strictly part of image resizing.
It is part of platform-aware composition.
Multi-output changes the architecture
Generating one output can be synchronous and simple.
Generating 20+ outputs changes the UX.
The user now expects:
- progress
- predictable filenames
- grouped results
- one download
- consistent crop rules
A filename scheme might look like:
campaign-instagram-portrait.jpg
campaign-linkedin-post.jpg
campaign-tiktok-vertical.jpg
Instead of making the user download each file individually, bundle them.
That is why ZIP export becomes a workflow feature, not a convenience.
How I think about the pipeline
A clean pipeline can look like:
Source image
↓
Decode once
↓
For each selected preset:
- calculate scale
- apply crop position
- draw to canvas
- export blob
↓
Package outputs
↓
Download ZIP
The key idea is to avoid redoing unnecessary work.
Decode once.
Reuse source state.
Generate targets from a shared transformation model.
Quality settings matter too
Different social assets have different needs.
A photographic post can tolerate lossy compression.
A graphic with small text may need a higher quality setting.
The resizer should avoid making destructive choices invisible.
Users should understand that smaller output files can trade away image quality.
I built this because the manual workflow is ridiculous
The real-world process often looks like:
Open Canva/Figma/Photoshop
Duplicate canvas
Resize
Fix crop
Export
Repeat
Repeat
Repeat
The creative decision was already made.
The remaining work is mechanical.
That is exactly the kind of task software should compress.
I built a version of this workflow into the BatchSet Social Media Resizer.
It currently focuses on turning one source image into platform-specific outputs without forcing the user to rebuild the design manually.
You can also see the broader marketing workflow here:
A useful product principle
When a user repeats the same transformation with different parameters, do not just build a faster single-action tool.
Ask whether the product should understand the set of outputs.
That is the difference between:
"resize image"
and:
"prepare this campaign for every channel"
The second framing produces a much more useful product.
Final thought
A social media resizer is a good example of how simple utilities hide interesting engineering problems.
The pixel math is easy.
The real work is in:
- aspect-ratio behavior
- crop control
- preset maintenance
- output naming
- batch generation
- safe-area UX
- download packaging
That is where a small tool becomes a real workflow.
Top comments (1)
Presets as data is the right call. What it leaves open is that the preset describes the target canvas and nothing in the model describes the source. Safe areas are platform side. There's no source-side equivalent that says "this logo has to survive every output".
So center crop is a guess about intent, repeated 28 times, and cover is doing something you can't verify afterwards without looking at all of them.
That's what actually changes at batch scale. One output, you eyeball it, done. Twenty-eight and review cost grows with the set, unless something in the source is machine readable. A keep-visible region marked once would let an output fail on its own instead of waiting for someone to open the ZIP and scroll.
I run the same graphic at 1080x1350 for one channel and 1672x941 for another. Cropping is never what breaks. It's the text block, which sits fine in 4:5 and ends up in the wrong third at 16:9, and no crop anchor fixes that because the fix is a different layout, not a different window onto the same one.
Which is probably where this category tops out anyway.
Does BatchSet let you set a crop anchor once and apply it across the whole set, or is it per preset?