Оптимизация сайтов для Retina в 2026 году: адаптация графики под экраны высокого разрешения

Оптимизация изображений под Retina-дисплеи и разрешения 4K/5K — это не просто способ сделать картинки чёткими на экранах с высокой плотностью пикселей. Это системный подход к снижению веса страниц, улучшению Core Web Vitals и повышению качества трафика из поиска.

Оптимизация сайтов для Retina в 2026 году: адаптация графики под экраны высокого разрешения

Оптимизация изображений под Retina-дисплеи и разрешения 4K/5K — это не просто способ сделать картинки чёткими на экранах с высокой плотностью пикселей. Это системный подход к снижению веса страниц, улучшению Core Web Vitals и повышению качества трафика из поиска. Принцип работы прост: подавать браузеру оптимальный файл (формат и размер) под устройство и сценарий просмотра; автоматизировать генерацию и доставку через CDN; тестировать эффективность по LCP/CLS/TTFB.

Современные экраны требуют больше пикселей для отображения того же визуального элемента. Если раньше достаточно было одной версии изображения, то теперь нужно готовить несколько вариантов под разные устройства и разрешения. При этом важно не перегрузить страницу — изображения часто составляют 60–70% веса сайта.

Что такое Retina-дисплеи?

Retina — маркетинговое название Apple для экранов с высокой плотностью пикселей. На практике это устройства с DPR (devicePixelRatio) примерно равным 2 (и выше у 4K/5K), где один CSS-пиксель отображается несколькими физическими пикселями экрана.

Представьте: элемент шириной 280 CSS-px при DPR=2 требует изображения примерно 560 px физической ширины, чтобы не выглядеть размыто. Обычное изображение на таком экране будет казаться нечётким, словно слегка расфокусированным. Глаз сразу замечает разницу — особенно на тексте в картинках, логотипах и иконках.

Плотность пикселей измеряется в PPI (pixels per inch). У обычных мониторов это 72–96 PPI, у Retina — от 220 PPI и выше. Чем больше физических пикселей приходится на дюйм экрана, тем выше требования к разрешению изображений.

Почему важна оптимизация изображений?

Улучшение LCP (Largest Contentful Paint) напрямую повышает поведенческие метрики и позиции в выдаче. Малые выигрыши в LCP — даже 0,1 секунды — дают заметный эффект на конверсию в e-commerce. Пользователи не ждут. Если страница грузится медленно, они уходят к конкурентам.

Правильная семантика (alt, structured data) открывает дополнительный канал трафика через Google Images и Discover. Поисковые системы всё лучше понимают содержание изображений, а пользователи всё чаще ищут информацию через визуальный поиск.

Однако есть нюанс. Изображения для Retina весят больше — в два-четыре раза. Если просто заменить все картинки на версии @2x, вес страницы вырастет критически. Поэтому нужна стратегия: современные форматы (WebP, AVIF), адаптивная доставка через srcset, ленивая загрузка для контента ниже первого экрана.

Информация в этой статье носит общий характер и не заменяет консультацию специалиста. Каждый проект уникален — тестируйте решения на своей аудитории и инфраструктуре.

Технологии и методы оптимизации

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

Ключевые элементы пайплайна:

• Генерация нескольких версий изображений (1x/1.5x/2x, и реже 3x) на стороне сборки/CI или через плагин/сервис. Это делается один раз при загрузке оригинала, дальше система сама подставляет нужный вариант.
• Использование современного кодека (AVIF/WebP) с фолбэком на JPEG/PNG через элемент picture или source. Современные форматы дают экономию веса до 30–50% при том же визуальном качестве.
• Атрибуты srcset и sizes для адаптивного выбора ресурса; lazy loading (loading=»»lazy»») для контента ниже первого экрана. Браузер сам решает, какой файл загрузить, исходя из размера viewport и плотности пикселей.
• CDN-доставка и автоматическое перекодирование по Accept-Header (если CDN это поддерживает). Некоторые CDN умеют на лету конвертировать изображения в WebP или AVIF, если браузер их поддерживает.
• Автоматическая очистка метаданных и профилей цвета при необходимости (если нет требований к EXIF). Метаданные могут добавлять лишние килобайты — камера, геолокация, настройки съёмки. Для веба это обычно не нужно.

Использование атрибута srcset

