Дизайнер интерьеров шлёт клиенту 200 рендеров: своя подача вместо сотни писем

MAATRIX

К моменту, когда проект готов к показу, у вас на диске лежит не десяток картинок, а гостиная в трёх вариантах отделки, кухня с двух ракурсов при дневном и вечернем свете, спальня «до» и «после» — и в сумме набегает полторы-две сотни рендеров. Отправить это письмом или в мессенджере физически можно, но результат выглядит как техническая рассылка, а не презентация проекта, за который клиент платит. Разберём, почему это так и как собрать собственную страницу подачи на своём сервере — без зависимости от лимитов почты и алгоритмов сжатия мессенджеров.

Почему рассылка рендеров по почте и в мессенджере ломается

Проблема не в том, что вы плохо организуете файлы. Проблема в инструментах, которые для такой задачи не предназначены.

Почта. У большинства провайдеров лимит на вложение — 20-25 МБ. Один рендер интерьера в приличном разрешении легко в него не влезает, особенно если вы отдаёте не сжатый JPEG для превью, а полноразмерный файл для печати. В итоге письмо либо не уходит, либо вы жмёте качество до состояния, в котором на экране клиента размываются текстуры и фактуры материалов — то есть как раз то, ради чего рендер и делался. Двести файлов почтой — это в лучшем случае 10-15 писем, разбитых по комнатам или партиями, и клиент потом сам должен вспомнить, в каком письме была «кухня, вариант B».

Мессенджеры. WhatsApp и Telegram по умолчанию пережимают изображения при отправке как фото — это штатное поведение сервиса для экономии трафика, а не ваша ошибка. Итоговый файл клиент получает с заметно просевшим качеством, и если он захочет приблизить рендер, чтобы рассмотреть плитку в санузле или текстуру дерева на кухонном острове, увидит артефакты сжатия. Отправка «как документ» частично спасает ситуацию, но тогда теряется удобный просмотр — клиент получает список файлов без предпросмотра и вынужден скачивать каждый по отдельности.

Облачные папки. Google Диск, Яндекс.Диск, Dropbox снимают проблему объёма, но не проблему подачи. Клиент открывает ссылку и видит файловый менеджер: список из 200 файлов с именами вида render_final_v3_kitchen_2.jpg, отсортированных по алфавиту или дате, без всякой связи с логикой проекта. Он не поймёт с первого взгляда, где гостиная, а где кабинет, какой вариант отделки вы предлагаете как основной, а какой — как альтернативу. Плюс интерфейс диска — это интерфейс диска, а не ваша работа: там баннеры сервиса, чужой брендинг, кнопки «загрузить в моё облако», которые уводят фокус от презентации.

Итог один и тот же: клиент получает груду файлов и должен сам собрать из них картину проекта. Часть работы дизайнера — рассказать историю проекта через подачу — в этот момент теряется.

Что даёт собственная страница-презентация

Альтернатива — не бороться с лимитами почты и не пересжимать рендеры под мессенджер, а вынести презентацию на отдельную веб-страницу на своём сервере. Идея простая: клиент получает одну ссылку, открывает её в браузере — и видит не список файлов, а оформленную подачу проекта, разложенную так, как вы сами её выстроили.

Разница на практике:

Технически это не сложнее, чем кажется: не нужен интернет-магазин или CMS с админкой. Нужна папка с изображениями, немного HTML-разметки, которая раскладывает их по разделам, и сервер, который эту папку отдаёт по вашему домену. Дальше — детали.

Как устроена такая галерея технически

Есть два реалистичных подхода в зависимости от того, сколько времени вы готовы вложить.

Вариант 1 — статическая галерея без базы данных. Это набор HTML-страниц и подключённая JS-библиотека для просмотра изображений с увеличением (лайтбокс). Для лайтбокса подойдут готовые лёгкие библиотеки вроде PhotoSwipe или lightGallery — обе бесплатные, подключаются парой строк, дают увеличение по клику, свайп между кадрами и адаптацию под телефон (клиент почти наверняка откроет ссылку и с телефона тоже). Структуру страницы — разделы по комнатам, подписи под вариантами отделки — вы задаёте сами в разметке или генерируете скриптом.

