Improving LinkedIn Banner Compression in Landing Pages

The Problem

LinkedIn's aggressive JPEG compression was causing noticeable visual artifacts in the banners of our landing pages, specifically around text elements in the position badge, tech tags, and call-to-action buttons. The solid box-shadows were exacerbating the issue, resulting in a ghosting or duplication effect that degraded the overall visual quality.

The Approach

To mitigate this, we adopted a strategy focused on simplifying the visual elements and optimizing for compression.

Removing Box-Shadows

The primary step was to eliminate the box-shadows from the problematic elements. Box-shadows, while adding depth, introduce subtle color variations that are easily distorted by JPEG compression. We replaced them with flat styles for a cleaner look.

Thickening Corner Accents

To compensate for the loss of visual interest from the removed box-shadows, we increased the thickness of the corner accents from 5px to 10px. This ensured that the accents would remain distinct and recognizable even after compression.

Flat Styles

By using flat styles and removing shadows we ensured a simpler image which compresses better and reduces artifacts.

.banner-badge {
  /* Removed box-shadow: box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); */
  border: none; /* Using flat style instead */
}

.banner-accent {
  border-width: 10px; /* Increased from 5px */
}

This CSS snippet illustrates the removal of the box-shadow property and the increase in border width for the corner accents.

The Result

By removing box-shadows, using flat styles, and increasing the corner accent thickness, we were able to significantly reduce the compression artifacts on LinkedIn. The banners now appear cleaner and more professional, maintaining visual integrity even after LinkedIn's image processing.

Key Insight

Simple design choices can have a significant impact on how images are rendered after compression. Avoiding subtle effects like box-shadows and opting for bolder, simpler styles can improve the perceived quality of visual elements on platforms with aggressive compression algorithms.