Retina-ready вёрстка: чёткая графика на любых DPI

Мы часто сталкиваемся с ситуацией: сайт выглядит отлично на обычном мониторе, но на MacBook Pro или iPhone логотипы размыты, иконки «плывут», а скриншоты продукта теряют детализацию. Причина — экраны с плотностью пикселей 2x и выше (retina). Наш опыт показывает, что системная вёрстка retina-ready графики решает эту проблему без ущерба для производительности. Команда TrueTech гарантирует чёткость на любых устройствах. Такой подход не только устраняет размытость, но и оптимизирует трафик, экономя бюджет клиента: экономия на хостинге и CDN может составлять до 50% от предыдущих расходов.

За время работы мы помогли более чем 100 проектам адаптировать графику для ретина-дисплеев, сократив жалобы клиентов на некачественное отображение до нуля. Один из проектов — интернет-магазин с каталогом из 5000 товаров. После замены всех иконок на SVG и добавления srcset к изображениям, средний LCP уменьшился на 1.2 секунды, а объём передаваемых данных сократился на 35%. Клиент сообщил о снижении отказов на 12%.

Методы подготовки графики для retina-дисплеев

Обычный растровый PNG 100×100 px на дисплее с devicePixelRatio: 2 растягивается до 200 физических пикселей. Браузер интерполирует — отсюда размытость. Решений несколько, и каждое применяется в своём контексте. Мы используем следующие техники в зависимости от типа контента:

Почему SVG лучше растровых иконок?

Для интерфейсных элементов SVG — единственно верный подход. Векторная графика масштабируется без потерь на любом DPI. Иконки через <use xlink:href> или компонентизация через React:

// Icon.tsx — системная иконка через SVG sprite import { FC } from 'react'; interface IconProps { name: string; size?: number; className?: string; } const Icon: FC<IconProps> = ({ name, size = 24, className }) => ( <svg width={size} height={size} className={className} aria-hidden="true"> <use href={`/sprites/icons.svg#${name}`} /> </svg> ); 

Сравните: средняя SVG-иконка весит 0.5–2 КБ, тогда как PNG 2x того же размера — 10–30 КБ. Экономия трафика на 30-50% — не редкость. Более того, SVG поддерживает анимацию и динамическое изменение цвета через CSS, что упрощает создание тем оформления.

Как настроить srcset для контентных изображений?

Отметим: когда SVG недоступен — фотографии, скриншоты, сложные иллюстрации — используем srcset. Пример:

<img src="hero-800.jpg" srcset="hero-800.jpg 1x, hero-1600.jpg 2x, hero-2400.jpg 3x" width="800" height="450" alt="Главный экран приложения с retina-ready графикой" loading="lazy" decoding="async" /> 

Для адаптивных случаев с разными кадрами применяем <picture>:

<picture> <source media="(min-width: 1024px)" srcset="hero-desktop-1x.webp 1x, hero-desktop-2x.webp 2x" type="image/webp" /> <source media="(min-width: 1024px)" srcset="hero-desktop-1x.jpg 1x, hero-desktop-2x.jpg 2x" /> <source srcset="hero-mobile-1x.webp 1x, hero-mobile-2x.webp 2x" type="image/webp" /> <img src="hero-mobile-1x.jpg" srcset="hero-mobile-1x.jpg 1x, hero-mobile-2x.jpg 2x" width="390" height="260" alt="Главный экран" /> </picture> 

Подробнее об атрибуте srcset читайте в MDN Web Docs.

Как подготовить фоновые изображения через CSS image-set?

.hero-banner { background-image: image-set( url('/img/banner-1x.webp') 1x, url('/img/banner-2x.webp') 2x ); background-size: cover; } /* Fallback для старых браузеров */ @supports not (background-image: image-set(url('') 1x)) { .hero-banner { background-image: url('/img/banner-2x.webp'); } } 

