Изображения для Retina: Как обеспечить чёткость на High-DPI мониторах

Последнее обновление: June 28, 2026

Экраны Retina и с высоким DPI упаковывают больше пикселей в одно и то же физическое пространство, поэтому изображение, созданное для стандартного экрана, выглядит мягким и пикселизированным на них. Предоставление четких изображений на таких экранах означает подготовку версий с более высоким разрешением и указание браузеру, когда их использовать. В этом руководстве мы рассмотрим рабочий процесс 2x и 3x, разметку srcset, которая обеспечивает нужный файл, а также баланс между четкостью и весом страницы.

Быстрый ответ: как сделать изображения резкими на экранах Retina?

Создайте версию изображения в два раза (а для телефонов — в три раза) больше размеров отображаемых пикселей, а затем используйте атрибут srcset, чтобы предложить обе версии. Браузер загружает файл высокого разрешения только на экраны, которые могут его отобразить, поэтому стандартные дисплеи не скачивают дополнительные байты. Фотография, отображаемая шириной 400 pixels, требует исходный файл размером 800 pixels (2x) для Retina. Экспортируйте оба варианта с соответствующим сжатием — файл 2x будет больше, но не в два раза, потому что эффективность сжатия улучшается с повышением разрешения.

Что такое дисплей Retina или с высоким DPI?

Дисплей Retina — это маркетинговый термин для экрана с достаточно высокой плотностью пикселей, чтобы глаз не мог различить отдельные пиксели на нормальном расстоянии просмотра. Apple ввело этот термин, но концепция применима к большинству современных телефонов, планшетов и ноутбуков. Практическая мера — это device pixel ratio (DPR) — количество физических пикселей, представляющих один CSS pixel.

• Экрану с коэффициентом 2x требуется в два раза больше линейных пикселей (в четыре раза больше всего) для четкого вида.
• Экран телефона с коэффициентом 3x требует в три раза больше линейных пикселей.
• Стандартные экраны 1x загружают базовое изображение и ничего не теряют.

В Mozilla guide to device pixel ratio описано, как браузеры сообщают и используют DPR, что является основой любой стратегии изображений Retina.

Как создать версии изображений 2x и 3x?

Начните с исходного изображения высокого разрешения и resize его до каждого целевого размера, а не масштабируйте небольшую копию. Фотография, предназначенная для слота дисплея шириной 400px, должна иметь версию 400px (1x), 800px (2x) и 1200px (3x) для телефонов.

1. Начните с источника, размер которого не меньше вашего самого большого целевого размера (3x).
2. Resize до ширины 1x, 2x и 3x.
3. Сжимайте Compress каждую версию — файлы 2x и 3x сжимаются лучше на пиксель.
4. Экспортируйте в WebP для получения самых маленьких файлов высокого качества.
5. Предоставляйте все версии, позволяя браузеру выбрать оптимальную.

• Никогда не масштабируйте небольшое изображение до 2x — оно останется мягким и просто станет тяжелее.
• Файл 2x обычно весит меньше, чем в два раза больше файла 1x, благодаря лучшему сжатию.
• Версии 3x наиболее важны для телефонов с маленькими, плотными экранами.

Как использовать srcset для предоставления правильной версии?

Атрибут srcset в теге <img> сообщает браузеру, какой файл загрузить на основе DPR экрана. Выбор обрабатывает сам браузер, поэтому вы предоставляете варианты и разметку.

<img
  src="photo-1x.webp"
  srcset="photo-1x.webp 1x, photo-2x.webp 2x, photo-3x.webp 3x"
  alt="Descriptive alt text"
  width="400" height="300"
/>

• Описатели 1x, 2x и 3x сопоставляют файлы с коэффициентами пикселей устройства.
• Браузер загружает только ту версию, которая соответствует экрану.
• Всегда включайте ширину и высоту, чтобы предотвратить смещение макета (layout shift).
• Атрибут src является запасным вариантом для старых браузеров.

Для адаптивных изображений, которые также меняют размеры в зависимости от ширины экрана, комбинируйте srcset с атрибутом sizes и описателями ширины (400w, 800w) вместо описателей DPR. В руководстве по адаптивным изображениям более подробно описывается этот продвинутый шаблон, а в руководстве по SEO для изображений объясняется, как четкие и правильно отмасштабированные изображения также помогают поисковой оптимизации.

Когда использовать SVG вместо растровых изображений

