Ключевые тезисы
- Более 75% мобильных пользователей и растущая доля десктопных пользователей просматривают сайты на экранах Retina или HiDPI (источник: StatCounter, 2025)
- Изображение в разрешении 1x на экране 2x выглядит размыто — дефект, невидимый на не-Retina экране разработчика
- Модульные и функциональные тесты не проверяют разрешение изображений, поставляемых браузеру
- Визуальное тестирование на HiDPI viewport'ах захватывает рендеринг так, как его видит пользователь, и обнаруживает изображения недостаточного размера
Согласно определению ISTQB, визуальное тестирование означает "проверку того, что пользовательский интерфейс ПО отображается в соответствии с ожидаемыми визуальными спецификациями, путём сравнения эталонных скриншотов с текущим состоянием приложения".
Вот проблема, которую игнорирует почти каждая веб-разработческая команда: ваш сайт, скорее всего, выглядит размытым для большинства ваших пользователей, и вы об этом не знаете.
Это не преувеличение. Когда Apple представила экраны Retina в 2010 году с iPhone 4, соотношение пикселей выросло с 1x до 2x. Каждый CSS-пиксель отображался четырьмя физическими пикселями. С тех пор эта тенденция стала повсеместной. Современные iPhone отображают при 3x. MacBook Pro, iPad, экраны Samsung, Google Pixel — все используют соотношения 2x и выше. По данным StatCounter за 2025 год, более 75% мобильных сессий приходится на устройства с высокой плотностью пикселей.
Результат: если вы поставляете изображение 400x300 пикселей для области отображения 400x300 CSS-пикселей, это изображение чёткое на экране 1x. Но на экране 2x браузеру необходимо растянуть эти 400x300 физических пикселей на 800x600 физических пикселей. Изображение становится размытым. Не катастрофически размытым — тонко размытым. Достаточно, чтобы ваш логотип потерял резкость, фотографии продуктов выглядели «непрофессионально», а иконки казались пиксельными.
И самое худшее: вы этого не видите, потому что, возможно, разрабатываете на не-Retina экране, или потому что ваш браузер разработки не эмулирует фактическое соотношение пикселей.
Проблема Retina: размытость, которую разработчики не видят
Что такое Device Pixel Ratio
Device Pixel Ratio (DPR) — это соотношение между физическими пикселями экрана и CSS-пикселями, используемыми браузером. Экран с DPR 1 отображает один физический пиксель на CSS-пиксель. Экран с DPR 2 (Retina) отображает четыре физических пикселя на CSS-пиксель (2x2). Экран с DPR 3 отображает девять физических пикселей на CSS-пиксель (3x3).
Когда браузеру нужно отобразить изображение 200x200 пикселей в контейнере 200x200 CSS-пикселей на экране 2x, ему требуется 400x400 физических пикселей. Если исходное изображение только 200x200, браузер использует алгоритм интерполяции для «придумывания» недостающих пикселей. Результат: характерная размытость, особенно заметная на изображениях с текстом, тонкими линиями, логотипами или иконками.
Почему разработчики этого не видят
Если вы разрабатываете на не-Retina экране (например, внешний монитор 1080p), изображение 1x отображается идеально. Если вы разрабатываете на MacBook с Retina экраном, но тестируете в режиме адаптивности Chrome DevTools, эмулируемый DPR зависит от вашей конфигурации. По умолчанию Chrome использует DPR 1 для большинства эмулируемых устройств.
Влияние на восприятие качества
Исследования в когнитивной психологии показывают, что резкость изображений — один из самых влиятельных факторов восприятия качества и достоверности веб-сайта. Исследование, опубликованное Google и Базельским университетом (Tuch et al., 2012), продемонстрировало, что пользователи оценивают достоверность сайта менее чем за 50 миллисекунд, и визуальное качество — доминирующий фактор.
Технические решения и их ограничения
Атрибуты srcset и sizes
HTML-атрибут srcset позволяет указывать несколько версий изображения для разных плотностей пикселей. В теории — идеально. На практике — полно подводных камней: необходимо генерировать и поддерживать несколько версий каждого изображения, и ничто в вашем пайплайне тестирования не проверяет, что srcset настроен корректно.
CSS-изображения и медиа-запросы
Для фоновых CSS-изображений стандартная техника использует медиа-запросы по разрешению. Риск тот же: забывчивость или ошибки при поддержке.
Векторные форматы (SVG)
SVG-изображения по своей природе нечувствительны к DPR. Но не весь контент может быть SVG. Фотографии, скриншоты и сложные растровые иллюстрации остаются в PNG, JPEG или WebP.
Проблема ручной проверки
Все эти технические решения имеют общую слабость: ни одно из них не проверяет само себя. Ручная проверка теоретически возможна, но практически невозможна в масштабе.
Визуальное тестирование HiDPI: единственная надёжная проверка
Захват того, что пользователь реально видит
Инструмент визуального тестирования, настроенный на захват скриншотов при Device Pixel Ratio 2 или 3, отображает страницу в точности так же, как экран Retina. Если изображение в 1x, а viewport — 2x, изображение выглядит размытым на скриншоте — точно так же, как на экране вашего пользователя.
Обнаружение регрессий разрешения
Визуальное тестирование HiDPI особенно эффективно для обнаружения визуальных регрессий — ситуаций, когда изображение 2x перестаёт быть 2x. Это происходит чаще, чем вы думаете: обновления CMS, которые сбрасывают варианты изображений, миграции хранилища, забывающие высокоразрешённые версии, изменения шаблонов, заменяющие srcset на простой src.
Покрытие различных соотношений пикселей
Рынок экранов фрагментирован. Современные iPhone используют DPR 3. MacBook — DPR 2. Экраны Android варьируются между 1.5, 2, 2.75 и 3. Полноценный визуальный тест захватывает ваши страницы при нескольких DPR.
За пределами изображений: что раскрывает HiDPI
Визуальное тестирование высокого разрешения также выявляет CSS-границы в 1px, которые по-разному отображаются при разных DPR, градиенты с проявлением бандинга при 2x, пользовательские шрифты с различным субпиксельным рендерингом и фавиконы с недостаточным разрешением.
Внедрение визуального тестирования HiDPI в ваш рабочий процесс
Начните с трёх репрезентативных viewport'ов: десктоп 1440px при DPR 2 (MacBook Pro), мобильный 390px при DPR 3 (iPhone 14/15), планшет 810px при DPR 2 (iPad). Этот подход дополняет тестирование на различных экранах, охватывая не только различные размеры экрана, но и плотность пикселей. Приоритизируйте страницы с критически важными изображениями. Накладные расходы на страницу — несколько секунд.
Перестаньте разрабатывать вслепую
Большинство ваших пользователей видят ваш сайт на экране высокого разрешения. Если вы не тестируете в высоком разрешении, вы тестируете версию сайта, которую ваши пользователи не видят. Визуальное тестирование при DPR 2 и 3 — это не роскошь, а необходимость для всех, кто серьёзно относится к визуальному качеству. А с no-code инструментом оно доступно: никаких скриптов, никакой сложной конфигурации — только скриншоты высокого разрешения, автоматически сравниваемые с вашими эталонными скриншотами.
FAQ
В чём разница между Retina, HiDPI и высоким разрешением?
Эти термины описывают одну концепцию с разным происхождением. «Retina» — маркетинговый термин Apple. «HiDPI» — общий технический термин. «Высокое разрешение» — общеупотребительный термин. Все означают экран с DPR больше 1.
Тестирование при DPR 2 потребляет больше ресурсов, чем при DPR 1?
Да, умеренно. Скриншот DPR 2 содержит в четыре раза больше пикселей. На практике накладные расходы — несколько секунд на страницу и управляемый объём хранилища при современной компрессии.
Мой сайт использует изображения WebP или AVIF. Проблема Retina всё ещё актуальна?
Да. WebP и AVIF — это форматы сжатия, а не решения для разрешения. Изображение 400x300 в WebP будет таким же размытым, как 400x300 в JPEG на экране 2x.
Как узнать, какие изображения на моём сайте не в Retina-разрешении?
Самый прямой путь — визуальное тестирование при DPR 2. Захватите страницы с инструментом, настроенным на DPR 2, и сравните с эталонными скриншотами DPR 1. Размытые зоны чётко видны в diff'е.
Заменяет ли визуальное тестирование HiDPI атрибут srcset?
Нет. srcset — решение на стороне кода. Визуальное тестирование HiDPI — проверка того, что решение работает корректно. Они дополняют друг друга.
Нужно ли тестировать при DPR 3 в дополнение к DPR 2?
Зависит от вашей аудитории. DPR 2 покрывает самый распространённый случай. Разница между 2x и 3x значительно менее заметна, чем между 1x и 2x. Начните с DPR 2 и добавьте DPR 3, если ваша аналитика это оправдывает.
Для углубления
- Визуальное тестирование, контраст и дальтонизм: проверьте, что на самом деле видят ваши пользователи
- Визуальное тестирование Remix: почему full-stack фреймворк делает визуальное тестирование ещё более критичным
Ваши пользователи видят ваш сайт в высоком разрешении. Вам следует тестировать его так же. Delta-QA захватывает ваши страницы при DPR 2 и 3 и обнаруживает размытые изображения до того, как их увидят пользователи.