Как работаете с графикой? Кладёте картинки в код? SVG оптимизируете? А JPG? Размеры проверяете? Артефакты ловите? Превью подгружаете на юзера? Lazy используете?
Классический пример маркетинкого приёма - на главной фоном работало видео. 4 мегабайта )
Хорошо, недолго мучились. Сложно, долго, дорого, это отслеживать на сайте копии картинок и их вес/размер. Картинка в 19 мегабайт? Это пример из реальности, залили фон на стрнаицу.Работает же
Современная беда - 2x/3x графика для мобилки. Парадоксальная ситуация, но графон для телефона и размерами, и качеством весит больше, чем для десктопа.
И как мы к этому пришли? Вся проблема в том, что мобильная версия полная копию обычной, не сокращенка.
Ошибится очень просто: получаем картинку, оптимизируем, выкладываем на сайт, всё работает. Но картинка 20003000px, а нужно - 100150.
Проверять нужно сначала место применения! А уже потом прогонять оптимизатор.
Все носятся с современными форматами файлов, но сервисы с (псевдо)нейронкой типа tinypng на выходе дают больший профит.
С SVG тоже весело. Да, классный векторный формат, да, хорошо жмется. Но дизайнеры рисуют его на весь свой ретина экран, и когда твоя 16px иконка внутри это 500px картинка с пиксель-пёрфектом на 42кб, это такое себе ) Берём svgo, и жмём на 2-3 level. Теперь это 2-3кб )
С lazy на реакте непонятно. Пока отработает логика и бандлы, половина картинок уже на клиенте. А написать что-то с переходом с нативного поведения в реактивность руки не доходят. Может, есть готовое решение? Поделитесь, как у вас это делается.