Tutorials Design

Why Your Graphics Look Worse After Uploading

Intermediate · ~16 min

Overview

A thumbnail that looked crisp in your editor arrives on the platform with mushy text, banded gradients, and coloured fringing around the letters. Nothing went wrong in your export. The platform re-encoded it, and the things video and image compression handles worst are exactly the things graphics are made of. This guide explains what compression actually does to designed elements and which design choices survive the trip.

What You Need

A graphic you have published that degraded visibly
The original file to compare against
Understanding of where it will be published, since platforms differ
Willingness to design around the constraint rather than fight it
An export at the platform's recommended dimensions
A test upload, which is the only reliable check

Steps

Export at the platform's target dimensions

Uploading something far larger than needed forces the platform to resample as well as re-encode, and resampling is where fine text and thin lines are lost. Match the recommended dimensions rather than assuming bigger is safer. This is the single most common cause of soft uploaded graphics.

Keep text large and reasonably heavy

Compression discards high-frequency detail, and small or thin text is high-frequency detail. Text that is comfortably large and at a medium or bold weight survives. Small light text turns to mush. This is why thumbnail text conventions favour a few very large words rather than a sentence.

Expect gradients to band, and design accordingly

Smooth gradients across large areas are among the hardest things for compression to preserve, and they emerge as visible stripes. Either avoid large subtle gradients, add a very small amount of noise to break up the banding, or use flat colour which compresses cleanly.

Avoid saturated red and fine colour detail on edges

Most codecs store colour at lower resolution than brightness, so fine colour detail degrades first. Saturated reds and high-saturation edges suffer most, producing the coloured fringing you see around bright text on dark backgrounds. Slightly desaturating and adding an outline or shadow helps considerably.

Prefer contrast in brightness over contrast in hue

Because brightness information is preserved at full resolution and colour is not, elements distinguished by light-versus-dark survive compression far better than elements distinguished only by hue. This is also, conveniently, the choice that works for colour-blind viewers.

Test by actually uploading

Platform encoders are not documented and change without notice, so the only reliable check is publishing a test, unlisted or to a private account, and looking at the result on a phone. Ten minutes of this teaches you your platform's specific behaviour better than any guidance.

Pro Tips

Match the platform's recommended dimensions exactly. Oversized uploads get resampled, and resampling is where detail dies.
A subtle noise layer over a large gradient prevents banding and is invisible at normal viewing.
Bright saturated text on a dark background is the worst case for fringing. Add an outline or shadow.
Check the result on a phone, not on your editing monitor. The phone is where your audience sees it.
Flat colour compresses cleanly and reads well small, which is why so much effective thumbnail design uses it.

Knowledge Base

What You'll Learn

This is a compression problem wearing a design problem's clothes. Below: what codecs actually throw away, and why graphics are affected more than photographs.

What Compression Actually Discards

Lossy compression works by removing information the eye is least likely to miss, and the assumptions behind that turn out to be tuned for photographs rather than for graphics.

High-frequency detail goes first. Compression divides an image into blocks and discards fine variation within them. In a photograph this removes texture nobody was examining. In a graphic, the fine variation is the content. The crisp edge of a letterform is exactly the high-frequency detail being thrown away.

Colour is stored at reduced resolution. Most codecs keep full brightness detail and half or quarter colour detail, because human vision is more sensitive to luminance. This is invisible in photographs and very visible on a hard-edged coloured graphic, where it produces fringing and smearing along edges.

Smooth gradients get quantised. Subtle tonal transitions are stored with limited precision, so a gradient that was smooth becomes a series of steps. The banding you see across large flat skies and background washes.

Why Graphics Suffer More Than Photographs

Photographs are full of noise, texture, and soft edges. Compression removing some fine detail is largely unnoticeable because there was already visual complexity there.

Designed graphics are the opposite: large areas of flat colour, hard edges, and precise geometry. There is no texture to hide artefacts in, so every block boundary and every quantisation step is plainly visible against a clean field.

Text is the extreme case. A letterform is defined entirely by the sharpness of its edge, and edge sharpness is exactly what gets removed. This is why the same compression that leaves a photograph looking fine leaves overlaid text looking soft and fringed.

The design implications follow directly: larger and heavier text, flat colour over subtle gradients, brightness contrast over hue contrast, and outlines on anything fine. These are not aesthetic preferences. They are the shapes that survive the encoder.

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: Why does my thumbnail look blurry after uploading?
A: Usually because it was uploaded at the wrong dimensions and had to be resampled, then re-encoded. Export at the platform's recommended size, and keep text large and reasonably heavy, small, thin text is precisely the high-frequency detail compression discards first.

Q: Should I upload the highest resolution possible?
A: No, match the recommended dimensions. Uploading something far larger forces the platform to resample in addition to re-encoding, and resampling is where fine detail and thin strokes are lost. Bigger is not safer here.

Q: What causes the coloured fringes around my text?
A: Chroma subsampling. Most codecs store colour at lower resolution than brightness. On hard-edged saturated graphics this produces smearing and fringing along edges, worst on saturated red. Slightly desaturating and adding an outline or shadow reduces it noticeably.

Q: How do I stop gradients from banding?
A: Add a very small amount of noise across the gradient, which breaks up the quantisation steps and is invisible at normal viewing distance. Alternatively use flat colour or a shorter gradient, large, subtle transitions across a wide area are the hardest case for any encoder.