💻 easy.advice

Не раздувай картинки: соблюдай пропорции!

#оптимизация #приложение #разработка #react #клиенты
вс, 8 июня 2025 г. - 2 мин чтения
Оптимизация изображений на проекте

🖼️ Не раздувай картинки: соблюдай пропорции

Каждая картинка имеет вес. Чем он выше — тем дольше грузится страница, тем хуже метрики и опыт пользователя. Самый частый антипример: иконка 48×48, но в проект подтягивают оригинал 1224×1224, потому что «пусть будет качественно». В итоге PNG весит в десятки раз больше, чем нужно, а пользователь ждёт.

Начинай с соотношения сторон

  • 🔢 Определи целевой размер. Если компонент рисует аватар 48×48, именно такие размеры и нужны. Подписывай требования прямо в дизайн-системе.
  • 🧭 Сохраняй пропорции. Сжигать квадрат в прямоугольник или наоборот — прямой путь к размытию и артефактам.
  • 📱 Делай запас в 2× для ретины. 48×48 превратится в 96×96. Этого достаточно даже для плотных дисплеев.

Где объёмы съедают перфоманс

  • 📦 Карточки товаров. Маленькая превьюшка 160×160 не должна тянуть оригинал 2048×2048.
  • 📰 Ленты и подборки. Если в списке 20 элементов, умножай лишний вес на 20 — задержка станет заметной.
  • 🛰️ Баннеры и герои. Тут действительно нужны большие файлы, но и их стоит адаптировать: 1440×600 + вариант для мобайла, а не 10000×4000 «про запас».

Практики, которые спасают

  1. Генерируй набор размеров. Используй srcset и sizes, чтобы браузер брал оптимальный вариант.
  2. Сжимай без потерь. WebP или AVIF с умным качеством дают ту же картинку при меньшем весе.
  3. Документируй стандарты. Зафиксируй в дизайн-гайде и storybook: «иконки — 24×24 / 48×48, запас 2×», «карточки — 320×200, максимум 640×400».
  4. Проверяй в CI. Скрипты типа lqip или кастомные линтеры не допустят загрузку файлов больше лимита.

Когда можно выходить за рамки

Иногда нужны крупные ассеты: hero-фото, галерея в ретина-качестве, печатные материалы. В таких случаях собирай отдельные форматы, но всё равно продумывай «рабочий» размер для веба и давай ссылку на оригинал только там, где это оправдано.

Итог

Правильный размер изображения — это баланс между качеством и скоростью. Соблюдай соотношение сторон, ограничивай запас двойным масштабом и не тяните в компонент то, что не используется. Так интерфейс останется лёгким, а метрики Core Web Vitals скажут «спасибо».