Improving Diagram Rendering for Social Media

Introduction

When creating diagrams for technical content, especially for sharing on platforms like LinkedIn, image compression can introduce unwanted artifacts. Red tones, in particular, are prone to pixelation due to chroma subsampling during JPEG compression. This post discusses a simple fix to improve the visual quality of diagrams shared online.

The Problem

Diagrams with red borders or fills, especially those with white text on a red background, often suffer from JPEG compression artifacts when recompressed by social media platforms. This results in a pixelated or blurry appearance, degrading the overall visual quality and readability of the diagram. The issue stems from how JPEG handles color information, giving less precision to color than brightness.

The Solution: Color Palette Adjustment

To mitigate these compression artifacts, replace problematic red tones with alternative colors less susceptible to chroma subsampling. In this case, the original color #E04545 was swapped for teal (#4ECDC4) and indigo (#242275). These colors render more cleanly after JPEG compression, preserving the clarity of the diagram.

Here's a simple example of how the color change can be reflected in a Mermaid diagram:

graph LR
    A["Original (Red)"] --> B[Replace with Teal]
    C[Replace with Indigo]
    style A fill:#E04545,stroke:#E04545,stroke-width:2px
    style B fill:#4ECDC4,stroke:#4ECDC4,stroke-width:2px
    style C fill:#242275,stroke:#242275,stroke-width:2px

This snippet illustrates how to modify the fill and stroke attributes in a Mermaid diagram to use the new color palette.

Benefits

By making this simple adjustment, diagrams maintain their visual integrity even after being recompressed by social media platforms. This leads to:

• Improved readability
• More professional appearance
• Reduced visual noise

Key Insight

Small changes in color selection can significantly impact the perceived quality of visual content shared online. Avoiding colors prone to compression artifacts ensures diagrams remain clear and effective, even after recompression.