Инструментальная цепочка подготовки графики

Оптимизация изображений — неотъемлемая часть retina-адаптации. Мы используем современные форматы WebP и AVIF, а также инструменты вроде Sharp и SVGO для автоматической генерации всех версий. В production-пайплайне сборщик генерирует все размеры из одного исходника. Пример скрипта для Sharp и SVGO:

// scripts/build-assets.mjs import sharp from 'sharp'; import { optimize } from 'svgo'; import { glob } from 'glob'; import fs from 'fs/promises'; import path from 'path'; const SOURCE_IMAGES = 'src/assets/images'; const SOURCE_ICONS = 'src/assets/icons'; const OUTPUT = 'public'; // растровые изображения const imageFiles = await glob(`${SOURCE_IMAGES}/**/*.{png,jpg}`); for (const file of imageFiles) { const name = path.basename(file, path.extname(file)); const outDir = path.dirname(file).replace(SOURCE_IMAGES, `${OUTPUT}/img`); await sharp(file).resize({ width: 800 }).webp({ quality: 82 }) .toFile(`${outDir}/${name}-1x.webp`); await sharp(file).resize({ width: 1600 }).webp({ quality: 78 }) .toFile(`${outDir}/${name}-2x.webp`); } // SVG спрайт const iconFiles = await glob(`${SOURCE_ICONS}/*.svg`); let symbols = ''; for (const file of iconFiles) { const id = path.basename(file, '.svg'); const raw = await fs.readFile(file, 'utf8'); const { data } = optimize(raw, { plugins: ['preset-default', { name: 'removeViewBox', active: false }], }); const symbol = data .replace(/<svg([^>]*)>/, `<symbol id="${id}"$1>`) .replace('</svg>', '</symbol>'); symbols += symbol; } const sprite = `<svg xmlns="http://www.w3.org/2000/svg" style="display:none">${symbols}</svg>`; await fs.writeFile(`${OUTPUT}/sprites/icons.svg`, sprite); 

Как мы решаем задачу: пошаговый процесс

1. Аудит текущих изображений и иконок на сайте. Определяем, какие элементы требуют замены.
2. Замена растровых иконок на SVG-спрайт. Генерируем один спрайт-файл со всеми иконками.
3. Добавление srcset ко всем контентным изображениям. Для каждого изображения создаём версии 1x, 2x и опционально 3x.
4. Подготовка фоновых изображений через CSS image-set(). Обрабатываем все background-image.
5. Настройка pipeline автоматической генерации размеров с помощью Sharp, Vite-imagetools или аналогов.
6. Тестирование на реальных устройствах: iPhone, MacBook, Galaxy.
7. Документация процесса и передача исходных файлов заказчику.

Что входит в работу

После завершения вы получаете:

• SVG-спрайт со всеми иконками.
• Набор контентных изображений с srcset-версиями.
• CSS-стили с image-set() для фоновых изображений.
• Pipeline автоматической генерации размеров (конфигурация Sharp/SVGO).
• Документацию по процессу и доступы к ресурсам.
• Обучение вашей команды работе с адаптивной графикой.
• 12-месячную гарантию на все выполненные работы.

Тестирование на retina-дисплеях

Инструменты:

• Chrome DevTools → Sensors → Device pixel ratio: установите 2 или 3.
• Firefox: about:config → layout.css.devPixelsPerPx.
• Реальные устройства: iPhone 13+, MacBook Pro M1+, Samsung Galaxy S22+.

Чеклист перед сдачей:

Сроки выполнения

Базовая retina-адаптация существующей вёрстки (замена иконок на SVG, добавление srcset): от 1 до 2 дней. Полная retina-ready вёрстка нового проекта включается в общий timeline. Стоимость рассчитывается индивидуально — оценим ваш проект бесплатно. Закажите retina-ready адаптацию и забудьте о размытой графике. Свяжитесь с нами для консультации и точного расчёта.