A client sent me a photo of their trade show banner. The QR code on it looked like a watercolor painting. Soft, blurry, bleeding at the edges. Unscannable from three feet.
They'd downloaded the code as a JPG at 200x200 pixels and let the printer blow it up to 18 inches.
The code was fine. The format was wrong. This is a five-minute problem to avoid and a thousand-dollar problem to fix after the banner is printed.
The Three Formats You'll See
QR codes are images, and images come in formats. The three you'll encounter are PNG, SVG, and JPG. They are not interchangeable. Picking the right one is the difference between a code that scans and a code that smudges.
PNG: The Workhorse for Screens
PNG is a raster format. That means it stores the image as a fixed grid of pixels. A 400x400 PNG has exactly 160,000 pixels, and if you display it at 800x800, each pixel becomes a 2x2 block. It gets blocky but it stays sharp at the edges, because PNG supports lossless compression and crisp pixel boundaries.
PNG also supports transparency, which matters if you want the code to float over a colored background or a photograph.
Use PNG for: anything on a screen. Website images, email signatures, social posts, digital menus, app icons. Pick a resolution at least 2x the largest size you'll display, so a code shown at 200px wide should be exported at 400px or more.
Don't use PNG for: large-format print. A PNG big enough for a billboard is a gigantic file, and it's still a fixed grid, so any scaling softens it. For print, use SVG.
SVG: The One for Print
SVG is a vector format. It doesn't store pixels. It stores a description of the shapes, "draw a 25x25 grid of squares, fill these specific ones black." The renderer (a browser, a printer's RIP) draws the squares at whatever size you ask. There is no "blowing up." The code is crisp at 1 inch or 100 feet.
This is the format for any commercial print. Business cards, posters, packaging, banners, billboards. The printer places the SVG on the die line, and the modules come out razor-sharp at any size. The file is also tiny, a few kilobytes, because it's just a description.
Use SVG for: everything that goes to a printer. Anything that might be displayed at multiple sizes. Anything where you want the option to scale later without re-exporting.
Don't use SVG for: situations where the destination only accepts raster. Some older email clients and CMS platforms won't render SVG inline. In those cases, export a PNG from the SVG at the size you need.
JPG: The One to Avoid for QR Codes
JPG is a raster format like PNG, but it uses lossy compression designed for photographs. The compression creates artifacts, soft halos around high-contrast edges. QR codes are nothing but high-contrast edges. So JPG compression attacks exactly the part of a QR code that scanners need to be crisp.
A QR code saved as JPG at low quality has gray fringes around every black module. The scanner sees a fuzzy edge instead of a clean one and may fail. At high quality, JPG can be acceptable, but it offers no advantage over PNG for a QR code: no transparency, larger file, and the constant risk of compression artifacts.
Use JPG for: photographic backgrounds that include a QR code, where you need the small file size of JPG for the photo. Even then, prefer PNG.
Don't use JPG for: the QR code itself. Ever. If your only option is JPG, use the highest quality setting and the largest dimensions you'll ever need, and check the result for fringing.
A Real Example: The Trade Show Banner
Back to the client. We re-exported the code as SVG. The printer placed it on the banner artwork. The 18-inch code came out with edges you could measure with a ruler. It scanned from across the booth.
The whole fix took ten minutes and one format change. The original mistake cost a printed banner. The lesson is: for print, always SVG. Our QR code generator exports SVG by default for exactly this reason.
Resolution for Raster When You Must
If you're forced to use PNG for print (some print shops only accept raster), export at the final printed size at 300 DPI minimum, 600 DPI if the code is small (under 1 inch). The math: a 2-inch code at 300 DPI is 600 pixels wide. A 0.5-inch code at 600 DPI is 300 pixels. Small codes need high DPI because each module must be several pixels across to print cleanly.
For screens, the rule is simpler: export at 2x the display size. A code shown at 250px exports at 500px. This covers retina displays without bloating the file.
Transparent Backgrounds and Formats
If you want the code to float over a background, you need transparency. PNG and SVG both support alpha transparency. JPG does not. So a transparent JPG is impossible; if someone hands you a "transparent JPG," it's actually a PNG or a WebP with the wrong extension.
For a transparent code over a photo on a website, use PNG. For a transparent code in print artwork, use SVG. For more on placing transparent codes over images, see our guide to branded QR codes with logos and colors.
The Quick Decision
- On a screen? **PNG.** - Going to a printer? **SVG.** - A photograph with a code in the corner? **PNG** (or JPG for the photo, with the code as a separate PNG layer). - Someone insists on JPG only? **Highest quality, largest size, check for fringing.**
That's the whole decision tree. Get the format right and the code scans. Get it wrong and you get a watercolor.
