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 адаптацію і забудьте про розмиту графіку. Зв'яжіться з нами для консультації та точного розрахунку.