How to Preview a Social Post: Mockups, Image Sizes and Cropping

Most posting mistakes show up only after the post is live: a caption that runs long, a face cut off by the crop, headline text hidden under the app's buttons, a link preview with the wrong picture. A mockup or preview will not catch everything, but it catches the cheap problems while you can still fix them. This guide covers what the mockup tools on this site can check, which image sizes matter, how to crop safely and where a browser mockup stops being reliable.

What a mockup can and cannot show

A mockup is a drawing of a post or a chat, made from the text you type. It is good for reading your wording the way a viewer will, checking line breaks and how much text fits in a frame, and showing a colleague, client or class what a planned post or conversation will look like.

It cannot show how the real app looks this month, how a particular phone renders fonts and emoji, dark mode, how the platform compresses and crops your photo, or where the algorithm will place your post. Treat a mockup as a draft, never as proof of what the platform will display.

What the three social tools actually do

• The Instagram Post Generator draws a feed-style card 640 pixels wide from a username, a caption, like and comment counts, a background color and a text color. You can add your own photo, which is cropped to fill a 640 by 400 pixel frame and never leaves your device, and without one it shows a gray placeholder. The card grows taller to fit a long caption, while the real app usually shortens long captions behind a "more" link. The counts are whatever you type, and every download carries the mock-up label.
• The Instagram Story Generator makes a 1080 by 1920 pixel PNG with one of six gradient backgrounds, up to 200 characters of white text, a font size from 20 to 80 pixels, left, center or right alignment and an optional border. It makes a graphic you can upload yourself, and it adds a faint FreeToolsVerse credit in the lower corner.
• The WhatsApp Chat Generator draws a chat 400 pixels wide under one contact name. Each message has a side, text and a time that you type. Downloads carry a small "Mock-up made with FreeToolsVerse - not a real post" label in the corner.

None of them connects to Instagram or WhatsApp, and nothing is posted or sent. They draw in your browser and you download a PNG.

Sizes and ratios worth knowing

Platforms change the shapes they support and how they compress uploads, so treat these as starting points and check each platform's current help pages. The Image Resizer's "Social media size" mode includes these presets:

• Instagram post: 1080 × 1080 (square)
• Instagram portrait: 1080 × 1350 (4:5)
• Story, Reel or TikTok: 1080 × 1920 (9:16)
• Facebook or LinkedIn post: 1200 × 630
• X header: 1500 × 500
• YouTube thumbnail: 1280 × 720
• Profile picture: 400 × 400

The 1200 × 630 shape, about 1.91 to 1, is also the usual proportion for link-preview images.

Crop first, then resize

Decide the final ratio before you touch the file. Cropping to the ratio and then resizing to exact pixels gives cleaner results than resizing first, which can distort the picture or push the subject out of frame.

The Image Cropper offers ratio buttons (Free, Original, 1:1, 4:5, 4:3, 3:2, 16:9 and 9:16). Drag the box or its handles, nudge it with the arrow keys, or type the left, top, width and height, then save as PNG, JPG or WebP. The Image Resizer sets a size by pixels, percentage or preset and handles up to 30 images at once. Its fit options are to keep proportions, to fill the exact size and crop the edges, or to stretch, which distorts a photo and is best avoided. Both work in your browser and upload nothing.

Margins matter as much as ratios:

• Keep faces and key objects near the center, because grids, previews and thumbnails crop to other shapes.
• In a vertical Story, leave free space at the top and bottom, where the app shows its own buttons and labels.
• Keep text away from the edges and large enough to read on a phone.

A pre-publish workflow

1. Decide where the image is going and which ratio it needs: feed, Story, link preview or a chat illustration.
2. Crop the photo in the Image Cropper with that ratio chosen, then resize it with a social preset in the Image Resizer. Keep the original file.
3. If the file is large, shrink it with the Image Compressor. Photos usually suit JPG or WebP, and JPG vs PNG vs WebP explains the trade-offs.
4. Draft the caption in the Post Generator and check how it wraps. For a text-only Story, build it in the Story Generator and view it at phone size.
5. If you are sharing a link, enter its title, description and image address in the Open Graph Preview. It loads the image from a public URL and crops it into rough Facebook, LinkedIn and Twitter style cards. Real platforms fetch their own preview and often cache it, so a change can take time to appear.
6. Do a last check in the real app, on a phone, before the post reaches your audience.

Use mockups honestly

Good uses include presentations, storyboards, tutorials, design comps, classroom examples about media literacy and jokes that are labelled as jokes. The WhatsApp and Instagram Post tools stamp their downloads as mockups, so leave the label on when you share the output. The tools are not affiliated with Instagram, WhatsApp or Meta, and those names are trademarks of their owners.