Ми часто стикаємося з ситуацією: сайт виглядає чудово на звичайному моніторі, але на 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 фізичних пікселів. Браузер інтерполює — звідси розмитість. Рішень кілька, і кожне застосовується у своєму контексті. Ми використовуємо наступні техніки залежно від типу контенту:
| Метод | Коли застосовувати | Розмір файлу (приклад) |
|---|---|---|
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 адаптацію і забудьте про розмиту графіку. Зв'яжіться з нами для консультації та точного розрахунку.