Click a profile picture, cover or post to swap in your own file, or drag one onto it. Click any name, handle or caption to type. Hover the middle of a story, reel or short to change it. Nothing is uploaded; files stay in this tab.

What this mockup tool does

You export a post, a cover photo or a thumbnail, upload it, and only then find out that the platform has cut the top off, blurred the sides or hidden your logo behind the profile picture. This page shows you that before you upload. Drop the file into a copy of the interface, switch between desktop and phone, and see the actual crop each placement applies. The layouts are rebuilt in plain HTML to match what the platforms show today, so what you see here is close to what your audience sees.

Everything runs in your browser. The files are read from your own disk and drawn straight onto the page; nothing is uploaded, nothing is stored, and there is no account. Close the tab and it is gone.

How to use it

  1. Click the profile picture, the cover or the post inside the preview to choose a file, or drag one straight onto it. It works the way the real sites do: the camera button on a Facebook profile picture and the Edit cover photo button both open the picker. On a story, reel or short, hover the middle of the video. The avatar shows your initials in colour until you replace it.
  2. A new cover or profile picture goes straight into reposition mode, the way Facebook does it. Drag the picture until the part you care about sits inside the crop, then Save changes, or Cancel to put it back. Clicking a picture that is already in place gives you Upload photo, Reposition and Remove. The position is remembered per platform, so the Facebook crop and the LinkedIn crop can each be set on their own.
  3. Pick a platform, then a placement. Facebook has the profile, a single post, a multi photo post, a carousel and a reel. Instagram has the profile, a post and a story. LinkedIn has personal and company pages and a post. YouTube has the channel banner, the thumbnail as it appears on the home page and in search results, and a short. TikTok has the profile and a video. X and Threads each have a profile and a post. Every placement takes an image or a video.
  4. Switch between Desktop and Mobile. The YouTube banner also has Tablet and TV, because it is cropped differently on all four.
  5. Click the caption, the name, the handle or the video title inside the preview and type. Long captions are cut with a See more link the way the feeds cut them, so you can see exactly how many lines show before the fold. The link opens the rest, and the whole text shows while you are typing.
  6. Turn on the Safe area switch to see what each placement did to your image, and where the safe zone is on a cover or banner.
  7. Press Download PNG to save the preview as an image at double resolution, or Copy image to put it on the clipboard and paste it straight into a ticket, a chat or a document. That is how you hand it to a QA specialist or a client: the picture shows the exact placement, device and crop that was checked.

Aspect ratio matters more than pixel size

Most of the trouble people have with social images comes from thinking in pixels when the platforms think in ratios. The aspect ratio is the width divided by the height, and it is the only thing that decides how an image is cropped. A 1080 x 1080 image, a 2000 x 2000 image, a 3000 x 3000 image and a 1111 x 1111 image are all exactly 1:1. Upload any of them to the same placement and you get the same crop, the same blurred margins on the Facebook desktop feed and the same fit on a phone. The platform scales the pixels to whatever size it needs; it cannot change the shape.

So when a guide says 1080 x 1350, what it is really telling you is 4:5. Export at 1080 x 1350, 1440 x 1800 or 2160 x 2700 and the result is identical apart from sharpness. The pixel count only matters at the low end, where a file smaller than the display size gets scaled up and goes soft, and at the high end, where anything past roughly 2000 pixels on the long side is compressed back down anyway.

RatioSame shape at any of these sizesWhere it is the usual choice
1:11080 x 1080, 1500 x 1500, 2048 x 2048Square posts, profile pictures, carousel cards
4:51080 x 1350, 1440 x 1800, 2160 x 2700Portrait feed posts on Facebook, Instagram, LinkedIn, X, Threads
1.91:11200 x 628, 1500 x 785, 1910 x 1000Link previews, landscape feed posts
16:91280 x 720, 1920 x 1080, 2560 x 1440YouTube thumbnails and the TV view of a banner
9:161080 x 1920, 1440 x 2560Stories, reels, shorts, TikTok
2.63:1820 x 312, 1640 x 624Facebook cover on desktop
3:11500 x 500, 3000 x 1000X header
4:11584 x 396, 3168 x 792LinkedIn personal banner

This is also why the tool reads the shape of your file and not its size. A quick low resolution export from your design app is enough to check a crop; you only need the full size version for the real upload. And it is why the same image can look right on one platform and wrong on another: a 1:1 post fills an Instagram feed and picks up blurred bars on a Facebook desktop, not because anything is wrong with the file but because the two placements have different shapes.

What each placement does to your image

The numbers below are the display sizes the platforms use as of September 2026. They change occasionally, and the tool follows them, so if something looks different from what you see live, tell us through the form below.

