How to add a QR code to an image or photo

Sticking a QR on top of a photo or flyer sounds trivial but fails more often than expected: the client prints it, puts it in the window, and nobody scans. Usually it's size, contrast, or position over the background image. This guide covers all three problems and how to avoid them without opening Photoshop.

Quick answer

• Generate the QR at QRcito in SVG format (vector, no quality loss when scaling). If PNG is your only option, minimum 1500 px.
• Place the QR over a uniform, light area of the image, ideally with a white square behind it (quiet zone).
• Minimum QR size in final printed image: 2.5 cm × 2.5 cm. For a large poster: 1/10 rule (scanning distance divided by 10).
• Valid tools: Canva, Figma, Photoshop, GIMP, Photopea (free, in-browser), even PowerPoint or Keynote.
• Before printing or publishing, scan from the final image with two different phones. If it takes more than 2 seconds, something's off.

Three mistakes that kill your QR on a photo

1. No quiet zone (white margin)

The QR needs a white margin of at least 4 modules around it. Without that gap, the reader can't find the pattern's edges.

Fix: add a white rectangle behind the QR, slightly larger (between 8% and 15% bigger per side). In Canva or Figma: White background → QR on top.

2. QR over a busy background

If you put the QR on a photo with lots of colors (cloudy sky, patterned clothing, foliage), even with quiet zone the eye gets confused and so does the camera: local contrast is low.

Fix: find a uniform area of the image. Or add a semi-transparent white/dark box (depending on QR contrast) behind that isolates the QR area visually.

3. Insufficient size

This is the most common mistake. The rule:

Expected scanning distance	Minimum QR size
Phone in hand (15–25 cm)	2.5 cm × 2.5 cm
Shop window (50–80 cm)	5 cm × 5 cm
A4 poster at 1 m	7 cm × 7 cm
A3 poster / counter at 1.5 m	10 cm × 10 cm
Billboard at 3 m	30 cm × 30 cm
Outdoor sign at 5 m	50 cm × 50 cm

For your specific case, check the complete minimum size guide.

How to do it, step by step

Option 1: Canva (easiest)

1. Generate the QR at QRcito. Download as PNG in high size (1000 px or more).
2. In Canva, open your design (flyer, Instagram post, poster, whatever).
3. Upload the PNG: Upload → Upload files.
4. Drag it into your design.
5. Resize as needed (no distortion, keep 1:1 aspect ratio).
6. If the background behind isn't uniform, add a white square behind (Elements → Square → White color) and place it directly under the QR.

Option 2: Figma

1. Download the QR from QRcito as SVG (vector, scales perfectly).
2. In Figma, drag the SVG into your design frame.
3. Scale holding Shift to preserve aspect ratio.
4. If you need white background: draw a white Rectangle behind, group.

Figma's advantage over Canva: SVG doesn't lose sharpness when scaled.

Option 3: Photoshop / GIMP / Photopea (free, in browser)

1. Open your base photo/poster.
2. File → Place (Photoshop) or File → Open as Layers (GIMP).
3. Select the QR (SVG or PNG).
4. Scale it. If SVG, scales without quality loss.
5. If you scale a low PNG to a large size, it'll look pixelated. Go back to QRcito and download at higher resolution.
6. Flatten and export.

Option 4: PowerPoint / Keynote (yes, it works)

If you need a quick internal flyer or presentation:

1. Insert the QR PNG (Insert → Picture → From file).
2. Place a white "Rectangle Shape" behind as quiet zone.
3. Export to PDF.

Where to place the QR in the image

On an A4 or A5 flyer

• Bottom corners are most used (natural reading: photo/title → call to action).
• If you have main logo and QR, don't put them together: looks "technical". Separate: logo above, QR in its dedicated zone.
• If the flyer has lots of bleed image, leave a flat-background strip (white or color) for the QR.

In an Instagram post (1080×1080)

