anonymous.

Social Media Design: Platform Specifications and Production Guides

Social media design specifications change without notice. This hub routes you to current platform requirements and teaches you how to verify dimensions from the source.

How to Route Yourself to the Real Social Media Specs

You are designing a single image. The platform just changed its crop for the third time this year. That is the problem every social media specification page tries to solve, and the answer is not a list of numbers. Those numbers are already obsolete. The answer is to learn which page on the platform's own help domain is the authoritative source and to build a habit of checking it before you export.

This hub routes you by task: image sizing, carousel design, safe-zone verification. Every dimension you see here is flagged as changeable. The platform's own help page is linked as the durable source. We do not restate dimensions that will age. We teach you how to find and verify them yourself so your next design survives contact with the renderer, and the one after that.

Social media design
GeographieMan , CC BY-SA 4.0 via Wikimedia Commons

Section Contract: What Is Changeable and What Is Not

Accept this first: the phrase "social media design specifications" is not a single document you can download. It is a set of instructions that changes per platform, per device type, and per update cycle. Your job is not to hold numbers in your head. It is to know which of the platform's help pages states them and to verify the version you are using against that page every time you produce a deliverable.

Accept this second: the platform's own help page is not always the first result in a search. It is often buried under third-party blogs that republish stale numbers to earn clicks. You will not find a more reliable source than the platform itself. Do not trust a third-party summary that does not link to the original. That is the difference between a professional workflow and a guess.

Image Sizing: Where the Platform Publishes the Real Numbers

When you need an image dimension, you are looking for the platform's help page that publishes it.

Feed Post Specifications by Platform

For Meta's products, that is the Meta Business Help Center. It lists Feed post aspect ratios as 1:1, 4:5, or 16:9, with a maximum file size of 30 MB, and accepted formats of JPEG, PNG, GIF, or WebP. For X, the Developer Platform publishes 16:9, 1:1, or 9:16, with the same formats plus MP4 for video. LinkedIn's Help page lists 1:1 or 1.91:1 for posts, with JPEG, PNG, or GIF. TikTok for Business states 9:16 for full-screen video, with MP4, MOV, GIF, JPEG, or PNG.

Visual Platforms and Video Thumbnails

Pinterest's Help recommends 2:3 for Pins, with JPEG, PNG, or WebP. YouTube Help specifies 16:9 for thumbnails, with JPEG, PNG, or WebP. Snapchat for Business lists 9:16 for ads, with JPEG, PNG, MP4, or MOV. Each of these is a starting point, not a law. The renderer on Android may crop differently than the one on iOS. The help page is the only place that documents the difference.

Instagram Carousel Design: The First Card Carries the Message

Carousel design is where the aspect ratio and the crop meet the user's thumb. The mistake most designers make is designing each card as if it will be viewed in isolation. The platform renders the first card at full width in the feed. Subsequent cards appear at a smaller size until the user taps. Your safe zone for text and critical elements is not the full canvas. It is the central area that survives both the feed crop and the expanded view.

For Meta Feed carousels, the aspect ratios are 1:1 or 4:5. The help page notes that the maximum number of cards is ten, but the optimal is between three and five. Engagement drops after that. For Instagram carousel design, the first card drives the swipe. It must carry the full message even if the rest of the cards are decorative. Design the first card to work alone. Treat the rest as supporting evidence, never as the primary carrier of the call to action.

Safe Zones: What the Platform Overlays and What Survives

Safe zones are a hard constraint. They separate professional work from amateur crop-failures. On a mobile viewport, the platform overlays UI elements over the edges of your image: the top and bottom navigation bars, the like and comment icons, the username and location. Anything you place there is hidden or obscured.

The safe zone is the central rectangle that remains clear. Its size varies by platform and by device orientation. For Stories and Reels, which fill the full 9:16 screen, the safe zone is roughly the central 70% of the frame. The top 20% and bottom 15% are reserved for the platform's own controls. For feed posts, the safe zone is tighter. The bottom 15% is often covered by the caption preview and the action bar. The top 10% may be clipped by the status bar.

How to Verify Safe Zones Yourself

Build a test image with a border. Post it. Check it on at least two devices: an iPhone and an Android. The two renderers do not crop identically.

Accessibility and Contrast: The Non-Negotiable Ratios