Атрибут srcset указывает набор вариантов изображения с дескрипторами ширины (w) или плотности (x). Атрибут sizes сообщает браузеру ожидаемую ширину рендера в разных условиях. Браузер выбирает вариант с учётом viewport и devicePixelRatio — автоматически, без JavaScript.

Вот рабочая схема для hero-блока:

<picture> <source type=»»image/avif»» srcset=»»hero-480.avif 480w, hero-768.avif 768w, hero-1280.avif 1280w»» sizes=»»(max-width:768px) 100vw, (max-width:1200px) 70vw, 1200px»»> <source type=»»image/webp»» srcset=»»hero-480.webp 480w, hero-768.webp 768w, hero-1280.webp 1280w»» sizes=»»(max-width:768px) 100vw, (max-width:1200px) 70vw, 1200px»»> <img src=»»hero-1280.jpg»» srcset=»»hero-480.jpg 480w, hero-768.jpg 768w, hero-1280.jpg 1280w»» sizes=»»(max-width:768px) 100vw, (max-width:1200px) 70vw, 1200px»» alt=»»Ключевой визуал страницы»» decoding=»»async»» loading=»»eager»»> </picture>

Пояснение: AVIF — при поддержке отдаём первый source; WebP — второй; img — фолбэк для старых браузеров. Атрибут sizes подсказывает браузеру, какую ширину ожидать в разных брейкпоинтах. На мобильном (до 768px) изображение занимает 100% ширины экрана, на планшете (до 1200px) — 70%, на десктопе — фиксированные 1200px.

Браузер сам выбирает файл из srcset, исходя из реальной ширины контейнера и DPR устройства. Если у пользователя iPhone с DPR=2 и шириной экрана 375px, браузер запросит файл примерно 750px (375 × 2). Из списка он выберет hero-768.avif — ближайший подходящий вариант.

Обновлено: внедрение srcset и sizes на лендинге b2b-сервиса снизило вес медиа на 37% и улучшило LCP с 3,8 до 2,5 секунд. Это реальный кейс из практики — результаты зависят от набора ассетов и конфигурации платформы, но тенденция стабильная.

Форматы изображений для Retina

Выбор формата зависит от типа контента и требований к качеству:

• Фотографии: WebP или AVIF. Автоконвертация на CI/CD или CDN. AVIF даёт большую экономию веса, но проверяйте поддержку у целевой аудитории — не все браузеры его понимают. WebP поддерживается шире и даёт хороший баланс качества и размера.
• Логотипы, иконки, UI-элементы: SVG. Это векторный формат — он масштабируется без потери качества и весит мало. Если нужен растр — PNG или WebP lossless.
• Изображения с прозрачностью: PNG или WebP lossless. JPEG не поддерживает прозрачность, поэтому для таких случаев не подходит.

Практика показывает: тестируйте на своей аудитории. Измеряйте медиану LCP и долю отдачи AVIF/WebP через аналитику. Если 95% пользователей получают современные форматы, а LCP улучшился — решение работает. Если доля фолбэков высока, возможно, стоит пока остановиться на WebP.

Некоторые CDN умеют автоматически конвертировать изображения в лучший формат для конкретного браузера. Это удобно — не нужно хранить несколько версий файла, CDN делает всё на лету.

Плагины для WordPress

Выбирайте плагин, который поддерживает WebP/AVIF, генерацию srcset, интеграцию с CDN и регенерацию миниатюр. В качестве ориентиров: ShortPixel, Imagify, EWWW, Smush. Критерии выбора: качество и скорость сжатия, автогенерация размеров, совместимость с темой и CDN.

Хороший плагин должен:

• — автоматически создавать несколько версий изображения при загрузке (1x, 2x, разные ширины);
• — конвертировать в WebP/AVIF без ручных действий;
• — корректно работать с lazy loading и плагинами кеша;
• — не ломать вёрстку и не создавать конфликтов с другими расширениями.

Проверяйте совместимость с вашим CDN. Некоторые плагины имеют встроенную интеграцию с популярными CDN — это упрощает настройку и снижает риск ошибок.

Тестируйте цепочку (плагин → CDN → кеш) в staging-окружении. Избегайте двойного перекодирования — когда плагин конвертирует изображение в WebP, а CDN пытается сделать то же самое. Это увеличивает нагрузку и может ухудшить качество.