PlacementDesktopPhone
Facebook cover820 x 312 crop. A wide strip, sides visible640 x 360 crop. Taller and narrower, so the sides of the desktop crop are lost
Post text, every platformTwo lines above a photo, then See more, more or Show more depending on the platform. The rest is hidden until someone clicks
X header3:1 from a 1500 x 500 upload, with the profile picture covering the lower left
X and Threads post imageShown in full with rounded corners up to 4:5. Taller images are cropped to 4:5
Facebook single imageShown in full unless it is taller than the height cap. Above the cap it is shrunk to fit and the sides are filled with a blurred copy, which is what happens to most square and portrait imagesShown in full up to 4:5. Anything taller is cropped to 4:5
Instagram postCropped on upload to somewhere between 1.91:1 and 4:5. The profile grid shows a 3:4 crop of the centre
Instagram story or reel9:16, shown full screen. The top and bottom are covered by the interface, so keep text out of those bands
LinkedIn personal banner4:1, with the profile photo overlapping the lower left corner
LinkedIn company coverRoughly 5.9:1, shorter than the personal banner, with the logo overlapping the lower left
LinkedIn post imageShown in full up to 4:5. Taller images are cropped to 4:5
YouTube bannerA 2560 x 423 strip out of the 2560 x 1440 upload1546 x 423 strip. Tablet shows 1855 x 423 and a TV shows the whole 2560 x 1440
YouTube thumbnailAlways 16:9. Anything else is letterboxed with black bars. The duration badge sits in the lower right
Facebook reel, YouTube short9:16 full screen. On a phone the action rail, the caption and the navigation bar cover the right and bottom. On desktop the buttons sit beside the video
TikTok video9:16 full screen. The action rail on the right and the caption at the bottom cover the image

Why the same image looks different on desktop and phone

Facebook is the clearest example. A square 1080 x 1080 post fills the phone feed edge to edge and looks right. On desktop, the feed column is wider than it is tall, so the same square hits the height cap, gets shrunk, and picks up blurred margins on both sides. That is not a mistake in your export; it is what the placement does. The tool shows both so you can decide whether it matters for the audience you are posting to.

Cover photos go the other way. The desktop cover is a wide strip, the phone cover is taller and narrower, and a cover designed for one is cut on the other. Safe area marks the part of the image that survives both crops, which for Facebook is the middle 640 pixels of an 820 wide cover. Anything you need people to read belongs inside it.

YouTube is the most severe. The upload is 2560 x 1440, but only a 1546 x 423 strip in the centre appears on every device. Desktop shows a wider strip and a TV shows the whole thing, so the corners of the upload are decoration that most viewers never see.

Common problems

My logo is hidden behind the profile picture

On LinkedIn the profile photo overlaps the banner's lower left corner and on Facebook the avatar overlaps the cover. Turn on Safe area and the covered area is hatched in red. Move the logo right or up.

The Facebook desktop preview has blurred bars but the phone does not

That is the height cap described above. If the blurred version bothers you, a landscape image at about 1.91:1 is shown in full on both. If most of your audience is on a phone, a 4:5 portrait gives you more screen and the desktop blur is a reasonable trade.

My thumbnail has black bars

YouTube thumbnails are 16:9 and nothing else. Export at 1280 x 720 or larger with the same ratio.

The story text is under the reply box

The bottom of a story is covered by the reply field and the top by the progress bar and your name. Turn on Safe area to see both bands, and keep text between them.

The preview looks small on my screen

The desktop previews are drawn at their real width and scaled down to fit the page, so the proportions are exact even when the whole thing is smaller. On a wide monitor they are shown at full size.

Frequently asked questions

Is my image uploaded anywhere?

No. The browser reads the file from your disk and draws it on the page. There is no server involved and nothing is stored, which is also why there is nothing to delete afterwards.

Are these the real interfaces?

They are rebuilt copies that match the layout, spacing and crop rules of the real ones. The point is the crop, not the pixels of the buttons, so if a platform changes its icons the preview will lag a little behind while the sizes stay right.

Does it work with video?

Yes, for posts, stories, thumbnails and TikTok. The video plays muted inside the preview and is cropped the same way an image would be. Profile pictures and covers are images only.

Can I save the mockup?

Download PNG saves the current preview as an image, and Copy image puts it on the clipboard. Both are made in your browser. The tool deliberately does not save state, so nothing you drop in is kept between visits.

Which sizes should I export?

For posts, 1080 x 1350 for portrait or 1080 x 1080 for square works on every platform here. For covers, use the platform's own recommended size: 820 x 312 for Facebook, 1584 x 396 for a LinkedIn profile, 1128 x 191 for a LinkedIn company page and 2560 x 1440 for YouTube. Thumbnails are 1280 x 720. Our Grid Maker can build a guide at any of those sizes.

Does it work on a phone?

It runs on a phone, and the phone previews are useful there, but the desktop previews are scaled down a long way. A laptop is the easier way to compare the two.

Last updated