Optimizing LinkedIn Banner Generation to Avoid Recompression Artifacts

When creating images for social media, especially for professional platforms like LinkedIn, image quality is paramount. Recompression artifacts can significantly degrade the visual appeal of banners, leading to a less professional look. Here's how we tackled this issue in the devlog-ist/landing project, which, among other things, generates social media banners. The Problem Our initial approach involved rendering LinkedIn banners at a 2x deviceScaleFactor, resulting in a 2160x2700 PNG image. While this seemed like a good idea to ensure high resolution, LinkedIn's processing pipeline introduced an unwanted side effect. Before applying JPEG compression, LinkedIn downscaled the image. This resizing step, followed by compression, introduced noticeable pixelation and artifacts, diminishing the banner's visual quality. The Solution The key insight was to match the exact dimensions that LinkedIn expects for its banners: 1080x1350 pixels. By rendering the image at this native resolution, we eli