Для логотипов, иконок и иллюстраций с плоскими формами вы можете обойти проблему 2x/3x, используя SVG. Векторная графика масштабируется бесконечно без потери разрешения — один и тот же файл SVG остается идеально четким на мониторе 1x и телефоне 3x, потому что он создан математически, а не хранится в виде пикселей.

SVG — правильный ответ всякий раз, когда изображение состоит из форм, а не из фотографических деталей. Недостатком является то, что SVGs необходимо оптимизировать — неиспользуемые метаданные и мусор от редактора их увеличивают в размере — и руководство SVG to PNG guide описывает рабочий процесс на случай, если вам все же нужен растровый запасной вариант для среды, которая не может отобразить векторы. Для корпоративного сайта с логотипом в шапке SVG полностью устраняет проблему ретины для этого элемента.

Тестирование изображений для Retina

Генерация файлов — это половина работы; проверка того, что они действительно загружаются правильно, — вторая половина. Несколько проверок подтверждают, что настройка работает, а не просто молча подает неправильный файл.

1. Откройте страницу на устройстве Retina или установите коэффициент DPR браузера в 2x в инструментах разработчика.
2. Проверьте элемент изображения и убедитесь, что загруженный currentSrc — это файл с коэффициентом 2x или 3x.
3. Переключитесь на DPR 1x и убедитесь, что загружается файл 1x.
4. Проверьте вкладку Network, чтобы убедиться, что на экран скачивается только одна версия.
5. Посмотрите в режиме 100% на экране Retina и убедитесь, что изображение четкое, а не размытое.

Переопределение коэффициента пикселей устройства в инструментах разработчика браузера позволяет тестировать без физических устройств, хотя реальный экран Retina является окончательным доказательством. Распространенный сбой происходит из-за опечатки в разметке srcset, которая заставляет браузер откатиться к базовому src, что выглядит нечетко на retina и при этом не вызывает ошибку. Вкладка Network обнаруживает это немедленно — если вы видите, что на экране 2x загружается файл 1x, значит, srcset настроен неправильно.

Балансировка резкости и веса страницы

Ловушка с ретина-изображениями — это предоставление файлов высокого разрешения для каждого экрана, что удваивает или утраивает вес страницы для пользователей, которые не могут заметить разницу. Подход srcset позволяет избежать этого, но только если вы действительно генерируете и ссылаетесь на меньшие версии. Предоставление всем одного файла 3x — самая распространенная ошибка.

В руководстве web.dev по адаптивным изображениям описано влияние на производительность правильного решения этой задачи, а гид Core Web Vitals напрямую связывает вес изображений с метрикой LCP, которая влияет на ранжирование. Цель состоит в том, чтобы изображение было четким там, где это необходимо, и умеренным везде — позвольте браузеру выбрать, и создайте каждую версию, чтобы у него был хороший выбор.

Часто задаваемые вопросы

Как сделать изображения четкими на экранах Retina?

Предоставляйте версии растровых изображений 2x (и при необходимости 3x) в размере отображения, используя srcset, чтобы браузер выбирал правильный файл в зависимости от соотношения пикселей устройства. Изображение 1x на экране Retina выглядит мягким; вариант 2x восстанавливает четкость.

Нужны ли мне изображения 2x для каждой графики?

Для четкой графики и фотографий в качестве героев — да, иначе экраны Retina покажут мягкость. Для декоративных или изображений ниже сгиба (below-the-fold) часто достаточно одного файла 1x. Предоставляйте оба варианта с помощью srcset, чтобы устройства без экрана Retina не скачивали большой файл.

Когда следует использовать SVG вместо растра 2x?

Для логотипов, иконок и плоской графики — да, SVG независим от разрешения и остается четким в любом размере без дополнительных файлов. Для фотографий растр (с вариантами 2x) по-прежнему является правильным выбором. См. руководство SVG to PNG.

Как мне предоставить изображения для Retina?

Используйте srcset с источниками 1x и 2x (и при необходимости 3x), позволяя браузеру выбирать в зависимости от соотношения пикселей устройства. Укажите 1x как значение по умолчанию в src, чтобы более старые браузеры корректно откатывались к нему. Браузер загружает только нужный ему вариант.

Замедляет ли srcset страницу?

Нет — браузер загружает только тот вариант, который ему нужен, поэтому маленький экран получает небольшой файл. Без srcset каждое устройство скачивает самый большой файл. srcset экономит байты, он их не добавляет.