Start from how phones are actually used
A phone is usually held in one hand, viewed at a short distance, often in motion or in uneven light, and scrolled past quickly. The image may fill the screen, or it may be a small thumbnail in a feed. Either way, a viewer decides within a moment whether to look closer.
A design built on a large monitor can fail in these conditions. Fine detail disappears, small text becomes unreadable and wide compositions shrink until the subject is a speck. The fix is to design for the small screen first, then check that it still works when larger.
Choose a subject that survives shrinking
One clear subject beats many small ones. Before finalizing an image, ask what the one thing is that a viewer must see. If you cannot answer in a few words, the image probably holds too much.
- Crop closer. Tighter framing makes the subject larger relative to the screen. Wide scenes with tiny subjects lose impact on a phone.
- Simplify the background. Busy backgrounds compete with the subject. Plain or softly blurred areas help it stand out.
- Reduce the number of elements. Three items can be understood at a glance; twelve usually cannot.
Ideas from image composition apply here: place the subject deliberately and leave the edges uncluttered. Keep important content away from the outer edges, since some apps crop or overlay interface elements near the borders.
Text on small images
Text is where small-screen design most often goes wrong.
- Make it larger than feels necessary. A useful test is to view the graphic at the size it will actually appear, in a feed or on a phone, and read it without zooming. If you cannot, enlarge it.
- Use fewer words. A phone graphic is a headline, not a paragraph. Move longer explanations into the post text or the page body.
- Use a bold, clear typeface. Thin or ornate styles break up at small sizes. The article on choosing readable typefaces covers the features to look for.
- Keep strong contrast. Phones are used outdoors and at low brightness. Check pairings as described in the guide to color contrast.
- Avoid text in tiny corners. Place words where the thumb and eye naturally rest, not along the extreme edge.
Where the information matters, do not rely on text inside the image alone. Provide alternative text for people who use screen readers, and repeat essential details in the surrounding caption or page. For video, the same logic applies to on-screen text, which should stay short and be readable for long enough.
Pick a shape that fits the screen
Phones are taller than they are wide when held upright. Square and vertical images typically take up more of the screen than wide landscape ones. If your platform shows images full width, a portrait or square format often gives you more room. But no single ratio works everywhere, and platforms change their display rules, so check how your image appears in the places you publish.
One practical approach is to design a “safe area” in the middle of the frame that holds everything essential, and let the outer area carry only background. That way, if the image is cropped slightly into a different shape, nothing important is lost.
Charts, diagrams and detail
Complex visuals are especially fragile on a phone. A chart with ten lines, small labels and a legend in a corner may look fine on paper and fail on a screen. Consider these changes:
- Show fewer data series, or split one chart into several simple ones.
- Label items directly rather than through a separate legend.
- Use larger fonts for axis labels and numbers.
- Replace a dense graphic with a vertical layout that scrolls.
Principles for building clear visuals of this kind are covered in the article on designing simple charts and diagrams.
Tap targets and one-handed use
If an image includes buttons or links, make them large enough to tap comfortably and separate them from each other, so a thumb does not hit the wrong one. Common interface guidelines suggest targets of roughly 44 to 48 pixels on a side, though the exact figure depends on the system. Place the main action within easy reach of a thumb where possible, usually toward the lower part of the screen.
File size and loading
Large images load slowly on mobile connections, and readers may leave before they appear. Export at a size that matches how it will be displayed, rather than uploading an enormous original. Choosing sensible image formats and dimensions keeps pages quick without noticeably reducing quality. Test on a slow connection if you can.
A quick phone test
Before publishing:
- Open the image on a real phone, not only a resized window.
- Hold it at arm’s length and see whether you can still identify the subject and read the headline.
- Dim the screen and check again.
- Look at the thumbnail version, as it would appear in a feed.
- Rotate the phone, if the content might be viewed in both orientations.
- Ask someone else to look for three seconds and say what they remember.
Devices and apps vary widely, so treat these numbers as starting points and adjust to what you see. The most reliable habit is simple: look at your work on the smallest screen your audience is likely to use.