Вариант 2 — самостоятельно установленное приложение-галерея. Существуют готовые open-source системы для такой задачи, например Piwigo или Lychee — их можно развернуть на своём сервере, они дают админку для загрузки альбомов, разграничение доступа и более гибкую сортировку, чем голый статический сайт. Плата за это — придётся один раз настроить веб-сервер, PHP и базу данных, и в целом обслуживать чуть более сложную систему, чем просто папку с файлами.

Для большинства дизайнерских презентаций хватает первого варианта: он проще в обслуживании, быстрее отдаёт страницы, потому что нет обращений к базе данных на каждый клик, и с ним ничего не «ломается» после обновлений PHP на сервере. Дальше разберём именно его.

Структура подачи: как разложить 200 рендеров, чтобы клиент не заблудился

Технология — это только половина задачи. Вторая половина — логика, по которой вы раскладываете рендеры, и здесь ошибки повторяются у большинства дизайнеров, которые первый раз собирают такую страницу сами.

• Один проект — один раздел, а не общая свалка. Если ведёте несколько клиентов параллельно, у каждого своя страница по адресу вида yourdomain.com/ivanov-kvartira/ или на поддомене ivanov.yourdomain.com. Ссылки не должны пересекаться и не должны быть «общими» для всех клиентов.
• Внутри проекта — по комнатам, а не по вариантам. Интуитивно кажется логичным сначала показать «вариант A всего проекта», потом «вариант B», но клиенту проще сравнивать в рамках одной комнаты: гостиная (вариант A, вариант B, вариант C), затем кухня и так далее. Так он видит, чем отличаются варианты именно в этом помещении, а не листает вперёд-назад по всей квартире.
• Обложка раздела — не первый попавшийся рендер, а лучший ракурс. На странице комнаты первым показывайте кадр, который сразу читается: общий план от входа, при основном освещении. Детальные ракурсы (угол у окна, крупный план фактуры) — дальше, после общего.
• Подписи важнее, чем кажется. «Гостиная, вариант с тёплым освещением, дуб натур» говорит клиенту больше, чем просто картинка. Если клиент показывает страницу мужу, партнёру или подрядчику — подписи снимают половину вопросов, которые иначе пришли бы вам в переписку.
• Короткое вступление на первой странице. Пара предложений о том, что за проект, какая площадь, какая концепция — прежде чем клиент попадёт в галерею. Это заменяет сопроводительное письмо, которое вы обычно пишете к рассылке.
• Один явный призыв к действию. Внизу страницы — как клиенту оставить комментарии или отметить, какой вариант ему ближе: e-mail, номер телефона или форма. Без этого клиент посмотрит рендеры и не поймёт, что делать дальше.

Разворачиваем галерею на сервере: практический план

Ниже — минимальный рабочий сценарий на VPS с Ubuntu 24.04 и nginx. Он рассчитан на то, что вы уже отсортировали рендеры по папкам вида 01-gostinaya/, 02-kuhnya/ и так далее внутри папки проекта.

1. Устанавливаем nginx и утилиту для генерации превью.

sudo apt update
sudo apt install -y nginx imagemagick

ImageMagick нужен, чтобы не отдавать клиенту в сетке превью полноразмерные рендеры по 20-40 МБ каждый — это долго грузится даже на хорошем канале. Из оригинала генерируется уменьшенная копия для плитки галереи, а по клику уже открывается полный файл.

