isav.red

Исследование: Как уменьшить размер PDF-презентации без потери качества

Предыстория

При работе над презентацией для 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.

Что я тестировал?

  1. Цвет фона и градиенты.
  2. Размытие и размер фигур.
  3. Прозрачность и пересечение фигур.
  4. Фоновое размытие.
  5. Объекты за пределами фрейма.
  6. Тени.
  7. Текст и его конвертация в кривые.
  8. Качество изображений.
  9. Векторные маски vs. вырезание в Photoshop.
  10. Количество слоёв.
  11. Компоненты и их инстансы.
  12. Настройки экспорта.
  13. Форматы файлов.

Основные выводы

  1. Цвет фона не влияет, а градиенты немного увеличивают размер.
  2. Размытие резко увеличивает вес, а размер фигур — нет.
  3. Прозрачность не влияет, но пересечение фигур иногда уменьшает вес.
  4. Фоновое размытие — один из главных «утяжелителей».
  5. Объекты за пределами фрейма не добавляют вес.
  6. Тени без размытия не влияют на размер, но с размытием — очень сильно увеличивают.
  7. Текст в кривых утяжеляет файл.
  8. Качество изображений критично: чем выше dpi, тем больше вес.
  9. Векторные маски не уменьшают размер, лучше вырезать фото заранее.
  10. Объединение слоёв утяжеляет файл.
  11. Компоненты и их инстансы не влияют на размер.
  12. Лучшее качество экспорта — Medium (Low ещё лучше, но может ухудшить качество).
  13. Формат PDF при средней компрессии остаётся лучшим решением.

Главные причины перегруза PDF

❗️ Градиенты
❗️ Размытие
❗️ Тени с размытием

Как создать лёгкую презентацию?

  1. Используйте однотонные цвета вместо градиентов.
  2. Откажитесь от размытия (особенно фонового).
  3. Не используйте тени с размытием (жёсткие тени — исключение).
  4. Обрезайте изображения заранее (например, в Photoshop).
  5. Подгоняйте dpi фотографий под реальный размер в макете (используйте команду после списка).
  6. Не объединяйте большое количество слоёв в один объект.
  7. Для экспорта выбирайте 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. Это мое первое исследование, поэтому критикуйте, но не слишком строго! 😉
Ux и технологии