👣 Как уменьшить размер Flutter-приложения с помощью оптимизации ассетов
Размер установочного файла напрямую влияет на конверсию. Пользователи не любят ждать и редко скачивают большие приложения, если есть альтернатива поменьше. Особенно это критично для Android, но и для iOS размер тоже имеет значение.
Больше всего места в приложении занимают ассеты: изображения, иконки, шрифты. И именно здесь проще всего сэкономить мегабайты без потери качества.
Изображения:
Самый эффективный способ уменьшить размер картинок - использовать формат WebP. Он разработан Google, дает лучшее сжатие, чем PNG и JPEG, и при этом поддерживает прозрачность. В большинстве случаев замена PNG на WebP уменьшает размер файла в два-три раза без видимой потери качества.
Но формат - это только половина дела. Вторая - размер самого изображения. Если картинка отображается в виджете 100x100 точек, а вы кладете в ассеты изображение 2000x2000 пикселей, вы добавляете в приложение десятки лишних мегабайт. На больших экранах такие размеры тоже не нужны. Достаточно рассчитать максимальный размер с учетом плотности экрана: размер виджета умножить на коэффициент плотности (обычно не больше 4). Все, что больше - просто лишний вес.
Иконки:
С иконками все сложнее. Есть три основных способа хранить их в проекте.
Первый - использовать SVG. Это векторный формат, он масштабируется без потери качества. Но во Flutter он не поддерживается из коробки - нужна отдельная библиотека, которая добавляет лишнюю нагрузку и не всегда работает стабильно.
Второй - конвертировать SVG во Flutter-вектор (например через flutter_svg или специальные тулы). Это лучше, чем тянуть SVG-библиотеку, но иконки все равно остаются отдельными файлами, которые влияют на размер и время отрисовки.
Третий - хранить иконки в шрифте. Это самый эффективный способ. Вы получаете IconData и при сборке приложения неиспользуемые иконки автоматически исключаются. Минус - такой подход подходит только для монохромных иконок, и сложные изображения не всегда получается корректно конвертировать в шрифт.
На практике лучше всего комбинировать второй и третий подходы. Для простых монохромных иконок использовать шрифт. Для сложных цветных - векторный формат. А SVG лучше оставить для прототипов или случаев, когда без него действительно не обойтись.
Другие рекомендации:
Помимо ассетов, на размер влияют и другие факторы. Например библиотеки. Если вы подключаете тяжелую зависимость ради одной функции - возможно, стоит поискать альтернативу или реализовать это самостоятельно.
🔗 Читать подробнее
💡 Вывод:
Размер приложения - это не просто технический параметр. Это влияет на восприятие пользователей и скорость скачивания. Оптимизация ассетов - самый простой и эффективный способ уменьшить установочный файл без потери качества.
Используйте WebP для изображений. Следите за их размером. Для иконок выбирайте шрифты или векторные форматы вместо SVG.
Подписаться на канал:
➡️ Flutter & Dart | Мобильный трудоголик
Закрытый канал:
🚀 Мобильный трудоголик PRO
Размер установочного файла напрямую влияет на конверсию. Пользователи не любят ждать и редко скачивают большие приложения, если есть альтернатива поменьше. Особенно это критично для Android, но и для iOS размер тоже имеет значение.
Больше всего места в приложении занимают ассеты: изображения, иконки, шрифты. И именно здесь проще всего сэкономить мегабайты без потери качества.
Изображения:
Самый эффективный способ уменьшить размер картинок - использовать формат WebP. Он разработан Google, дает лучшее сжатие, чем PNG и JPEG, и при этом поддерживает прозрачность. В большинстве случаев замена PNG на WebP уменьшает размер файла в два-три раза без видимой потери качества.
Но формат - это только половина дела. Вторая - размер самого изображения. Если картинка отображается в виджете 100x100 точек, а вы кладете в ассеты изображение 2000x2000 пикселей, вы добавляете в приложение десятки лишних мегабайт. На больших экранах такие размеры тоже не нужны. Достаточно рассчитать максимальный размер с учетом плотности экрана: размер виджета умножить на коэффициент плотности (обычно не больше 4). Все, что больше - просто лишний вес.
Иконки:
С иконками все сложнее. Есть три основных способа хранить их в проекте.
Первый - использовать SVG. Это векторный формат, он масштабируется без потери качества. Но во Flutter он не поддерживается из коробки - нужна отдельная библиотека, которая добавляет лишнюю нагрузку и не всегда работает стабильно.
Второй - конвертировать SVG во Flutter-вектор (например через flutter_svg или специальные тулы). Это лучше, чем тянуть SVG-библиотеку, но иконки все равно остаются отдельными файлами, которые влияют на размер и время отрисовки.
Третий - хранить иконки в шрифте. Это самый эффективный способ. Вы получаете IconData и при сборке приложения неиспользуемые иконки автоматически исключаются. Минус - такой подход подходит только для монохромных иконок, и сложные изображения не всегда получается корректно конвертировать в шрифт.
На практике лучше всего комбинировать второй и третий подходы. Для простых монохромных иконок использовать шрифт. Для сложных цветных - векторный формат. А SVG лучше оставить для прототипов или случаев, когда без него действительно не обойтись.
Другие рекомендации:
Помимо ассетов, на размер влияют и другие факторы. Например библиотеки. Если вы подключаете тяжелую зависимость ради одной функции - возможно, стоит поискать альтернативу или реализовать это самостоятельно.
🔗 Читать подробнее
💡 Вывод:
Размер приложения - это не просто технический параметр. Это влияет на восприятие пользователей и скорость скачивания. Оптимизация ассетов - самый простой и эффективный способ уменьшить установочный файл без потери качества.
Используйте WebP для изображений. Следите за их размером. Для иконок выбирайте шрифты или векторные форматы вместо SVG.
Подписаться на канал:
➡️ Flutter & Dart | Мобильный трудоголик
Закрытый канал:
🚀 Мобильный трудоголик PRO