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