Рекомендации по выбору плагинов для оптимизации изображений

При выборе плагина обращайте внимание на отзывы и активность разработчиков. Плагин должен регулярно обновляться — веб-технологии меняются быстро, и то, что работало год назад, может быть неоптимальным сейчас.

Проверьте, есть ли у плагина поддержка массовой обработки (bulk optimization). Если у вас уже есть большая библиотека изображений, вам понадобится инструмент для пакетной конвертации и оптимизации.

Обратите внимание на лицензию и ценообразование. Некоторые плагины бесплатны для небольших сайтов, но требуют платной подписки при превышении лимита изображений. Рассчитайте заранее, сколько это будет стоить для вашего проекта.

Изучите документацию. Хороший плагин имеет понятные инструкции, примеры настройки и FAQ. Это сэкономит время при внедрении и поможет избежать типичных ошибок.

Примеры и практические советы

Теория — это хорошо, но без практики сложно понять, как всё работает в реальных условиях. Рассмотрим несколько сценариев и рекомендаций, которые помогут избежать распространённых ошибок.

Тестирование изображений на различных устройствах

Используйте набор реальных устройств: iPhone (Retina DPR=2), Android (DPR=3), MacBook с 4K-экраном. Делайте скриншот-дифы — сравнивайте, как выглядит одно и то же изображение на разных экранах. Обращайте внимание на тонкие линии, текст в картинках, градиенты.

Если нет доступа к физическим устройствам, используйте эмуляцию в DevTools браузера. Это не заменит реальное тестирование, но даст общее представление. Проверяйте, какой файл загружается в разных условиях — откройте вкладку Network и посмотрите, какой вариант из srcset выбрал браузер.

Тестируйте на медленных сетях. Lighthouse имеет режим Slow 4G — запустите 10–20 прогонов и зафиксируйте медиану LCP/CLS/Speed Index. Сравните результаты до и после оптимизации. Если медиана LCP снизилась на 0,5–1 секунду, это хороший результат.

Обращайте внимание на водопад загрузки (waterfall) в DevTools. Проверьте, нет ли двойной загрузки изображений — когда браузер сначала скачивает low-res версию, а потом заменяет её на high-res. Это частая ошибка при использовании JS-ретинизации.

Сравнение скорости загрузки

Скорость загрузки напрямую влияет на поведенческие метрики и конверсию. Пользователи не ждут — если страница грузится дольше 3 секунд, большинство уходит.

Измеряйте не только общее время загрузки, но и метрики Core Web Vitals: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), FID/INP (First Input Delay / Interaction to Next Paint). Эти показатели Google использует для ранжирования.

LCP должен быть меньше 2,5 секунд. Если главное изображение на странице весит 2 MB и грузится 5 секунд на мобильном интернете, LCP будет плохим. Оптимизация изображений — один из самых эффективных способов улучшить LCP.

CLS измеряет визуальную стабильность. Если изображения загружаются без указания width и height, контент «прыгает» при их появлении. Это раздражает пользователей и ухудшает CLS. Всегда указывайте размеры изображений в HTML или CSS.

Используйте RUM (Real User Monitoring) для сбора данных с реальных пользователей. Синтетические тесты (Lighthouse, WebPageTest) дают общее представление, но реальные данные точнее показывают, как сайт работает у вашей аудитории.

Подготовка графики для Retina-дисплеев

Правильная подготовка графики — это не только техническая задача, но и вопрос понимания, как работают экраны и браузеры. Разберём пошагово, что нужно делать.

Пошаговая инструкция

Шаг 1. Определите реальные CSS-размеры элементов в макете. Откройте дизайн в Figma или Photoshop и посмотрите, какую ширину и высоту имеет изображение в пикселях макета. Это будет ваш базовый размер (1x).

Шаг 2. Экспортируйте растровые файлы в 2x (или 1.5–2x при компромиссе). Для изображения шириной 280px в макете экспортируйте версию 560px. Учитывайте чёткость тонких линий — для UI-элементов с линиями толщиной 1px используйте кратные физическим пикселям размеры.

Шаг 3. Для UI-элементов и иконок используйте SVG. Векторная графика масштабируется без потери качества и весит мало. Если дизайнер передал иконки в PNG, попросите SVG — это сэкономит время и улучшит качество.

