Why your link preview turns to mush on LinkedIn
We built social cards for 2 of our sites. Dark background, subtle near-black gradient, clean light type. The source PNGs were pin sharp at 1200 by 630.
Shared on LinkedIn, they looked like a photo of a screen taken through a screen door. Visible bands across the background, fuzz around every letter.
The PNG was never the problem. LinkedIn and Facebook re-encode every preview image to JPEG on their own servers, and that re-encode decides your image quality, not the file you uploaded.
Why dark gradients die
JPEG compresses by discarding detail it bets your eye will not miss. On a smooth dark gradient, that bet fails in the ugliest way: the gentle slope from one near-black to another gets rounded into a handful of flat steps, and you see every one of them.
Fine light text on that dark field picks up compression fuzz around the edges. JPEG needs texture the way paint needs tooth. Give it a smooth glossy surface and it slides.
The proof was sitting right next to the failures: a light-background card we made the same week came through the same re-encode looking untouched. Light, busy backgrounds survive. Big flat dark fields do not.
The fix is a photograph
We rebuilt both cards as text composited over a photographic background from each site's own hero imagery, with a dark scrim behind the text for legibility. Natural photo grain gives the encoder real detail everywhere, so there are no flat fields left to band. Same headline, same brand, and the re-encoded result reads clean on every platform we shared it to.
The ironic part: the banding card came out of a fancy dynamic image generator drawing gradients at request time. The card that survives is a static PNG we composited once. In Next.js that is as simple as dropping opengraph-image.png next to your layout, and the framework wires the meta tags for you.
The trap after the fix
The platforms cache preview images hard. Ship a better card and your links keep showing the old mush for days or weeks. Force a re-scrape in each platform's own tool (LinkedIn Post Inspector, Facebook Sharing Debugger) or you will conclude the fix did not work when it worked fine.
Short version: design link cards for the JPEG they will become, not the PNG you upload. A photo with a scrim beats a gradient every time.