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

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