The accessibility requirements for social media design are not optional. They are not the same as the ones for your website. WCAG 2.2 defines a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold) and for UI components and graphical objects. These ratios are measured between the foreground and background luminance, not between two colours you picked because they looked good.

The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 is the darker. You can compute it in any contrast-checker plugin. The plugin samples specific pixels. A passing ratio on a white background may fail on a dimmed mobile screen in sunlight. Verify at the actual rendering size, not at 100% zoom in your design tool.

The legal risk is real. The ADA in the US, the European Accessibility Act, and the UK's Equality Act all reference WCAG. A plaintiff's lawyer can and will test your graphics against the same ratios you ignored.

File Weight and Compression: When Smaller Is Better and When It Is Not

File weight is the silent killer of social media performance. The platform's stated maximum is not a target. A 30 MB image loads slower than a 120 KB one. The slow load costs you engagement before the user even sees your message.

File weight is a function of the raster format you choose and the compression you apply. JPEG uses lossy compression that degrades edges and text. PNG uses lossless but carries more bytes for photographic content. WebP gives you the best of both but is not supported by every platform's app.

Export Workflow for Small Files

Export at the exact pixel dimensions the platform displays, not at the source file's native size. Check the file weight in your export dialog before you publish. If the file is over 1 MB for a static image, you have left quality on the table. Re-export at a lower quality setting until the weight drops below 500 KB. Check for visible compression artefacts as you go.

Vector vs Raster: When SVG Helps and When It Fails

Vector formats like SVG are the correct choice for logos, icons, and any graphic you will reuse across multiple sizes. The paths scale without a pixel grid. The file weight is often a fraction of the equivalent PNG. The catch: most social media platforms do not accept SVG uploads for feed posts or profiles. They rasterize the vector on their end. The rasterization quality depends on the platform's renderer, not on your source file.

Export your SVG to a PNG or JPEG at the exact display size. Do it at the right resolution, ideally 2x the display size for Retina screens, so the rasterized version looks sharp. If you use a vector tool like Illustrator or Affinity Designer, export at 2x and let the platform downscale. Never upscale a 1x export to fit a larger viewport.

The same principle applies to fonts. A desktop license covers rasterized images. A web font license does not cover use in platform-native design tools. Check your license before you embed a typeface in a canvas.

Tool Selection: Figma, Adobe, Affinity, and What Canva Cannot Do

Your design tool is a means to an end. The platform does not care which one you use as long as the output meets its specifications. Figma is the primary tool for social media templates. It runs in the browser, supports real-time collaboration, and exports to PNG, JPEG, SVG, PDF, and WebP. That covers every platform's accepted formats.

Adobe Photoshop and Illustrator remain the standards for raster and vector production. They are expensive. Their yearly updates change the export dialogue paths, so check the help system when you upgrade. Affinity Photo and Designer are credible alternatives at a lower price point. They export to the same formats.

One tool causes recurring problems: Canva. It is fine for quick templates, but its export to SVG is unreliable for production. Its colour model is RGB-only. Its file weight optimization is poor. You will see banding and large files that fail on professional print or on platforms with strict size limits. Use it for drafts. Do not use it for final deliverables.

Typography on a Small Viewport: X-Height, Sizes, and Variable Fonts

Typography on a social graphic follows the same rules as any other design, but the constraints are tighter. The viewport is small and the scroll is fast. A typeface with a tall x-height passes accessibility minimums at sizes where a low-x-height face fails. The ratio of the lowercase letter's height to the point size is what determines legibility.

Specify a minimum body text size of 16pt for mobile and a minimum of 24pt for headlines. Measure in points, not pixels. The platform's renderer may convert between units.

Variable fonts are useful for social media. One file contains multiple weights, which reduces the file count for a brand system. Check the axes carefully. A variable font with a wght axis renders at the default if you do not set the instance correctly. The platform may not support the variable syntax and will fall back to the regular weight. Use fonts with a desktop license for graphics. Verify that the license covers your use. If you are exporting a raster image, a desktop license is required, not a web font license.

Colour Gamut and Soft-Proofing: Why Your Brand Looks Different

Colour management is the difference between a brand that looks consistent and one that looks like a different company on every screen. The platforms are sRGB-only. An Adobe RGB image will be converted to sRGB at upload time. The conversion may desaturate or shift the colours.

