Improving Visual Quality on LinkedIn by Adjusting Banner Colors

The devlog-ist/landing project focuses on creating a visually appealing landing page. A recent update addressed an issue with the LinkedIn banner image where JPEG compression was causing undesirable pixelation artifacts.

The Problem

LinkedIn's recompression of JPEG images can sometimes lead to visual degradation, especially in areas with high contrast and vibrant colors. Red tones, in particular, are prone to chroma subsampling artifacts, resulting in a blocky or pixelated appearance. This was observed in the project's LinkedIn banner, specifically around the position badge and text elements.

The Solution

To mitigate this, the red tones in the banner were replaced with indigo. The text color on the coral tag was changed from white to dark. This reduces the contrast and minimizes the impact of JPEG compression artifacts.

Here's an illustrative example of how color adjustments can improve image quality:

/* Original colors (prone to artifacts) */
.badge {
  background-color: #E04545; /* Red */
}
.tag {
  color: white;
}

/* Updated colors (more compression-friendly) */
.badge {
  background-color: #242275; /* Indigo */
}
.tag {
  color: darkslategray;
}

By shifting from red to indigo and adjusting text color, the banner image is now more resilient to LinkedIn's recompression process, resulting in a cleaner, more professional look.

Key Takeaway

When designing graphics for platforms that heavily compress images, consider avoiding saturated reds and high-contrast color combinations. Subtler color palettes often yield better results after compression.