Шаг 4. Сжимайте изображения. Используйте WebP/AVIF для фотографий, оптимизаторы (TinyPNG, Squoosh, ShortPixel) — в CI или вручную для галерей. Не полагайтесь на автоматику — проверяйте визуальное качество после сжатия.

Шаг 5. Генерируйте srcset: 480w, 768w, 1280w и так далее. Создайте несколько версий изображения под разные ширины экранов. Не забудьте указать sizes — без этого атрибута браузер не сможет правильно выбрать файл.

Шаг 6. Тестируйте. Запустите 10 прогонов Slow 4G в Lighthouse или на реальных устройствах. Зафиксируйте медиану LCP до и после оптимизации. Если улучшение есть — внедряйте в продакшн.

Шпаргалка размеров (1x/2x/3x) — рекомендации для типовых блоков:

• — Миниатюра товара: CSS 80 px → 1x = 80 px, 2x = 160 px.
• — Превью карточки: CSS 280 px → 1x = 280 px, 2x = 560 px.
• — Hero / баннер: CSS 1200 px → 1x = 1200 px, 2x = 2400 px (проверяйте необходимость 2x для zoom).
• — Email (контент шириной 600 px): 1x = 600 px, для Retina — 2x = 1200 px.

Правило: не делайте 3x без реальной потребности. Версия 3x нужна только для устройств с очень высокой плотностью пикселей или для сценариев с зумом. В большинстве случаев 2x достаточно.

Сервисы для уменьшения веса фотографий

Существует множество инструментов для сжатия изображений. Выбор зависит от объёмов работы и требований к автоматизации.

Рекомендуемые сервисы

• Squoosh — бесплатный браузерный конвертер от Google. Поддерживает WebP, AVIF, MozJPEG. Удобен для разовой обработки нескольких файлов. Работает локально в браузере — файлы не загружаются на сервер, что важно для конфиденциальности.
• TinyPNG/TinyJPG — популярный онлайн-сервис для пакетного сжатия. Хорош для небольших и средних библиотек изображений. Есть API для интеграции в CI/CD. Платная подписка снимает лимиты на количество файлов.
• ShortPixel — плагин и сервис с интеграцией WordPress, генерацией WebP/AVIF, CDN. Поддерживает массовую обработку и автоматическую оптимизацию при загрузке. Есть бесплатный тариф с лимитом на количество изображений в месяц.
• Imagify — ещё один плагин для WordPress от создателей WP Rocket. Хорошо интегрируется с плагинами кеша и CDN. Поддерживает три уровня сжатия: нормальное, агрессивное, ультра. Выбор зависит от баланса качества и размера.
• EWWW Image Optimizer — бесплатный плагин с базовыми функциями оптимизации. Подходит для небольших сайтов. Платная версия добавляет облачное сжатие и конвертацию в WebP/AVIF.

Для массовых библиотек лучше настроить серверную автоматизацию + CDN. Это сложнее в настройке, но эффективнее для крупных проектов. CDN может на лету конвертировать изображения в нужный формат и размер, снижая нагрузку на сервер и ускоряя доставку контента.

Изображения в WordPress без потери скорости сайта

WordPress — популярная платформа, но по умолчанию она не оптимизирует изображения под Retina. Нужны плагины или ручная настройка.

Советы по оптимизации

• Используйте плагины, которые автоматически генерируют srcset и WebP/AVIF при загрузке изображения. Это избавит от ручной работы и снизит риск ошибок.
• Настройте ленивую загрузку (lazy loading) для изображений ниже первого экрана. WordPress 5.5+ поддерживает это нативно через атрибут loading=»»lazy»». Проверьте, что ваша тема не отключает эту функцию.
• Ограничьте максимальную ширину загружаемых изображений. Если пользователи загружают фотографии с камеры (4000×3000 px), WordPress создаст множество миниатюр, но оригинал останется огромным. Установите лимит, например, 2560 px — этого достаточно для большинства сценариев.
• Используйте CDN для доставки изображений. CDN кеширует файлы на серверах по всему миру и отдаёт их пользователям с ближайшего узла. Это снижает TTFB (Time to First Byte) и ускоряет загрузку.
• Проверяйте совместимость плагинов. Иногда плагин оптимизации изображений конфликтует с плагином кеша или CDN. Тестируйте в staging-окружении перед внедрением в продакшн.
• Регулярно проводите аудит медиатеки. Удаляйте неиспользуемые изображения и миниатюры. Со временем в WordPress накапливаются сотни версий одного файла — это занимает место и замедляет резервное копирование.

