Предыстория
При работе над презентацией для TopSelection я разработал новую стилистику, которая сочетала фирменный стиль компании с элементами, отсылающими к WEB3. Однако после экспорта 27 слайдов из Figma размер PDF-файла превысил 100 МБ. Попытки сжатия через онлайн-сервисы и Adobe Acrobat не дали желаемого результата — минимальный размер составил 66 МБ, но качество градиентов и изображений сильно пострадало. Более того, презентация загружалась очень долго, что создавало проблемы при её передаче клиентам.
Первый дизайн:
Исследование: почему PDF-файлы весят так много?
Попытки найти решения в интернете и нейросетях дали лишь базовые советы: «удалите лишнее» или «уменьшите качество изображений». Но такой подход уничтожает дизайн. Мне нужно было понять, какие именно элементы влияют на вес файла и как избежать его увеличения без ущерба для визуала.
Единственное полезное решение, которое я нашёл, — бесплатный плагин Free Compressed PDF and Image Exporter для Figma. Он позволил уменьшить файл до 45 МБ (против 66 МБ у других инструментов), но всё равно был далёк от идеала.
Ответ Chat GPT
Цель исследования
Разобраться, как разные элементы и эффекты влияют на вес PDF-файла, и создать чёткие правила, следуя которым можно делать лёгкие презентации без потери качества.
Метод:
- Тестирование каждого фактора на фрейме 1000×1000 px в Figma.
- Фиксация результатов в Notion.
Что я тестировал?
- Цвет фона и градиенты.
- Размытие и размер фигур.
- Прозрачность и пересечение фигур.
- Фоновое размытие.
- Объекты за пределами фрейма.
- Тени.
- Текст и его конвертация в кривые.
- Качество изображений.
- Векторные маски vs. вырезание в Photoshop.
- Количество слоёв.
- Компоненты и их инстансы.
- Настройки экспорта.
- Форматы файлов.
Основные выводы
- Цвет фона не влияет, а градиенты немного увеличивают размер.
- Размытие резко увеличивает вес, а размер фигур — нет.
- Прозрачность не влияет, но пересечение фигур иногда уменьшает вес.
- Фоновое размытие — один из главных «утяжелителей».
- Объекты за пределами фрейма не добавляют вес.
- Тени без размытия не влияют на размер, но с размытием — очень сильно увеличивают.
- Текст в кривых утяжеляет файл.
- Качество изображений критично: чем выше dpi, тем больше вес.
- Векторные маски не уменьшают размер, лучше вырезать фото заранее.
- Объединение слоёв утяжеляет файл.
- Компоненты и их инстансы не влияют на размер.
- Лучшее качество экспорта — Medium (Low ещё лучше, но может ухудшить качество).
- Формат PDF при средней компрессии остаётся лучшим решением.
Главные причины перегруза PDF
❗️ Градиенты
❗️ Размытие
❗️ Тени с размытием
Как создать лёгкую презентацию?
- Используйте однотонные цвета вместо градиентов.
- Откажитесь от размытия (особенно фонового).
- Не используйте тени с размытием (жёсткие тени — исключение).
- Обрезайте изображения заранее (например, в Photoshop).
- Подгоняйте dpi фотографий под реальный размер в макете (используйте команду после списка).
- Не объединяйте большое количество слоёв в один объект.
- Для экспорта выбирайте Medium или Low. Если критичен минимальный вес — используйте плагин Compressify.
- Mac: Shift + Command + C ➔ Command + V
- Windows: Shift + Ctrl + C ➔ Ctrl + V
Итог: как я уменьшил размер своей презентации
Я пересобрал дизайн, убрал градиенты, размытие, прозрачность, заменил фоновые тени на жёсткие. Использовал правильные размеры картинок.
Результат:
- 100 МБ ➔ 15 МБ (без сжатия!)
- После сжатия ➔ 12 МБ
- 1 слайд = 440–550 КБ (вместо 3–5 МБ)
Новый дизайн:
Итог: простые принципы экономии веса
- Градиенты и размытие — враги лёгкого PDF.
- Подгоняйте dpi изображений.
- Используйте Medium/Low экспорт.
- Вырезайте изображения заранее.
- Используйте однотонные цвета и жёсткие тени.
Ваши мысли?
Мне удалось уменьшить вес в 7 раз без потери качества. Как вам результат?
P.S. Это мое первое исследование, поэтому критикуйте, но не слишком строго! 😉