Tutorials Design

Social Graphics: Sizes, Safe Areas, and Reusable Templates

Beginner · ~15 min

Overview

Platform dimensions change often enough that memorising them is wasted effort, and cropping differs by device even within one platform. The durable approach is to design to a safe area, keeping everything essential inside a region that survives every crop you care about, and to build templates at a few base ratios rather than one per platform. This guide covers that method, the ratios worth having, and the traps specific to banners and avatars.

What You Need

A design tool that supports artboards or multiple canvas sizes
The aspect ratio and banner safe-area tools for checking crops
Your brand kit decisions, so templates stay consistent
A list of the platforms you actually publish to, not all of them
Source assets at generous resolution, so downscaling is always an option
A test post, since previews frequently lie

Steps

Design to a safe area rather than to a platform

Decide the region of your canvas that must survive every crop, and keep all essential content (text, faces, logo) inside it. Everything outside is expendable background. This single habit makes a graphic reusable across platforms and survives platforms changing their crops, which they do.

Build at three base ratios

Landscape at 16:9, square at 1:1, and vertical at 9:16 cover the overwhelming majority of placements. Build your key graphics at these three rather than at a dozen platform-specific pixel sizes, and export from them. Adding a 4:5 portrait version covers most of the remainder for feed posts.

Treat banners as the hardest case

Channel banners are cropped most aggressively and most variably: the same image displays very differently on phone, desktop, and television. Only the central region is reliably visible everywhere. Put everything that matters there, and treat the wide edges as decorative bleed rather than usable space.

Design avatars as their own asset

An avatar is cropped to a circle and displayed very small. A shrunk version of your full logo usually fails, because detail that reads at full size disappears. Make a simplified mark (an initial, a symbol, a bold fragment) specifically for this, and check it at about thirty pixels.

Export at the platform size, not oversized

Match the recommended dimensions rather than uploading something much larger. Oversized uploads get resampled as well as re-encoded, which is where fine text and thin lines are lost. Keep the source large, but export to target.

Test with an actual post

Editor previews and published results differ, and platforms crop differently across devices. Publish an unlisted or private test and check it on a phone and a desktop before committing a template you intend to use for a year.

Pro Tips

Never put text near the edges. Every platform crops somewhere and edges are always the first casualty.
Keep a master file at generous resolution and export downward. Upscaling later is not an option.
Check the circular avatar crop specifically, square logos lose their corners.
Platform dimensions change. Safe-area thinking does not. Invest in the habit, not the pixel list.
Name exported files by ratio rather than by platform, so they stay usable when platforms rename things.

Knowledge Base

What You'll Learn

This is a reference-shaped topic where the durable knowledge is a method rather than a list. Below: why safe areas beat dimension tables, and the two placements that cause the most trouble.

Why Safe Areas Beat Dimension Tables

Lists of platform image dimensions are among the most-published and fastest-rotting content on the internet. Platforms change layouts, add placements, adjust crops for new devices, and occasionally redesign entirely, and every such change invalidates the table.

Safe-area thinking is durable because it is a property of your design rather than of the platform. If everything essential sits within a central region and the outer area is expendable, your graphic survives any reasonable crop, including ones that did not exist when you made it.

It also solves the cross-device problem, which dimension tables handle badly. The same banner displays with very different crops on a phone, a laptop, and a television. There is no single correct size. There is only a region visible in all cases.

The practical form is to mark the safe region in your template as a guide layer, and make it a rule that nothing essential leaves it. That guide is worth more than any list.

The Two Placements That Cause Most Trouble

Channel banners are the worst case. They are extremely wide, cropped differently on every device class, and frequently have interface elements overlaid on parts of them. Only a central band is reliably visible across all views. The common failure is a banner designed to look balanced on desktop whose text is entirely cropped away on mobile.

Avatars are the second. They are cropped to a circle, displayed at very small sizes, and often shown against both light and dark interfaces. A detailed logo becomes an indistinct blob. A logo with corners loses them. A logo that relies on a white background disappears in dark mode.

Both are worth treating as bespoke assets rather than as crops of something else. The rest of the placements (feed posts, stories, thumbnails) are far more forgiving and are well served by the three base ratios.

Where This Fits

This guide covers one specific part of colour and design. The wider picture, how colour relationships work on screen, why colour meaning is cultural, and building a palette in production rather than the grade, is in Color Theory for Visual Storytellers, which frames the discipline as a whole and links out to the detailed guides underneath it, including this one. If you are starting from scratch rather than solving a specific problem, read that first and come back here.

FAQ

Q: What size should I make my social graphics?
A: Build at three base ratios (16:9 landscape, 1:1 square, and 9:16 vertical) and export to the recommended dimensions of whichever platform you are posting to. Chasing per-platform pixel sizes is wasted effort because they change. The ratios and a safe-area habit do not.

Q: Why does my banner look wrong on mobile?
A: Because banners crop very differently across devices, and only a central band is reliably visible everywhere. A banner composed to look balanced on desktop typically has its text cropped away on a phone. Put everything essential in the centre and treat the wide edges as decorative bleed.

Q: Should I use the same image for my avatar and my logo?
A: Usually not. Avatars are circular and tiny, so detail that reads at full logo size disappears and corners get cut off. Make a simplified mark specifically for avatar use (an initial, a symbol, or a bold fragment of the logo) and check it at around thirty pixels.

Q: How do I stop text being cropped?
A: Keep it well inside a defined safe area rather than near the edges, and mark that area as a guide layer in your template so the rule is visible while you work. Every platform crops somewhere, and edges are always the first thing lost.