mkdir -p /var/www/ivanov-kvartira/thumbs
for f in /var/www/ivanov-kvartira/01-gostinaya/*.jpg; do
  convert "$f" -resize 900x900 "/var/www/ivanov-kvartira/thumbs/$(basename "$f")"
done

Команду повторяете для каждой папки-комнаты или оборачиваете в небольшой bash-скрипт, который проходит по всем подпапкам сразу.

2. Собираем HTML-страницу галереи.

Каркас страницы — это разделы по комнатам с сеткой превью, каждое превью — ссылка на полноразмерный файл, открывающийся в лайтбоксе:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Проект: квартира Ивановых</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css">
</head>
<body>
  <h1>Гостиная</h1>
  <div class="gallery" id="gallery-living">
    <a href="01-gostinaya/render01.jpg" data-pswp-width="3840" data-pswp-height="2160">
      <img src="thumbs/render01.jpg" alt="Гостиная, вариант A, тёплый свет">
    </a>
    <!-- остальные рендеры комнаты -->
  </div>
  <h1>Кухня</h1>
  <div class="gallery" id="gallery-kitchen">
    <!-- рендеры кухни -->
  </div>
  <script type="module" src="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe-lightbox.esm.js"></script>
</body>
</html>

Для 200 файлов писать разметку руками неудобно — проще собрать её коротким скриптом на Python, который проходит по папкам проекта и генерирует блоки <div class="gallery"> автоматически, подставляя имена файлов и читая подписи из простого текстового файла captions.txt рядом с папкой каждой комнаты. Это разовая работа на один вечер, а дальше вы просто копируете подход на следующий проект.

3. Настраиваем nginx-блок под проект.

server {
    listen 443 ssl;
    server_name ivanov.yourdomain.com;

    root /var/www/ivanov-kvartira;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Для домена и SSL-сертификата проще всего пройти стандартный путь через Let's Encrypt — этот процесс подробно разобран в отдельном материале про настройку статического сайта на VPS и в статье про выпуск SSL-сертификата Let's Encrypt — шаги там применимы один в один, разница только в содержимом корневой папки сайта.

4. Каждому клиенту — свой поддомен или свой путь. Технически проще всего заводить поддомен на каждый проект (ivanov.yourdomain.com, petrova.yourdomain.com) — тогда достаточно одной wildcard-записи в DNS и одного SSL-сертификата на весь домен, а не отдельного на каждого клиента.

Приватность: рендеры чужого дома — это не публичный контент

Рендеры интерьера — это фактически будущий облик чужой квартиры или дома: расположение комнат, планировка, иногда адрес объекта в переписке рядом. Отдавать такую подачу совсем открытой ссылкой без всякой защиты не стоит, даже если сама ссылка выглядит непредсказуемой.

Практический минимум:

• Пароль на уровне веб-сервера, а не на уровне вашей доброй воли. В nginx это делается через Basic Auth:

sudo apt install -y apache2-utils
sudo htpasswd -c /etc/nginx/.htpasswd ivanov

и в конфиге сервера:

location / {
    auth_basic "Проект Ивановых";
    auth_basic_user_file /etc/nginx/.htpasswd;
    try_files $uri $uri/ =404;
}

Клиент один раз вводит логин и пароль, которые вы ему выдали лично, и дальше браузер помнит их при повторных заходах.

• Запрет индексации. Добавьте robots.txt с Disallow: / в корне проектной папки, чтобы поисковики не индексировали чужой интерьер и адрес не всплывал в выдаче.
• Право на отзыв доступа. Главное отличие от письма или сообщения в мессенджере: письмо, once отправлено, вы отозвать не можете. Пароль на своём сервере вы можете сменить или удалить страницу в любой момент — например, когда проект закрыт и клиент получил финальные файлы, а публичная подача больше не нужна.
• Не переиспользуйте один пароль на всех клиентов. Отдельная пара логин/пароль на проект — это буквально одна команда htpasswd, а разница в случае утечки огромная: скомпрометирован один проект, а не вся ваша клиентская база.

Если помимо готовых рендеров вам нужно передавать клиенту или подрядчику тяжёлые исходники — сцены 3ds Max, файлы SketchUp, RAW-развёртки текстур, которые не имеет смысла класть в публичную галерею, — для разовой передачи больших файлов удобнее отдельный инструмент вроде файлообменника PsiTransfer на своём сервере: загрузили файл, получили ссылку с ограниченным сроком жизни, не храните тяжёлые исходники годами в публичном доступе.

Что делать, если ставить сервер самому не хочется

Всё описанное выше не требует навыков программиста — это работа с файлами и пошаговые команды, но время на первую настройку у непривычного человека уйдёт: полдня, а не полчаса. Если это не ваш профиль работы, разумный путь — один раз попросить знакомого специалиста настроить связку «сервер плюс шаблон галереи», а дальше самостоятельно только копировать папки с рендерами и запускать генерацию превью, без администрирования сервера.

С той же развилкой между удобством готового облака и контролем своего сервера сталкиваются и другие специалисты, отдающие клиентам большие объёмы визуального контента — например, фотографы, передающие клиенту терабайты отснятого материала без облачных сервисов.

Задача при этом не разовая: настроив шаблон под один проект, для следующего клиента вы просто копируете структуру папок и меняете рендеры — минут пятнадцать работы вместо часа на рассылку по почте.

Частые вопросы