Ищем баланс 🤌🏻
Между качеством, производительностью и поддержкой.
Оптимизированная графика = быстрый, удобный и конкурентоспособный сайт:
➡️ Снижение веса страницы даже на 200–300 КБ может улучшить скорость загрузки на 10–20%. Это напрямую повышает метрики Core Web Vitals, такие как Largest Contentful Paint (LCP). ➡️ Экономия трафика особенно важна для мобильных пользователей и снижает нагрузку на сервер. ➡️ Гибкость и адаптивность: использование srcset, и современных форматов позволяет подстроиться под любые устройства.
В статье на Хабре Илья Туров, разработчик интерфейсов (frontend), написал, как оптимизировать веб-графику с помощью современных форматов изображений, работы с Retina-экранами, растровых PNG-спрайтов и Image Proxy.
· 30.04
Добавлю из практики — несколько вещей которые дают ощутимый буст помимо форматов:
Lazy loading с intersection observer вместо атрибута loading="lazy" — даёт контроль над порогом загрузки и позволяет приоритизировать above-the-fold контент.
Blur hash / LQIP — низкокачественный placeholder который декодируется моментально. Пользователь видит контент сразу, а полное изображение догружается без layout shift. LCP улучшается субъективно сильнее чем по метрике.
CDN с автоматической конвертацией (Cloudflare Images, Imgix) — вместо ручного управления форматами. Клиент поддерживает AVIF — отдаём AVIF, нет — WebP, нет — JPEG. Логика на инфраструктурном уровне, не в коде.
На одном проекте эти три вещи вместе дали -40% к LCP без изменений в дизайне.
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
коммент удалён