For build-in-public updates, launch posts, release notes, technical demos and changelog highlights shared on X.
X post mockups that make a product screenshot readable in the timeline.
On X, the image does the work the 280 characters cannot: it shows the product. This page covers what X documents about images (formats, file size and how many per post), the canvases that work for product screenshots, how multi-image posts change the layout, and how to build the image in MockupX without wrapping it in fake post chrome. People still search for Twitter post mockups, so both names appear here; the platform is X.
X POST MEDIA
Product proof for a fast feed1600 × 900 · up to 4 images
QUICK ANSWER
Start with the job, then choose the frame.
X accepts JPG, PNG, GIF and WebP images up to 5 MB, and a post can carry up to four photos, one GIF or one video. X's developer docs do not publish a recommended image size, so use a 16:9 canvas such as 1600 × 900 for browser and dashboard screenshots and a 1:1 or 4:5 canvas for phone screens, keep the key content centered, and check the crop in the composer before posting.
Browse app store & social generators →Use the image for what the text cannot show: the product working. Keep opinion, context and links in the post itself.
What X documents about images
X's developer documentation (docs.x.com) lists the media limits that apply to posts. They are the same whether you post from the app or through a scheduling tool that uses the API.
X does not publish a recommended pixel size for in-feed images in the documentation we checked, and how a single image is cropped in the timeline has changed several times. That is why the safest approach is a sensible working canvas plus a check in the composer, rather than a size copied from an old list.
| Item | Limit | What it means for a mockup |
|---|---|---|
| Image formats | JPG, PNG, GIF, WebP | PNG for UI screenshots, JPEG for photo-heavy images |
| Static image size | 5 MB maximum | Check large 2× PNG exports before posting |
| Animated GIF size | 15 MB maximum | MockupX exports still images, not GIFs |
| Media per post | Up to 4 photos, or 1 animated GIF, or 1 video | Plan sets of up to four images |
| Animated GIF resolution | 1280 × 1080 or smaller recommended | Relevant only if you animate elsewhere |
Choosing a canvas for the screenshot
Let the product decide the shape. A browser app or dashboard is naturally wide; a phone app is naturally tall; a diagram or quote is often square. Forcing a narrow phone screen to fill a wide canvas leaves it tiny in the middle; forcing a dashboard into a square makes it unreadable.
| Content | Canvas | MockupX preset or template |
|---|---|---|
| Web app, dashboard, browser | 16:9, 1600 × 900 | X post preset; Social Launch template (Chrome frame with headline) |
| Phone app, one or two screens | 4:5, 1080 × 1350 or 1:1, 1080 × 1080 | Portrait or Square preset; iPhone and Android frames |
| Diagram, quote, single result | 1:1, 1080 × 1080 | Square preset; Social Screenshot template |
| Profile header | 3:1, 1500 × 500 | X cover preset; Browser Cover template |
Keep the important part in the middle
Even when X shows an image uncropped on one device, the same image can be cropped in another view, in a quote post, in a link preview or in a multi-image grid. Put the product region and any words in the central area of the canvas and let the edges carry only background. With MockupX's padding control at 8 to 12%, the frame naturally sits in that central area.
A quick test: cover the outer fifth of the image on every side with your hands. If the point still reads, the image will survive most crops.
Posts with two, three or four images
Adding images changes the layout. With several images, each one is shown in a smaller cell of a grid and cropped to fit until someone taps it. A wide screenshot that looks fine alone may lose its edges in a four-image grid. Build all images in a set at the same canvas size, put the strongest one first, and preview the exact set and order in the composer.
- Two images: before and after, or desktop and mobile
- Three images: problem, workflow, result
- Four images: a short feature tour, one screen each
Let the post and the image do different jobs
The post text carries context, opinion and the link; the image carries proof. Repeating the post's sentence as a headline on the image wastes both. A good split for a launch post: the text says what shipped and why, and the image shows the feature in use with a three-to-five-word label.
Worked example: “Shipped: you can now export any report to CSV with one click.” The image is a 1600 × 900 canvas with a Chrome frame showing the report and the open export menu, cropped so the menu is large, with the label “One-click CSV” above it. No arrows, no feature list, no stock icons.
X header images
The profile header is a wide 3:1 banner, and the MockupX X cover preset is 1500 × 500. On most profile layouts, your profile photo and name sit over the lower-left part of the header, so place the product right of center and keep the lower-left quiet. Check the crop in X's profile editor after uploading, since the visible area differs between the app and the web.
File size and export settings
At 1600 × 900, a PNG with a screenshot and a gradient background is normally well under X's 5 MB limit. A 2× export on Pro (3200 × 1800) of a detailed screenshot can be several megabytes, so check the file size before posting. If it is over 5 MB, export JPEG instead; for photographic backgrounds JPEG is often smaller with no visible loss.
- PNG: sharpest for interface text and flat colors
- JPEG: smaller files for photo backgrounds
- WebP and 2× export: available on Pro
- Free exports carry a small MockupX watermark
No fake timeline around the image
Many post mockup tools wrap an image in a fake X post with a handle, likes and view counts. Avoid it. A fabricated post can be mistaken for a real one, and invented engagement misrepresents the product. Post the clean image, add an image description in the composer for screen readers, and let real replies do the rest.
Make an X post image in four steps
Match the canvas to the screenshot, then check the crop where it will appear.
- Write the post first and decide what the image must prove.
- Choose the canvas: X post (1600 × 900) for wide screens, Portrait or Square for phone screens.
- Add the screenshot, crop it to the region that matters, and keep it in the central area with padding.
- Export PNG, confirm the file is under 5 MB, and preview the exact set of images in the X composer before posting.
Twitter post mockup FAQ
What size should an X (Twitter) post image be?
X's developer docs do not publish a recommended pixel size. A 16:9 canvas such as 1600 × 900 suits wide product screenshots, and 1080 × 1080 or 1080 × 1350 suits phone screens. Check the crop in the composer before posting.
What is the file size limit for X images?
X's developer documentation lists 5 MB for static images and 15 MB for animated GIFs, in JPG, PNG, GIF or WebP format.
How many images can I add to an X post?
Up to four photos, or one animated GIF, or one video per post, according to X's developer documentation.
Does X crop images?
It can, depending on the view, the device and how many images are attached. Keep essential content in the middle of the canvas and preview the post in the composer.
Can MockupX make an X header?
Yes. The X cover preset is 1500 × 500 (3:1), and the Browser Cover template starts on it. Keep the product right of center because the profile photo covers part of the lower left.
Can I add likes or a fake post frame?
MockupX does not create fake post interfaces, and we recommend against adding invented engagement. Post the clean image and let the real post provide the context.