🎨

Why your logo should be PNG, not JPG

If your logo is saved as JPG, it's almost certainly hurting your brand. Here's what goes wrong and how to fix it in five minutes.

· 6min read

Your logo is the single most-reused image in your business. It shows up on your website, in your email signatures, on invoices, in presentations, on social media, on printed materials, and embedded in dozens of documents. If it’s saved as a JPG, every single one of those uses is slightly degraded — and some are badly broken.

The core problem

A logo is not a photograph. It’s usually a graphic composed of flat colours, sharp edges, and sometimes text — the exact things JPG was designed to handle badly.

JPG compression actively damages sharp edges (the outline of a letter or a logo shape), areas of uniform colour (the background of a roundel or badge), and text rendered directly in the image (introduces “ringing” around letters).

And JPG simply cannot do transparent backgrounds — which is the single biggest reason logos should be PNG.

The transparency problem

Look at any website header that places a logo on a non-white background — a coloured strip, a photograph, a gradient. The logo needs to sit on that background cleanly, with no white rectangle around it. This requires transparency.

JPG doesn’t support transparency. If you save a logo as JPG, every transparent pixel is converted to solid white (or whichever fill colour is set). That white rectangle shows up everywhere the logo isn’t placed on pure white.

The usual consequences: your logo on a dark navbar shows a white box around the logo, screaming at the user. Your logo over a hero photograph — same white box. Your logo in dark mode — still that white box. Your logo in an email header with a branded colour — rectangle of shame.

PNG supports a full alpha channel, which means every pixel can be fully transparent, partially transparent, or fully opaque. The logo sits naturally on any background.

The “ringing” artefact around text

JPG compresses images by dividing them into 8×8 pixel blocks and approximating each block with a mathematical curve. This works beautifully for the gradual transitions of a photograph. It works terribly for the hard transition between black text and a white background.

Zoom into a logo text saved as JPG at any typical web quality (60-85%) and you’ll see a halo of faint coloured speckles around each letter, softened edges where they should be crisp, and subtle discolouration in what should be solid background. These artefacts are worst at the exact spots the eye is drawn to — the letterforms themselves. A PNG saves the same image pixel-for-pixel, no artefacts, sharp edges preserved.

Generation loss: every save makes it worse

Suppose you save your logo as JPG. Then a colleague opens it, resizes it, and saves again. Then it gets embedded in a PowerPoint and exported. Then someone screenshots the PowerPoint, crops it, and re-saves it.

Each of those saves is a lossy compression step. JPG quality degrades every time — this is called generation loss. The end result after a handful of saves looks noticeably worse than the source, with blurred edges and accumulated compression noise.

PNG has no generation loss. Save a PNG a thousand times, reopen it, save again — the file is bit-for-bit identical every time. Your logo stays crisp no matter how many hands it passes through.

Side-by-side: a real-world scenario

Imagine a logo: a navy-blue shield with “ACME” in white letters, sitting on a transparent background. Here’s what happens when it’s saved each way and used in typical scenarios:

ScenarioLogo as JPGLogo as PNG
On your white website headerLooks fine (JPG artefacts are subtle)Looks fine, identical to source
On a dark-blue email bannerWhite rectangle around the shield — looks brokenSits naturally on blue
Over a hero photographWhite rectangle blocks the photo behindShield floats cleanly on the photo
After 5 re-saves (team edits)Visible blur and ringing around “ACME” textPixel-identical to original
Printed on coloured paperWhite box shows, especially noticeableShield prints with ink only where drawn
Embedded in dark-mode PDFWhite rectangle visible against dark pageInvisible background
At 4× zoom in a slide deckBlocky artefacts visible around edgesEdges stay sharp

File size — is PNG really bigger?

This is the usual objection: “but PNG files are so much larger.” For a logo, that’s almost never true.

A logo typically has few distinct colours (maybe 2-5), large areas of flat colour, and sharp edges and simple shapes. This is exactly what PNG’s compression is good at. A typical 600×600 logo saves at:

  • JPG (quality 85): 30-80 KB
  • PNG (24-bit + alpha): 15-60 KB
  • PNG-8 (indexed, for logos with ≤256 colours): 5-20 KB

For logos with simple colour palettes, PNG is often smaller than the JPG equivalent. And PNG-8 (indexed colour) can be astonishingly small.

Photographs are where JPG wins on size. Logos are where PNG wins on both size and quality.

But my logo is really SVG, right?

For web use, yes — SVG (Scalable Vector Graphics) is technically the best format: infinitely scalable, tiny file size, perfectly crisp at any resolution. If you can get an SVG from your designer, use it.

However, SVG has limits. Email clients still don’t render SVG reliably. Office documents have inconsistent SVG support. Social media platforms mostly reject SVG. Print workflows often expect raster files.

PNG is the universal fallback. For anywhere SVG doesn’t work, PNG is the next best option — and you should have it at several standard resolutions (400×400, 800×800, 1600×1600) for different use cases.

Fixing it: the five-minute upgrade

If you’ve been using a JPG logo:

  1. Find the original source — a Photoshop file, Illustrator file, or high-resolution master. This gives you back the transparency information.
  2. If you don’t have the source — your JPG has already baked the white background into every pixel where the logo isn’t. You’ll need to either remove the background manually (tedious) or re-create the logo. Your designer can usually do this quickly from a decent JPG.
  3. Export as PNG at least 2× the largest size you’ll use it at. If it’ll appear 200 px wide on your website, export at 400 px minimum to look sharp on high-density displays.
  4. Replace everywhere. Update website, email signatures, document templates, and share the new file with the team.

If you just need a quick JPG→PNG conversion as a starting point — say, to hand to a designer for background removal — the JPG to PNG converter does it in your browser in seconds. Nothing is uploaded; your logo stays private.


A JPG logo is a branding bug. It adds ugly rectangles where your logo should blend in, softens the edges that make your brand recognisable, and gets progressively worse every time it’s saved. PNG fixes all of that — usually at a smaller file size — and takes about five minutes to upgrade. If you only change one thing about your brand’s file hygiene this year, make it this one.