ottercraft.dev

Guide · OtterQR

PNG, SVG or JPG: which QR code file to download

Four buttons, one answer most of the time. Here is what each file is good for, and the one to avoid.

Open OtterQR →

SVG, for anything printed

An SVG is not a picture of the code, it is the instructions for drawing it. It stays perfectly sharp whether it goes on a business card or the side of a building, the file is small, and a designer can drop it into InDesign or Illustrator and recolour it without asking you for a new one. The logo you added is embedded inside the file, so there is nothing to link to and nothing to lose. Send this one to the printer.

PNG, for screens and documents

The one to pick for a website, a slide, an email or a Word document, because everything accepts it. PNG keeps hard edges clean and supports transparency, so a code with the background turned off drops onto a coloured slide with no white box around it. Choose the download size to suit: 512 pixels is plenty on screen, 1024 is a safe default, 2048 if it is going into a large document.

WebP, when the file size matters

Same idea as PNG, usually a smaller file, and supported by every current browser. Worth it on a page that has a lot of codes on it. Older software sometimes refuses to open one, so it is not the file to email to someone.

JPG, only when something insists

JPG was designed for photographs. Its compression works by blurring detail that eyes do not miss, which is exactly the wrong thing to do to a grid of hard black and white edges: it leaves faint smears around every cell. It also has no transparency, so a code with the background turned off comes out on white. Some upload forms accept nothing else, and for those it works. Otherwise take the PNG.

About transparency

Turning the background off gives you a code with nothing behind it, which then sits on whatever colour it lands on. That is useful, and it is also the easy way to end up with an unreadable code: a dark code on a dark slide disappears. If you use a transparent PNG, check the contrast wherever you place it. A JPG cannot be transparent at all, and paints white behind the code instead.

Things worth knowing

Related