SEO для дисплеев iPhone

Изображения на Retina-экранах iPhone должны быть чёткими и быстро загружаться. Размытые картинки на мобильных устройствах портят визуальный ряд и напрямую влияют на показатели SEO.

Рекомендации по улучшению SEO

• Используйте осмысленные alt-тексты. Описывайте, что изображено на картинке, но без переспама ключевых слов. Alt нужен для доступности и для поисковых систем — Google использует его для понимания содержания изображения.
• Называйте файлы человекочитаемо. Вместо IMG_1234.jpg используйте retina-optimized-hero.jpg. Это помогает поисковым системам понять контекст изображения и улучшает ранжирование в Google Images.
• Добавляйте структурированные данные (JSON-LD ImageObject) для главных изображений страницы. Это повышает шансы попасть в расширенные сниппеты и Google Discover.

<script type=»»application/ld+json»»> { «»@context»»: «»https://schema.org»», «»@type»»: «»ImageObject»», «»contentUrl»»: «»https://example.com/img/hero-1280.avif»», «»caption»»: «»Оптимизированный визуал для Retina»», «»representativeOfPage»»: true } </script>

• Проверяйте, что изображения индексируются. Откройте Google Search Console → Индексирование → Страницы и посмотрите, нет ли ошибок. Если изображения не индексируются, проверьте robots.txt и meta-теги.
• Оптимизируйте Open Graph и Twitter Card изображения. Когда пользователи делятся ссылкой в соцсетях, превью должно быть чётким и привлекательным. Для Retina используйте изображения минимум 1200×630 px.

Как изображения влияют на SEO

Изображения — это не только визуальный контент, но и важный фактор ранжирования. Google учитывает скорость загрузки изображений, их релевантность запросу, наличие alt-текстов и структурированных данных.

Быстрая загрузка изображений улучшает LCP — один из ключевых показателей Core Web Vitals. Google официально подтвердил, что Core Web Vitals влияют на ранжирование. Если ваши изображения грузятся медленно, это может снизить позиции в выдаче.

Правильные alt-тексты помогают попасть в Google Images — отдельный канал трафика. Некоторые сайты получают до 20–30% трафика из визуального поиска. Это особенно актуально для e-commerce, блогов о дизайне, рецептов, туризма.

Структурированные данные (ImageObject) повышают шансы попасть в расширенные сниппеты. Это увеличивает CTR и привлекает более качественный трафик.

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

Проблемы с отображением изображений на экранах

Даже при правильной подготовке изображений могут возникнуть проблемы. Рассмотрим распространённые кейсы и их решения.

Описание проблем и решений

• Проблема: размытость мелких иконок и UI-элементов на Retina. Решение: используйте SVG или 2x-PNG с чёткой выравнивающей сеткой. Для иконок с тонкими линиями (1px) убедитесь, что размеры кратны физическим пикселям.
• Проблема: двойная загрузка изображений при JS-подмене src. Решение: используйте нативный srcset вместо JavaScript-ретинизации. Если JS необходим, реализуйте стратегию progressive enhancement и измеряйте waterfall в DevTools.
• Проблема: конфликты плагинов оптимизации и CDN. Решение: тестируйте цепочку (плагин → CDN → кеш) в staging. Избегайте двойного перекодирования — когда плагин конвертирует в WebP, а CDN пытается сделать то же самое.
• Проблема: изображения не адаптируются под разные экраны. Решение: проверьте атрибут sizes. Без него браузер не знает, какую ширину ожидать, и может загрузить неоптимальный файл.
• Проблема: CLS (Cumulative Layout Shift) из-за изображений без размеров. Решение: всегда указывайте width и height в HTML или через CSS aspect-ratio. Это резервирует место для изображения до его загрузки и предотвращает «прыжки» контента.
• Проблема: медленная загрузка на мобильных устройствах. Решение: используйте lazy loading для изображений ниже первого экрана. Для hero-изображения используйте preload, чтобы браузер загрузил его приоритетно.

Лучшие практики для работы с изображениями

Собрали рекомендации, которые помогут избежать типичных ошибок и выжать максимум из оптимизации.

Описание лучших практик

• Не загружайте огромные исходники и не масштабируйте их через CSS. Браузер всё равно скачает оригинал. Если изображение 4000×3000 px отображается в контейнере 400×300 px, пользователь загрузит лишние мегабайты.
• Не полагайтесь на один плагин без тестов. Особенно при использовании CDN. Проверяйте, что плагин корректно работает с вашей инфраструктурой.
• Не генерируйте 3x для всех изображений без A/B-теста. Это увеличит вес без гарантии визуальной выгоды. Версия 2x покрывает большинство сценариев.
• Используйте современные форматы (WebP/AVIF) с фолбэком. Это даёт экономию веса до 30–50% при том же качестве. Но всегда предусматривайте запасной вариант для старых браузеров.
• Указывайте размеры изображений (width/height). Это предотвращает CLS и улучшает визуальную стабильность страницы.
• Тестируйте на реальных устройствах и медленных сетях. Эмуляция в DevTools даёт общее представление, но реальные тесты точнее.
• Регулярно проводите аудит медиатеки. Удаляйте неиспользуемые файлы и миниатюры. Это экономит место и ускоряет резервное копирование.

Как избежать распространённых ошибок

• Ошибка первая: игнорирование атрибута sizes. Без него браузер не может правильно выбрать файл из srcset и может загрузить слишком большое или слишком маленькое изображение.
• Ошибка вторая: использование только JPEG для всех изображений. Современные форматы (WebP/AVIF) дают лучшее сжатие. Для логотипов и иконок используйте SVG.
• Ошибка третья: отсутствие lazy loading для изображений ниже первого экрана. Это увеличивает время загрузки страницы и ухудшает LCP.
• Ошибка четвёртая: пустые или бессмысленные alt-тексты. Alt нужен для доступности и SEO. Описывайте содержание изображения, но без переспама ключевых слов.
• Ошибка пятая: отсутствие тестирования после внедрения оптимизации. Запускайте Lighthouse, проверяйте waterfall в DevTools, собирайте RUM-данные с реальных пользователей.

Использование атрибутов srcset и sizes

Эти атрибуты — основа адаптивной доставки изображений. Разберём подробнее, как они работают и как их правильно использовать.

Объяснение использования

Атрибут srcset содержит список вариантов изображения с дескрипторами. Дескриптор w указывает физическую ширину файла в пикселях. Дескриптор x указывает плотность пикселей (1x, 2x, 3x).

Атрибут sizes сообщает браузеру, какую ширину будет занимать изображение в разных условиях. Это медиа-запросы для изображений.

Пример:

<img src=»»photo.jpg»» srcset=»»photo-480.jpg 480w, photo-768.jpg 768w, photo-1280.jpg 1280w»» sizes=»»(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px»» alt=»»Описание изображения»»>

Как это работает:

1. Браузер смотрит на sizes и определяет ожидаемую ширину изображения.
2. Если ширина экрана ≤768px, изображение займёт 100vw (100% ширины viewport).
3. Если ширина экрана ≤1200px, изображение займёт 50vw (50% ширины viewport).
4. На больших экранах изображение будет фиксированной ширины 800px.
5. Браузер умножает ожидаемую ширину на DPR устройства и выбирает ближайший файл из srcset.

Например, на iPhone с шириной экрана 375px и DPR=2: — Ожидаемая ширина: 375px (100vw). — С учётом DPR: 375 × 2 = 750px. — Браузер выберет photo-768.jpg из srcset.

Важно: sizes должен соответствовать реальной CSS-ширине контейнера. Если в sizes указано 100vw, а изображение в CSS занимает 50%, браузер загрузит файл большего размера, чем нужно.

Для элемента picture можно указать разные sizes для разных source. Это даёт ещё больше контроля над доставкой изображений.

Заключение

Оптимизация изображений под Retina и 4K/5K — это комбинация правильной подготовки ассетов (2x), современной доставки (AVIF/WebP + picture), автоматизации (CI/плагины/CDN) и методичной проверки (RUM/Lighthouse). Это даёт выигрыш и в визуальном качестве, и в скорости загрузки, и в результатах SEO.