• Bottom-right corner works in feed.
• Minimum size: 200×200 px (about 2 cm on screen). If audience scans from another phone pointing at their screen, go to 300×300 px.
• Important: when Instagram compresses the image, contrast drops 5–10%. If the QR is already at the limit, it'll fail.

In an Instagram Story (1080×1920)

• "Sticker" stickers in Instagram block the QR in many cases since they're interactive. Don't put the QR under a sticker.
• Use central bottom area, avoid the top 200 px and bottom 200 px (UI zones).
• Minimum size: 350×350 px.

On an outdoor poster

• Height from ground: between 1 m and 1.8 m. Higher than that, people don't bother to look.
• Pair it with microcopy: "Scan for X" or a camera icon. Increases scans by 60–80%.
• If exposed to direct sun, print matte. Glossy with sun = reflections = no scan.

QR + photo + branding (real case)

Imagine a restaurant that wants its digital menu over a photo of its signature dish in a flyer:

1. Base photo: dish on wood table, natural light.
2. QR: bottom corner, over a white circle or square about 4 cm.
3. Microcopy below: "View full menu".
4. Restaurant logo: in the center of the QR, at 18% (in QRcito) — tutorial: QR with logo step by step.
5. Call to action: "Scan with your phone camera" on the back.

That sequence converts 200% more than a flyer with a generic QR slapped on.

How to test before printing

1. Display final image on screen at real size: if the flyer is A5 (14.8×21 cm), open the image and zoom until it measures that on screen. Scan with phone from the screen.
2. Print a test page: a single A4 with your design. Plain paper. Scan with two different phones under real lighting. If it works here, it works at the printer.
3. Verify the QR leads to the right destination: sometimes content is updated in QRcito but you reuse an old PNG. Always regenerate before printing.

If something fails after these tests, review the common problems in the scan-without-app guide.

Free software we recommend

• Canva (web/app): drag & drop, super easy, ready templates.
• Photopea (web): free Photoshop clone directly in browser, no install.
• GIMP (desktop): powerful, free, open source. Steeper learning curve.
• Figma (web/app): best option for SVG and precision work.
• Inkscape (desktop): free vector editor, ideal if you need to modify the QR's SVG before pasting.

For simple cases (one flyer, an Instagram post), Canva is enough. For professional design or large print, Figma or Inkscape with SVG.

QR on dark backgrounds: doable?

Yes, but carefully:

• If QR is black on white and image background is dark: add a white square behind (the standard solution).
• If you want white QR on dark background (color inversion): most modern readers support it, but 15–20% of older phones fail. Only use if aesthetics is critical and you accept that loss.
• If you want a brand-color QR on dark background: ensure contrast ratio with background is ≥ 4:1. Measure at tools.wmflabs.org/contrast.

Frequently asked questions

Can I put a QR over a JPG without decompressing? Yes, technically you can paste it with any editor. But if the JPG is heavily compressed, the QR edges may blur. Better to work with PNG or, ideally, in a vector editor.

Do I need to put explanatory text next to the QR? Not mandatory but multiplies scans. "Scan to view menu" or a simple camera icon significantly increases usage rate, especially in audiences not used to QR.

Can I use an emoji or icon instead of my logo in the center? Yes. As long as it's square, opaque, and stays below 25%, it works the same. It's a quick way to "humanize" a QR without owning a brand.

Is the QR still the same if I paste it on different images? Yes. The QR content is the graphic piece, not the image where you place it. You can reuse the same PNG/SVG on 50 different posters.

What if each image needs a different QR? Generate as many QR as you need in QRcito (free and unlimited) and paste each into its image. For lots of them, batch generators (CSV) create hundreds of QR at once.

In short

Three rules and it never fails: white quiet zone behind, minimum 2.5 cm printed, test with 2 phones before printing. Everything else is style.

Create your QR free and download in SVG or high-res PNG: qrcito.com