Improving LinkedIn Banner Appearance: Removing Box-Shadow Artifacts
Addressing Compression Artifacts on LinkedIn Banners
When creating visual assets for LinkedIn, especially banners, it's important to consider how LinkedIn's image compression might affect the final appearance. This post details how we addressed an issue where box-shadows on our landing page banners were causing undesirable compression artifacts after being uploaded to LinkedIn.
The project is the landing page for devlog-ist, which is a project focused on developer logs. The specific issue we tackled involved visual distortions appearing around text elements within the banner images, specifically the position badge, tech tags, and call-to-action button.
The Problem: Box-Shadows and JPEG Compression
LinkedIn's JPEG compression algorithm can sometimes introduce visual artifacts, particularly around areas with subtle color variations like those created by box-shadows. The shadows, intended to add depth and visual interest, were instead creating "ghost" or "duplicate" text, making the banner look unprofessional.
The Solution: Flat Styles and Thickened Accents
To mitigate these compression artifacts, we removed the box-shadows entirely and adopted a flat design approach. This meant removing the subtle shading effects and relying on solid colors and clear typography to convey the visual message. We also thickened the corner accents of the banner to 10px. This ensured that the accents would remain visible and undistorted even after compression.
Here's a simplified example of how we transitioned from a shadowed button style to a flat style:
/* Before: Box-shadow creates artifacts */
.cta-button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
/* After: Flat style avoids artifacts */
.cta-button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
In this example, the box-shadow property is removed from the .cta-button style, resulting in a cleaner, more compression-friendly appearance.
The Result: Cleaner Banners, Reduced Distortion
By removing the box-shadows and using solid, flat styles, we were able to significantly reduce the compression artifacts on our LinkedIn banners. The text elements now appear crisp and clear, even after LinkedIn's JPEG compression. Thickening corner accents also ensured they remained visually impactful.
Key Takeaway
When designing visual assets for platforms that use lossy compression algorithms like JPEG, it's crucial to avoid subtle effects like box-shadows that can introduce unwanted artifacts. Opting for flat designs and solid colors can help ensure a cleaner, more professional appearance. Next time you are designing banner ads, try testing different visual styles to see what looks best after compression.
