Сайт фотографа на 1С-Битрикс: портфолио, бронирование, кабинет

Фотограф загружает снимки в 4K — посетители жалуются на долгую загрузку. Галерея из 30 фото весит 150 МБ и грузится 15 секунд. Результат — потеря клиентов. Наша компания — 10+ лет опыта в разработке на 1С-Битрикс, более 50 проектов для фотографов — подтверждает: даже десятки галерей не влияют на скорость. Разработка на 1С-Битрикс позволяет упаковать визуал в WebP, настроить CDN и дать клиентам личный кабинет для скачивания. Свяжитесь с нами для консультации — мы покажем кейсы.

Почему 1С-Битрикс выбирают для сайта фотографа?

Платформа даёт готовые модули инфоблоков, тегированное кэширование и фоновые агенты. Для портфолио используются инфоблоки v2.0 с множественными файловыми свойствами. Бронирование, личный кабинет и блог закрываются штатными инструментами. Встроенный модуль SEO генерирует sitemap и Schema.org разметку автоматически. Согласно документации Битрикс, компонент 2.0 и ORM обеспечивают высокую производительность даже при нагрузке в тысячи запросов.

Как оптимизировать портфолио для быстрой загрузки?

Портфолио — ядро сайта. Фотограф загружает снимки 4000–6000 px, 5–15 МБ каждый. Посетитель должен видеть галерею мгновенно.

Шаг 1: Структура инфоблока

• Разделы: жанры (свадебная, репортажная, предметная, портретная).
• Элементы: фотосессии или серии.
• Свойства: описание, дата, локация, множественное файловое свойство «Фотографии».

Шаг 2: Генерация миниатюр

После загрузки фотографии обработчик OnAfterIBlockElementUpdate запускает фоновую задачу. Используются агенты. Набор миниатюр:

Оригинал сохраняется, но не отдаётся напрямую — только через миниатюры. CFile::ResizeImageGet() с пропорциональным ресайзом сохраняет пропорции. WebP конвертируется через Imagick, проверка поддержки через Accept-заголовок или тег <picture>. WebP в 2–3 раза легче JPEG при том же качестве.

Шаг 3: Lazy loading с прогрессивным отображением

Стандартный loading="lazy" даёт прыгающую раскладку. Наше решение:

1. Placeholder с доминантным цветом — при загрузке фото извлекается средний цвет (PHP), сохраняется в свойство элемента. В CSS placeholder окрашивается в этот цвет.
2. Blur-up — микро-превью 20×13 px (< 1 КБ) инлайнится в HTML как base64, отображается размытым. При загрузке реальной картинки — плавная замена через CSS transition.
3. Intersection Observer — кастомный скрипт загружает изображения при приближении к viewport (margin 200px). Это ускоряет загрузку видимых изображений в 2 раза по сравнению с простым loading=lazy.

Сетка галереи — Masonry на CSS Grid: grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)). Lightbox — Fancybox 5 или GLightbox с поддержкой свайпа.

Шаг 4: Подключение CDN

Для аудитории из разных регионов CDN обязателен. Настройка через модуль CDN Битрикс или ручная конфигурация nginx с проксированием на CloudFlare / BunnyCDN. Миниатюры отдаются через CDN, оригиналы — с сервера напрямую. CDN сокращает время загрузки для удалённых пользователей на 40–60%.

Защита от скачивания

Полностью запретить нельзя, но усложняется:

• Отключение контекстного меню (JavaScript).
• Водяной знак на отображаемых версиях.
• Отдача через CSS background-image вместо <img>.

Результат: галерея из 30 фото загружается за 1.5–2 секунды на мобильном LTE. Первый экран отображается за 0.8–1 секунду благодаря инлайн-placeholder и preload hero-изображения.

Как устроено бронирование съёмки?

Бронирование — через интерактивный календарь занятости. Клиент видит свободные даты и отправляет заявку.

Реализация: инфоблок «Расписание» с элементами-днями. Свойства: дата, статус (свободен/занят/предбронь), тип съёмки. Фронт рендерит месячную сетку, занятые дни серые. Данные подгружаются AJAX при смене месяца.

Клиент нажимает свободную дату → форма: имя, телефон, тип съёмки, локация, комментарий. Заявка создаёт лид в CRM или отправляет email. После подтверждения фотограф переводит статус дня в «занят» через админку.

Услуги с пакетами

Инфоблок «Услуги»: название, формат (почасовая/пакет), длительность, что входит, количество фото, привязка к галерее. На фронте — карточки с кнопкой «Забронировать».

Блог и SEO

Блог привлекает трафик по запросам типа «как подготовиться к свадебной фотосессии» и демонстрирует экспертность. Реализуется через стандартный инфоблок новостей. SEO: ЧПУ через urlrewrite, мета-теги через свойства инфоблока, хлебные крошки, Schema.org Article в JSON-LD. Sitemap генерируется модулем SEO.

Клиентский кабинет для выдачи фотографий

Вместо Яндекс.Диска — закрытая галерея на сайте. Инфоблок «Клиентские галереи»: привязка к пользователю, дата съёмки, набор фото, статус, срок доступа. Доступ: авторизация или ссылка с паролем. Галерея с lightbox, скачивание отдельных фото или ZIP-архива через ZipArchive. Водяной знак на превью — через GD/Imagick.

Что входит в работу и сроки

• Аналитика и прототипирование структуры портфолио, услуг, календаря.
• Дизайн макета с упором на мобильную версию.
• Настройка инфоблоков, генерации миниатюр, кэширования.
• Разработка клиентского кабинета с авторизацией и онлайн-записью.
• Интеграция CDN, оптимизация Core Web Vitals.
• Передача документации, обучение, пост-запускная поддержка.

Итого: 7–9 недель. Критично получить фотоматериалы заранее — обработка и загрузка занимают больше времени. Стоимость обсуждается индивидуально.

Получите консультацию инженера: свяжитесь с нами для обсуждения вашего проекта. Мы предложим оптимальное решение под ваши задачи.