Twitter 4-Split Guide: How to Make a Tap-the-Post Image Grid Locally
Split a composed screenshot into 4 perfectly-aligned tiles for the X tap-the-post grid effect.
A vendor-neutral guide for screenshot creators who need a 2x2 image grid for the X (Twitter) tap-to-reveal effect — without uploading the screenshot to a hosted web tool. Covers the feed-crop math behind the trend, the correct upload order, the 3-step FileHop workflow, a 7-tool comparison table, and the privacy story for screenshots of unreleased features, internal dashboards, and NDA'd designs.
What Is the Twitter 4-Split (Tap the Post) Effect?
The Twitter 4-Split — also called Tap the Post, Tap to View, Tap to Reveal, or the Twitter Photo Tile — is a posting trick where you slice one composed image into four tiles, then upload all four to a single X (Twitter) post in a 2x2 grid. In the feed preview the four tiles appear together as a single mosaic. When the reader taps the post, the tiles expand to show the full image at higher detail. It's the same composition either way; the grid just controls how much of it the feed shows.
The trick exists because of how X crops media. A single in-feed image is cropped to roughly 16:9 in the preview, so a tall composition has its top or bottom hidden until the reader taps to expand. A 2x2 grid of four images instead shows each cell at roughly 2:1 — uncropped — filling the same preview area but revealing the entire composition without anyone having to tap. The grid layout is the workaround for the single-image crop, and the tap-to-reveal moment becomes a feature rather than a bug.
Most splitters take any image and slice it into 4 tiles. The FileHop 4-Split lives in the same screenshot-beautifier pipeline as the gradient, frame, canvas, code-snapshot, and step-marker tools — so you compose the full screenshot first (gradient backdrop, MacBook frame, padding, corners, the works) and then export the same composed image as a 4-tile bundle in one step. That matters when the screenshot is sensitive: an unreleased feature, a customer's account, an internal dashboard, an NDA'd design. Web splitters load the source image into a hosted browser session even when they claim browser-side processing; a desktop splitter never sends the screenshot anywhere.
How the FileHop 4-Split Works
The workflow is the same for any screenshot — three steps:
Compose your image in the screenshot beautifier
Drop your screenshot into the beautifier and dress it up: pick a gradient backdrop, wrap it in a MacBook / iPhone / iPad / browser frame, set padding and corner radius, drop step markers if it's a tutorial. The 4-Split is the LAST step in the pipeline — anything you'd normally do for a polished launch tile happens first, on the same canvas.
Open the Social panel and pick the Twitter 4-Split preset
Click Social in the left panel and select Twitter 4-Split. The canvas immediately overlays a 2x2 grid line on the source so you can see exactly where each tile will be cut before exporting. Click the preset again to deselect if you change your mind.
Click Export — FileHop saves 4 JPG tiles into a folder
Pick a folder name (defaults to {baseName}_tiles) and a save location, then export. FileHop resizes the composed image to cover 1400×800, slices it row-major into 4 tiles of 700×400 each, and saves them as {baseName}_twitter_1.jpg through {baseName}_twitter_4.jpg in the named subfolder. JPEG quality is 92. The folder name and filenames are auto-uniquified, so re-exporting never silently overwrites a previous run.
The FileHop 4-Split tool does steps 1-3 locally in seconds — compose, pick the preset, export. No upload, no account, no per-tile re-export. The 4 tiles land in a folder ready to drag into the X composer.
Open the Social Media Canvas tool →Correct Upload Order for X (Twitter)
When you upload 4 images to a single X post, the order you select them determines the tile position in the 2x2 grid. FileHop names the tiles in row-major order — top-left first — so sorting the folder by filename gives you the correct upload sequence.
1 — top-left
{baseName}_twitter_1.jpg 2 — top-right
{baseName}_twitter_2.jpg 3 — bottom-left
{baseName}_twitter_3.jpg 4 — bottom-right
{baseName}_twitter_4.jpg X uses the upload selection order, not the filename, to determine tile position. So even though FileHop names the files _twitter_1 through _twitter_4 in the right order, you still have to pick them from the file picker in 1→2→3→4 sequence. Some other splitters output filenames in a different convention (top-down instead of row-major); always verify the order matches your tool by dragging in a numbered placeholder set first if you're unsure.
Who Uses Twitter 4-Split for Screenshots
Four common situations where a 2x2 grid lands harder than a single 16:9 screenshot.
Indie hackers and founders teasing new features
A single product launch tweet with a screenshot of the new dashboard cropped into 4 tiles creates the tap-to-reveal moment. The alternative — a single 16:9 screenshot — hides the bottom half until tap, which buries the most important content for anyone scrolling fast.
Designers showing before-and-after redesigns
Stack a Before-1 / Before-2 / After-1 / After-2 layout across the 2x2 grid so the comparison reads in two glances. The redesign story carries through the post without needing a thread or a video.
Engineers and DevRel announcing releases
We just shipped X tweets with a UI screenshot inside a MacBook frame on a gradient backdrop, sliced into 4 tiles for visual impact. The frame and gradient bake into the source before the split, so each of the 4 tiles carries part of the composition.
Product launches on X
Pre-launch teasers where the 4 tiles slowly reveal the new app icon, hero shot, dashboard, and pricing in a single grid post. The grid format reads as intentional and curated rather than as a single hurried screenshot.
When to Use the 4-Split (and When Not To)
The 4-Split is a layout choice, not a default. It earns its keep when the composition has 4 distinct moments and the tap-to-reveal beat helps; it gets in the way otherwise.
Use the 4-Split when…
- •The composition has 4 distinct visual moments that read better as a grid (icon + hero + dashboard + pricing; before-1, before-2, after-1, after-2; 4 features of a release).
- •You want the tap-to-reveal engagement bump where users tap the post to see the full grid in detail.
- •The source image is wide and tall enough that a 16:9 in-feed crop would lose the most important content from the top or the bottom edge.
- •The screenshot is a polished launch tile — gradient + frame + canvas baked in — that earns the extra production effort.
Skip the 4-Split when…
- •The composition is a single hero shot — a 16:9 single image performs cleaner and doesn't ask the reader to tap to understand the post.
- •The story is sequential — a thread of 4 tweets each with one image gives stronger pacing than four tiles in one post.
- •You're posting a link preview (OG image) — the 4-Split is only meaningful inside an X feed post, not as a Facebook / LinkedIn / Slack link preview where a single image renders.
- •The screenshot is sensitive (unreleased product, NDA'd design, customer data) and you'd be using a hosted browser tool to do the split — use a local desktop tool instead.
What the FileHop 4-Split Tool Ships
Four feature areas covering the grid math, the live preview, the beautifier integration, and the folder export. The entire pipeline — composition AND split — runs on your CPU. No upload.
2x2 grid with 700×400 px tiles
Verified pixel dimensions from the Rust split crate. The source image is resized to cover 1400×800 then sliced row-major into 4 tiles. JPEG quality 92, fixed.
- • 1400×800 total grid, 700×400 per tile
- • Row-major: top-left=1, top-right=2, bottom-left=3, bottom-right=4
Live grid overlay on the canvas
When the Twitter 4-Split preset is selected, the BeautifierCanvas renders 2x2 cut lines on the source so you can see exactly where each tile will be cut before exporting. Nudge the source if a cut line falls on important UI.
- • See the cut lines on the live canvas
- • Toggle off by clicking the preset again
Composes with the full beautifier pipeline
Gradient backdrop, device frame (MacBook / iPhone / iPad / browser), padding, corners, social-canvas presets, code snapshots, and step markers all bake into the source image BEFORE the split — so each of the 4 tiles carries the matching slice of the composed image.
- • Frame + gradient + canvas + code + markers + split — one app
- • No 3-tool roundtrip for a launch tile
Folder export with auto-uniquification
The 4 tiles export into a named folder (defaults to {baseName}_tiles/). The folder name and filenames are auto-uniquified, so re-exporting appends _1, _2, ... and never silently overwrites a previous run.
- • {baseName}_twitter_1.jpg through _twitter_4.jpg
- • Folder uniquifies on repeat exports
- • Custom folder name + Choose location dialog
Honest footnote: one social-split mode shipped today — the Twitter 4-Split (2x2 grid). Vertical strips (1×4 or 4×1), horizontal strips, Instagram Carousel (1×N), Instagram 3x3 Grid (9-tile profile grid), 6-tile, 12-tile, custom NxM grid — NONE are shipped today (Instagram Carousel and Instagram 3x3 Grid are noted as More presets coming soon in the panel). The FileHop edge isn't split-mode variety; it's that the splitter lives in the same beautifier pipeline as the gradient, frame, canvas, code, and step-marker tools, and runs locally without uploading the source image.
Web Splitters vs Offline Splitters
Web splitters load your source image into a hosted browser session
- ⚠ Web splitters (splitimage.im, picxstudio.com, aimagetools, ImageSplitter, Imagy.app) and mobile-app splitters (FourCropper iOS, TweetSplit iOS) load the source image into a hosted app sandbox to do the split.
- ⚠ Most claim browser-side processing — no upload — but the source image still loads from your machine through the host's domain. CDN cache, error logs, and possible tracking pixels all touch it.
- ⚠ For a public marketing tile of a finished, shipped product that's fine — the screenshot is already public.
- ⚠ For a screenshot of an unreleased product feature you're announcing tomorrow, a customer's dashboard you're sharing as a case study draft, or an internal admin panel for an investor update — it is not fine. The screenshot has left your device.
How offline splitters work
- ✓ FileHop runs the entire pipeline — composition AND split — locally on your CPU via the desktop app's Rust backend.
- ✓ The screenshot stays on your file system. Nothing is uploaded. Nothing is cached on a server. No privacy policy to read.
- ✓ Pull the ethernet cable and the tool still produces 4 JPG tiles in your output folder.
- ✓ The trade-off is that you install a desktop app instead of opening a browser tab — once.
For the matching offline workflows when you need a backdrop, a frame, a code snippet, a sized canvas, or step markers alongside your 4-Split, see the five sibling guides:
Quick Comparison of Twitter 4-Split Tools
The 4-Split landscape in one table. We tried to be honest on rows where competitors beat us — splitimage.im ships multi-mode splits, picxstudio.com ships horizontal/vertical orientations, aimagetools ships 1920×1080 panels, FourCropper and TweetSplit ship direct-share to X from iOS, and Photoshop ships any custom NxM you set up. FileHop is the only desktop / offline splitter on this list and the only one that composes with a full screenshot-beautifier pipeline.
| Tool | Type | Split Modes | Tile Size | Output Format | Beautifier Integration | Offline | Price |
|---|---|---|---|---|---|---|---|
| FileHop ⭐ | Desktop (Mac + Windows) | 2x2 grid (more coming) | 700×400 (1400×800 grid) | JPG (quality 92) | Yes (full pipeline) | Yes | Free |
| splitimage.im | Web (browser) | 2x2 grid + 2 vertical strips | Custom (browser-side) | Multiple | No | No | Free |
| picxstudio.com | Web (browser) | Horizontal + vertical + grid | Custom | Browser-side | No | No | Free |
| aimagetools.com | Web (browser) | 4-way split | 1920×1080 per panel | JPG | No | No | Free |
| FourCropper (iOS) | Mobile app (iOS) | 2x2 grid | Custom | Custom | No | On-device (iOS only) | Free |
| TweetSplit (iOS) | Mobile app (iOS) | 2x2 grid | Custom | Custom | No | On-device (iOS only) | Free |
| Photoshop slice tool | Desktop (paid) | Any custom NxM | Any | Any | Yes (full design tool) | Yes | Adobe subscription |
For the gradient backdrop behind your screenshot before splitting, see our gradient background guide for the full breakdown of 22 curated presets.
Gradient background guide →For wrapping the screenshot in a MacBook, iPhone, iPad, or browser frame before splitting, see our device mockup guide.
Device mockup guide →For dressing up code snippets for social posts before splitting, see our code snapshot guide.
Code snapshot guide →For sizing the canvas to other social platforms (YouTube, Instagram, LinkedIn, OG), see our social media canvas guide.
Social media canvas guide →For numbered step markers on tutorial screenshots before splitting, see our step markers guide.
Step markers guide →Best Practices for Twitter 4-Split Posts
Most 4-Split problems are decisions, not tooling. Use this checklist before posting.
- Always upload the 4 tiles in the correct order on X — top-left first (image 1), top-right second (image 2), bottom-left third (image 3), bottom-right fourth (image 4). The upload order on X determines the tile position, not the filename.
- Compose at sufficient resolution before splitting — FileHop's 4-Split outputs 700×400 per tile (1400×800 total grid); make sure your source composition is at least 1400×800 so the resize-to-cover doesn't have to upscale.
- Use a 16:9 or wider source aspect ratio — the 4-Split grid is 1400×800 (~16:9 total), so a wider source crops less of the bottom and top edges than a tall portrait source would.
- Bake the gradient backdrop, device frame, padding, and corners into the source image BEFORE splitting — the 4-Split is the LAST step in the pipeline, not the first; everything else has to be on the canvas before you click Export.
- Verify the four tiles align edge-to-edge by checking the grid overlay preview before exporting — if the cut lines fall on important UI (a button label, a chart axis, a face), nudge the source image left/right or up/down to move the lines off the focal point.
- For high-contrast screenshots (dark UI on a light gradient or vice versa), pick a backdrop that survives JPEG quality 92 compression — heavy color gradients can show banding artifacts in flat regions.
- Add a textual nudge in the tweet body — Tap to view the full launch grid → or 4 features in our biggest release ↓ — readers who don't know the tap-to-reveal trend need the cue. Without it the grid reads as four small images instead of one composition.
- For sensitive screenshots — anything from a private repo, anything with customer data, anything under NDA — use a local desktop tool like FileHop. Web splitters store the upload on their hosting CDN even when the UI claims browser-side processing.
Common Mistakes to Avoid
Uploading the tiles in the wrong order on X
Even when your splitter named the files _twitter_1 through _twitter_4 correctly, X uses the upload selection order to decide tile position. Grab the files out of order from your file picker and the grid breaks — the right side appears on the left, the bottom appears on top. Always verify the picker shows 1→2→3→4 before you confirm.
Picking a portrait or square source for the 4-Split
The X feed preview crops the 4-grid to ~16:9 total, so a tall portrait source ends up center-cropped — you lose the head and the feet of any full-body composition. For portraits the 1×4 vertical strip layout is the right choice, and FileHop does NOT ship that mode today; use a competitor like splitimage.im or a manual Photoshop slice for portraits.
Pasting a sensitive screenshot into a hosted web splitter
Proprietary UI, internal dashboards, customer data, NDA'd designs shouldn't enter a hosted browser session — even when the splitter claims browser-side processing, the source still transits the hosting CDN. Use a local desktop splitter when the screenshot is anything other than a public marketing tile.
Ready to Compose Your Next 4-Split Post Locally?
Open the FileHop screenshot beautifier, compose your launch tile with a gradient backdrop and device frame, then export as a 4-tile Twitter grid in one click. Runs locally, no uploads, no watermark.
Open the Social Media Canvas ToolMore guides for sharing what you build
Social Media Canvas Guide
Pick the right pixel dimensions for every social platform — pairs natively with the 4-Split.
Gradient Background Guide
Pick a gradient backdrop for your screenshot before splitting.
Device Mockup Guide
Wrap the screenshot in a MacBook, iPhone, iPad, or browser frame before splitting.
Code Snapshot Guide
Turn a code snippet into a polished, shareable PNG sized for Twitter / LinkedIn.
Step Markers Guide
Add numbered annotations to a tutorial screenshot before splitting.