QR с маской по изображению

QR с маской по изображению — это техника, при которой каждый тёмный модуль кода не заливается сплошным цветом, а «прорезается» из картинки или паттерна: визуально получается, что фотография или брендовая текстура просвечивает именно сквозь форму QR-матрицы. Сканеры при этом видят не изображение, а контраст — им важна разница между светлым и тёмным, а не то, чем именно залиты модули.

Определение: что такое image mask в QR

В основе техники — принцип clipping mask из графических редакторов: матрица QR-кода используется как маска, и сквозь отверстия в ней «проглядывает» подложенное изображение. Тёмные модули становятся видимыми участками картинки, светлые — остаются фоном.

Результат: QR, залитый брендовыми цветами, фотографией продукта, фактурой ткани или любым другим графическим материалом. Техника особенно популярна для упаковки, визиток и рекламных макетов, где нужно вписать код в дизайн-систему, а не вставить чёрный квадрат «поверх».

Создать такой QR можно в генераторе QRkoder — с экспортом в SVG или PNG для последующей работы в Figma, Illustrator или прямой вставки в макет.

Чем отличается от halftone-QR

Это принципиально разные подходы, их часто путают.

В halftone-QR фотография «просвечивает» через всю матрицу равномерно: плотность точек варьируется по яркости — там, где на фото тёмные участки, модули крупнее или гуще, где светлые — мельче или реже. Изображение и матрица как бы наложены друг на друга и читаются одновременно.

В image mask QR фото не распределяется по матрице — оно целиком обрезается по контуру тёмных модулей. Каждый квадратик матрицы показывает кусочек изображения именно в своём месте. Это клипмаска, а не симбиоз.

На практике: halftone даёт фотографический эффект с органично встроенным QR, а image mask даёт цветовой и фактурный эффект — код узнаваем как QR, но залит чем-то нестандартным. Halftone сложнее в реализации и риски для читаемости выше; image mask проще и предсказуемее.

Как сохранить читаемость

Главное правило: сканер видит контраст, а не содержание картинки. Если тёмные модули недостаточно тёмные против светлого фона — код не распознается, сколько бы красивой ни была текстура.

Практические требования:

• Контраст модулей к фону — минимум 3:1 по яркости (стандарт ISO/IEC 18004), лучше 4:1 и выше. Перед финалом проверьте через Color Contrast Analyzer или эквивалент.
• Уровень коррекции ошибок — H (30%). Image mask не искажает модули геометрически, но если картинка местами слишком светлая — ECC level H даст запас прочности. При уровне L или M риск нечитаемости значительно выше.
• Не использовать фото с равномерно светлыми зонами в качестве маски: там, где картинка светлая, тёмные модули потеряются. Подходят фото с насыщенными тёмными тонами — или градиент от тёмного к тёмному.
• Финдеры (угловые маркеры) лучше оставлять чёрными или заливать достаточно тёмным вариантом маски. Именно по ним сканер ориентирует код — искажение финдеров ломает распознавание первым.
• Экспорт в SVG — для сохранения чёткости при масштабировании. PNG допустим, но только высокого разрешения (300 dpi и выше для печати). В SVG маска реализуется через ``, модули остаются векторными.
• Не для микропечати и чековой печати: термопринтеры и офисные принтеры плохо воспроизводят тонкие полутона — используйте image mask только там, где контролируете качество воспроизведения.

После финализации дизайна — обязательный тест сканирования: проверьте несколькими приложениями (Google Lens, встроенная камера iOS/Android, Scanbot) при разном освещении. Если хоть одно из трёх не читает — ужесточите контраст.

Подробнее о роли контраста и минимальных требованиях — в статье контраст QR-кода. Про добавление логотипа поверх кода (другая техника) — в материале логотип в QR.

Частые вопросы