Мы часто сталкиваемся с ситуацией: сайт выглядит отлично на обычном мониторе, но на 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 физических пикселей. Браузер интерполирует — отсюда размытость. Решений несколько, и каждое применяется в своём контексте. Мы используем следующие техники в зависимости от типа контента:
| Метод | Когда применять | Размер файла (пример) |
|---|---|---|
srcset + sizes для <img> |
Контентные изображения | Умеренный, 2x-версия тяжелее на 30-50% |
CSS image-set() |
Фоновые изображения | Зависит от количества версий |
| SVG | Иконки, логотипы, иллюстрации | Очень маленький, 0.5-2 КБ |
<picture> + <source> |
Art direction (разные кадры) | Выше из-за множества источников |
| CSS-спрайты 2x | Устаревшие проекты с IE11 | Средний, но не рекомендуем |
Почему 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);
Дополнительные инструменты
- Vite-imagetools: автоматическая генерация srcset в Vite-проектах. - next/image: встроенная оптимизация в Next.js. - WebP Express: плагин для работы с WebP на сервере.Как мы решаем задачу: пошаговый процесс
- Аудит текущих изображений и иконок на сайте. Определяем, какие элементы требуют замены.
- Замена растровых иконок на SVG-спрайт. Генерируем один спрайт-файл со всеми иконками.
- Добавление srcset ко всем контентным изображениям. Для каждого изображения создаём версии 1x, 2x и опционально 3x.
- Подготовка фоновых изображений через CSS image-set(). Обрабатываем все background-image.
- Настройка pipeline автоматической генерации размеров с помощью Sharp, Vite-imagetools или аналогов.
- Тестирование на реальных устройствах: iPhone, MacBook, Galaxy.
- Документация процесса и передача исходных файлов заказчику.
Что входит в работу
После завершения вы получаете:
- 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+.
Чеклист перед сдачей:
| Элемент | Требование | Статус |
|---|---|---|
| Иконки | SVG или 2x-версия | ☐ |
| Логотип | SVG-формат | ☐ |
| Контентные изображения | srcset с 2x | ☐ |
| Фоновые изображения | image-set() | ☐ |
| Шрифты | Системные или web fonts | ☐ |
| CSS-background-image | Нет одиночных 1x без fallback | ☐ |
Сроки выполнения
Базовая retina-адаптация существующей вёрстки (замена иконок на SVG, добавление srcset): от 1 до 2 дней. Полная retina-ready вёрстка нового проекта включается в общий timeline. Стоимость рассчитывается индивидуально — оценим ваш проект бесплатно. Закажите retina-ready адаптацию и забудьте о размытой графике. Свяжитесь с нами для консультации и точного расчёта.