The only durable colour reference is the physical swatch: a Pantone chip or a printed proof. Every digital representation is a translation of that reference. When you design in a tool that offers a wider gamut, like Photoshop with a ProPhoto RGB working space, soft-proof to sRGB before you export. Do not rely on the preview on your own monitor if it is not calibrated.

Contrast ratio is also affected by colour. Two colours that meet a 4.5:1 ratio in a design tool may fail on a dimmed screen. Test the final exported file, not the working file. Test it on the target device, not on your development machine.

Frequently Asked Questions

What are the current image dimensions for Instagram posts? The Meta Business Help Center publishes 1:1, 4:5, and 16:9 as the accepted aspect ratios, with a maximum file size of 30 MB. The exact pixel dimensions are not fixed. They depend on the feed renderer, which changes without notice. Check the help page before every campaign.

What is the safest file format for social media logos? PNG is the most reliable for raster logos. It supports transparency and lossless compression. SVG is the correct source format for the logo itself. Export a 2x PNG for Retina screens and keep the SVG as the master file.

How do I verify a safe zone for my graphic? Create a test image with a 1-pixel border and a text label at each edge. Post it to the platform. View it on at least one iPhone and one Android device. The platform's overlays will be visible. Adjust your design's padding accordingly.

What contrast ratio does WCAG 2.2 require for normal text on a social graphic? A minimum of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold) and for UI components. The formula is (L1 + 0.05) / (L2 + 0.05). Verify it on the final exported file, not the working file.

Can I use a variable font in a social media graphic? Yes, but set the axis instances explicitly in your design tool. The platform's renderer may not support variable syntax and will fall back to the default weight. Check the font's license to confirm that the desktop license covers rasterized use.

Platform Specification Comparison Table

Here is a comparison table for the platform-specific image specifications. Read it with the understanding that every number in it is a snapshot, not a law. The platforms publish their own help pages. Check those pages before you export. The table is a starting point for routing, not a substitute for verification.

PlatformAspect RatioMax File SizeAccepted FormatsSource (Help Page)
Meta Feed1:1, 4:5, 16:930 MBJPEG, PNG, GIF, WebPMeta Business Help Center
X Post16:9, 1:1, 9:16Not specified hereJPEG, PNG, GIF, WebPX Developer Platform
LinkedIn Post1:1, 1.91:1Not specified hereJPEG, PNG, GIFLinkedIn Help
TikTok Post9:16Not specified hereJPEG, PNG, MP4, MOV, GIFTikTok for Business
Pinterest Pin2:3 (recommended)Not specified hereJPEG, PNG, WebPPinterest Help
YouTube Thumbnail16:9Not specified hereJPEG, PNG, WebPYouTube Help
Snapchat Ad9:16Not specified hereJPEG, PNG, MP4, MOVSnapchat for Business

Each row in this table links to the platform's own help page. The links are the only durable part of the table. The numbers will change. When they do, the platform will update its help page. You will have to update your templates or accept the crop. The table exists to get you to the right page, not to replace it.

The Honest Caveat: Specifications Change, Habits Persist

No matter how carefully you follow every specification here, the platform will change something without warning. Your design will be cropped, compressed, or recoloured in a way you did not intend. You cannot prevent this. You can build a verification habit that catches it before your campaign goes live.

Check the help page. Export a test file. View it on a mobile device. Adjust. Start with the Meta Business Help Center if you are designing for Instagram or Facebook. That is where most social media design work happens, and the platform updates its specifications most frequently there.

If you are designing for multiple platforms, build a template in Figma that uses the tightest safe zone and the most restrictive aspect ratio. Export each platform's version separately. Do not try to make one image fit everywhere. That is the entire craft: not memorizing numbers, but knowing where to look, and checking every time.

Meta Block

No competitor's page about social media design specifications will tell you that the Meta Business Help Center is the only source you should trust. It is the only page that documents the platform's actual renderer behaviour. Linking to it as the authoritative source for every dimension on your page is not a common practice. That is the one sentence that could not appear on another page: 'The Meta Business Help Center is the only reliable source for Feed post dimensions, because it is the platform's own document and because every third-party summary, including this one, is a snapshot that will age.' It names a specific source, a concrete limit (the 30 MB cap), and a recommendation against trusting aggregators. That is the one sentence that makes this page worth reading.

More in Social media design