Export a Retina-Sharp Cover at 2x
Why a cover sized to its slot looks soft on retina, and the one-rule fix.
A cover exported at exactly its display width looks soft on a retina screen. Export it at 2x the slot it fills - a 1200-wide card leaves at 2400, a 1280-wide hero leaves at 2560 - and let the browser scale it back down. That is the whole answer; the rest is why one source pixel stretched across four turns your sharp design to mush, and how doubling barely touches the file size.
This is the single most common reason a cover ships blurry, and it gets misdiagnosed almost every time. The image looks crisp in your editor, soft once it is live, so the reflex is to blame the export quality or bump the dimensions to something huge. Neither is the problem. The problem is that the screen has more physical pixels than the file has source pixels, and it has to invent the difference.
What a retina screen is actually doing
A retina, or high-DPI, screen runs a devicePixelRatio of 2 or more. Every recent phone, most laptops, and a lot of
external monitors do this. It means the screen packs two physical pixels into every CSS pixel the browser lays out.
So when your theme reserves a 1200-pixel-wide slot for the cover, that slot is 1200 CSS pixels wide. On a 2x screen it is 2400 physical pixels wide. Hand it a file that is only 1200 pixels across and the browser has to stretch each source pixel over a 2×2 block of physical pixels. It guesses the in-between values, the edges go fuzzy, and you get the soft, slightly-melted look you have seen on a hundred blogs.
The display size never changed. The cover still measures 1200 wide on the page. It just does not have the pixels to fill a retina version of that space, so the screen pads it out with interpolation.
The fix is one rule: export at 2x the slot
Design at the logical size. Ship at double.
Whatever pixel width your theme renders the cover at, export a file that is twice as wide and twice as tall. The browser scales it back down to the slot, and now there is a real source pixel waiting behind every physical pixel on a 2x screen. The fuzz clears up.
Before
AfterA few common slots and what to leave the editor at:
| The slot displays at | Export at (2x) | Where it lands |
|---|---|---|
| 1200×630 share card | 2400×1260 | Facebook, LinkedIn, X, Slack |
| 1280×720 hero (16:9) | 2560×1440 | the image atop your post |
| 600×315 small card | 1200×630 | the practical floor below the full card |
Read it as: take the number your slot displays at, double both sides, export. The middle row is the one most blogs get wrong, because a 1280-wide hero feels big enough already on the monitor, so people leave it at 1280 and wonder why it softens. It softens because half the audience is on a 2x screen looking at a stretched copy.
If you are not sure which slot your cover even fills, the size each render expects pins down the share card and the hero before you worry about doubling either one.
Why 3x is usually a waste
If 2x fixes retina, the tempting next move is 3x for the few phones that report a devicePixelRatio of 3. Skip it for
covers.
The visible gain from 2x to 3x on a photographic cover with type over it is close to nothing at the size a feed renders it, and those 3x phones scale your 2x file perfectly well on their own. You pay real bytes for a sharpness almost no one can see. 2x is the honest ceiling for a blog cover. Reach for 3x only on tiny crisp-edged assets like a logo, where the extra resolution actually shows on those hard pixel edges; a full-bleed image gains nothing from it.
Doubling the pixels does not double the weight
The objection to exporting at 2x is always file size, and it is mostly a phantom. A cover is a photograph or a gradient under some big type, which is exactly the kind of image that compresses hard. Doubling the dimensions does not double the bytes, because most of those new pixels are predictable from their neighbors.
Pick a modern format and a sane quality and the math takes care of itself. A 2x WebP cover lands under 150 KB at a quality around 80 to 86, which is small enough that the social scraper grabs it fast and the hero does not drag your page-load score. WebP runs 25 to 34 percent smaller than JPEG at the same visible quality, so reaching for it first buys back most of what the 2x export costs you.
Export at 2x for the sharpness; reach for WebP so doubling the pixels barely moves the file.
The one thing the format choice will not do is rescue a 2x file you exported at a careless quality. That lands in compression territory rather than resolution, and keeping the cover small without softening it is its own short job once the dimensions are right.
Exporting at 2x without the soft-edges trap
Two ways to land a sharp 2x file, depending on your tool.
- If your editor has a 2x or “retina” export toggle, use it. It renders the whole design at double internally, so the type stays crisp vector-sharp instead of being a small raster blown up. This is the clean path.
- If you only have a fixed canvas, design at the doubled size from the start. Set the canvas to 2400×1260 instead of 1200×630, size your type to match, and export once. Do not export at 1200 and then upscale the saved file in another tool - that just stretches the same too-few pixels and bakes the blur in permanently.
The trap is upscaling after the fact. Enlarging a finished 1200-wide export to 2400 adds pixels but no information; the software interpolates exactly the way the browser would have, so you get a bigger file that is just as soft. The pixels have to come from the source design, not from a resize of the output. If you are building the cover from scratch, the full make-a-cover walkthrough sets the canvas and the export up the right way around.
A quick check that it worked
Open the live page on a phone, or in your browser’s responsive mode with the pixel ratio forced to 2, and look at the cover’s hard edges - the lettering, the logo, any sharp line. Crisp means the 2x file is doing its job. Soft on every edge means you are still serving a 1x file into a 2x slot, and the export is what needs fixing while the design stays as it is.
The thumbnail squint test from what makes a good cover read small catches design problems. This check catches resolution ones. A cover can pass the squint and still look soft on retina, and the cure for that is never “make the type bigger” - it is “export at 2x.”
When you want a cover that leaves the editor at 2x without a thought, open Lede - it exports a retina-sharp WebP in one click, and the gallery gives you a layout to start from so the only thing you are deciding is the words. Design at the logical size, ship it at double, and it stays sharp wherever it lands.