360-фото на 1С-Бітрікс: зберігання, плеєр, оптимізація

Покупець хоче оглянути товар з усіх боків до замовлення. Звичайна галерея з 8 фото не замінює можливість повернути об'єкт. 360-перегляд — це послідовність кадрів (24–72 знімки), які при перетягуванні створюють ілюзію обертання. Впровадження 360-фото на Бітрікс — нетривіальна інженерна задача: потрібно продумати схему зберігання, вибрати плеєр, забезпечити швидке завантаження на мобільних. Результат правильної реалізації — зниження повернень і зростання конверсії. Зазвичай магазини стикаються з проблемами: повільне завантаження, відсутність підтримки touch, складність оновлення кадрів. Ми вирішуємо ці проблеми комплексно. Налаштуємо 360-фото на 1С-Бітрікс під ключ: реалізуємо зберігання, плеєр, попереднє завантаження та WebP-оптимізацію. Замовте налаштування — зв'яжіться з нами.

Як налаштувати 360-фото товарів на 1С-Бітрікс?

360-кадри зберігаються як звичайні зображення, прив'язані до товару через властивість інфоблоку типу «Файл» (F) з прапорцем «Множинне». Властивість створюється з кодом, наприклад, IMAGES_360.

При додаванні кадрів через адміністративну частину вони зберігаються в b_iblock_element_property з PROPERTY_TYPE = 'F' — кожен кадр окремим рядком зі спільним IBLOCK_ELEMENT_ID та IBLOCK_PROPERTY_ID.

Отримання кадрів для фронтенду:

$element = \CIBlockElement::GetByID($productId)->GetNextElement();
$props   = $element->GetProperties();
$frames  = $props['IMAGES_360']['VALUE'];

// $frames — масив ID файлів з b_file
$frameUrls = array_map(function($fileId) {
    return \CFile::GetPath($fileId);
}, (array)$frames);

// Передати в JSON для JS-плеєра
echo json_encode(['frames' => $frameUrls]);

Порівняння способів зберігання

Якщо у вас каталог із тисячами SKU, другий спосіб кращий: він дозволяє перевикористовувати один набір кадрів для кількох товарів і централізовано керувати завантаженням.

JavaScript-плеєр для 360: який обрати?

Найпростіша реалізація без сторонніх бібліотек — на Canvas або CSS background-position. Для production використовуйте одне з готових рішень:

CSS-спрайт найлегший, але вимагає попередньої обробки. Canvas дає більше контролю. three-sixty.js — повноцінне рішення з інерцією та зумом, але залежить від jQuery.

Реалізація на базі CSS-спрайта (коли всі кадри склеєні в один горизонтальний спрайт):

class Viewer360 {
    constructor(el, frames) {
        this.el     = el;
        this.frames = frames;
        this.total  = frames.length;
        this.current = 0;
        this.dragging = false;
        this.startX   = 0;

        this.img = new Image();
        this.img.src = frames[0];
        el.appendChild(this.img);

        el.addEventListener('mousedown', e => { this.dragging = true; this.startX = e.clientX; });
        document.addEventListener('mouseup', () => { this.dragging = false; });
        document.addEventListener('mousemove', e => this.onMove(e));

        // Touch
        el.addEventListener('touchstart', e => { this.dragging = true; this.startX = e.touches[0].clientX; });
        document.addEventListener('touchend', () => { this.dragging = false; });
        document.addEventListener('touchmove', e => this.onMove(e.touches[0]));
    }

    onMove(e) {
        if (!this.dragging) return;
        const delta = e.clientX - this.startX;
        if (Math.abs(delta) > 5) {
            this.current = (this.current + (delta > 0 ? 1 : -1) + this.total) % this.total;
            this.img.src = this.frames[this.current];
            this.startX  = e.clientX;
        }
    }
}

Ініціалізація в шаблоні компонента bitrix:catalog.element:

new Viewer360(
    document.getElementById('viewer-360'),
    <?= json_encode($frameUrls) ?>
);

Чому попереднє завантаження обов'язкове для UX?

При лінивому завантаженні кадрів обертання буде лагати при першому прокруті. Правильний підхід — попередньо завантажити всі кадри в фоні після завантаження сторінки:

function preloadFrames(urls) {
    return Promise.all(urls.map(url => {
        return new Promise(resolve => {
            const img = new Image();
            img.onload = resolve;
            img.src    = url;
        });
    }));
}

preloadFrames(frameUrls).then(() => {
    // Розблокувати управління після завантаження
    document.getElementById('viewer-360').classList.remove('loading');
});

До завершення попереднього завантаження контейнер блокується спінером.

Оптимізація: WebP і розмір кадрів

36 кадрів по 800×600px у JPEG 80% = ~3–5 МБ загальної ваги. Для мобільних мереж це багато. Оптимізація:

• Конвертація в WebP — стиснення на 25–35% краще за JPEG за тієї ж візуальної якості.
• Зменшення роздільної здатності кадрів до 600×450 — для 360-обертання цього достатньо.
• Прогресивне завантаження: спочатку показувати перший кадр, інші — в фоні.

Бітрікс генерує WebP через \CFile::ResizeImageGet() з параметром 'format' => 'webp' починаючи з певних версій. Для старих версій — зовнішній конвертер через exec('cwebp ...') при завантаженні зображень. Детальніше за документацією.

Як ми це робимо: процес і терміни

Ми не просто вставляємо готовий код — адаптуємо рішення під ваш каталог, навантаження та тип товарів. Етапи:

1. Аудит поточного каталогу та інфраструктури.
2. Проектування схеми зберігання (властивість або окремий інфоблок).
3. Інтеграція JavaScript-плеєра з обробкою touch і drag.
4. Оптимізація зображень (WebP, ресайз, прогресивне завантаження).
5. Тестування на мобільних і десктопі.
6. Деплой і передача документації.

Орієнтовні терміни — від 3 до 7 робочих днів залежно від обсягу каталогу. Точні терміни розраховуємо після аналізу. Отримайте консультацію інженера — зв'яжіться з нами.

Що входить у роботу

• Створення інфоблоку або властивості для зберігання 360-кадрів з міграціями.
• Готовий JavaScript-плеєр з попереднім завантаженням і підтримкою touch.
• WebP-конвертер (якщо потрібен) і налаштування ресайзу.
• Інтеграція в штатний компонент bitrix:catalog.element.
• Тестування на реальних товарах.
• Документація щодо завантаження кадрів та налаштування.
• Підтримка після релізу протягом місяця.

Замовте налаштування 360-фото — підвищте конверсію каталогу.

Що включає професійне встановлення 1С-Бітрікс

Ми починаємо встановлення 1С-Бітрікс з перевірки innodb_buffer_pool_size. Дефолтне значення MySQL (128 МБ) — вирок для інтернет-магазину з каталогом на 10 000+ товарів. Ми ставимо 70–80% від доступної RAM на виділеному сервері, 50% на VPS. Одна ця налаштування прискорює сайт у 2–3 рази порівняно з дефолтом. Правильна конфігурація сервера заощаджує до 60% вартості хостингу щомісяця. Оцінимо ваш проєкт за один день — отримайте консультацію. Звертайтеся, щоб замовити встановлення під ключ з гарантією продуктивності.

Як вибрати хостинг та редакцію для встановлення 1С-Бітрікс?

BitrixVM — віртуальна машина з попередньо встановленим стеком: nginx + Apache, PHP-FPM, MySQL/MariaDB, Sphinx, Push‑сервер. Для VPS — найкращий старт. Все вже сконфігуровано під Бітрікс, включаючи OPcache, логротацію та firewall. Керування через веб‑панель на порту 8890.

VPS/VDS — золота середина. Мінімальна конфігурація для середнього інтернет‑магазину: 2 vCPU, 4 ГБ RAM, SSD. Оптимальна: 4 vCPU, 8 ГБ RAM. ОС: Ubuntu 22.04 або Debian 12. Якщо не BitrixVM — налаштовуємо стек вручну під задачу. Віртуальний хостинг — тільки для візиток та лендінгів. Вимоги: PHP 8.0+, MySQL 5.7+ / MariaDB 10.0+, 512 МБ RAM, .htaccess. Хостинг‑партнери 1С-Бітрікс — гарантія сумісності. Виділений сервер — для highload. Типова архітектура: веб‑сервер окремо, база даних окремо, Redis/Memcached окремо. На редакції «Ентерпрайз» — веб‑кластер з балансувальником. Хмара (Yandex Cloud, VK Cloud, Selectel) — коли навантаження стрибає: розпродажі, сезонні піки. Автомасштабування через Managed Kubernetes або просто вертикальне масштабування VM.

Вибір редакції — не менш важливий крок. Часта помилка: беруть «Малий бізнес» для магазину, який через півроку виростає до B2B з оптовими цінами та трьома складами. Перехід на «Бізнес» — доплата різниці, дані не втрачаються, але краще передбачити заздалегідь. Наші фахівці підберуть редакцію під поточні завдання і з запасом на зростання. Наприклад, ліцензія «Бізнес» окупається за рахунок мультискладу та обміну з 1С, а неправильний вибір призводить до додаткових витрат, які можуть у 2–3 рази перевищити вартість ліцензії.

Які налаштування сервера критичні для 1С-Бітрікс?

Веб‑сервер та PHP

nginx як reverse proxy + Apache (mod_php) або nginx + PHP-FPM напряму. Другий варіант економить пам’ять — Apache не потрібен. Але деякі модулі Бітрікс використовують .htaccess, тому для сумісності іноді залишаємо Apache. Конфігурація nginx: fastcgi_read_timeout 300 — для довгих операцій (імпорт з 1С), client_max_body_size 1024m — завантаження великих файлів. Закриваємо доступ до .settings.php, .settings_extra.php, bitrix/.settings.php — там паролі до бази. Rewrite‑правила з urlrewrite.php — Бітрікс сам генерує, але при nginx + PHP-FPM потрібно продублювати. PHP 8.0–8.2 з розширеннями: mbstring, curl, gd, xml, json, opcache, redis/memcached. Ключові налаштування php.ini: opcache.memory_consumption=256, opcache.max_accelerated_files=20000, max_execution_time=300, memory_limit=512M, upload_max_filesize=100M, post_max_size=128M. Порівняно з Apache + mod_php, зв’язка nginx + PHP-FPM споживає на 30% менше оперативної пам’яті при однаковому навантаженні — це підтверджено на наших проєктах.

База даних та кешування

MySQL/MariaDB. Ключові параметри my.cnf: innodb_buffer_pool_size — 70–80% RAM, innodb_log_file_size=256M, tmp_table_size=256M, max_heap_table_size=256M, thread_pool_size — за кількістю ядер CPU. Кодування utf8mb4 обов'язково, інакше емодзі та спецсимволи ламаються. Redis кращий за Memcached для Бітрікс — підтримує persistent connections та більш надійний. Налаштовуємо в .settings_extra.php:

'cache' => ['value' => ['type' => ['class_name' => '\\Bitrix\\Main\\Data\\CacheEngineRedis']]]
'session' => ['value' => ['mode' => 'default', 'handlers' => ['general' => ['type' => 'redis']]]]

Redis прискорює роботу сайту в 1.5 рази порівняно з Memcached завдяки постійним з’єднанням та вбудованому кешуванню сесій.

SSL, пошта та cron

SSL — Let's Encrypt через certbot у 90% випадків. Редирект HTTP → HTTPS (301), HSTS, TLS 1.2/1.3, OCSP Stapling. У Бітрікс перемикаємо на HTTPS у налаштуваннях головного модуля. Пошта: відмовляємося від mail() — підключаємо SMTP (Яндекс.Пошта для домену, Mail.ru для бізнесу). Обов'язково налаштовуємо SPF, DKIM, DMARC. Без SPF листи потрапляють у спам. Тестуємо доставляння через mail‑tester.com — оцінка 9+/10. Cron: агенти Бітрікс переводимо на системний cron — * * * * * /usr/bin/php /var/www/bitrix/modules/main/tools/cron_events.php. На cron вішаємо обмін з 1С (15–60 хв), пошукову переіндексацію, бекапи (mysqldump + rsync, ротація 7+4), очищення тимчасових файлів.

Безпека та адміністрування

Файлова система: власник www-data, директорії 755, файли 644, upload 775. nginx блокує доступ до файлів конфігурації. Вмикаємо Проактивний захист Бітрікс — WAF, контроль активності (блокування після 5 невдалих спроб), перевірку цілісності ядра. Для адмін‑панелі: двофакторна аутентифікація через Google Authenticator або OTP, обмеження доступу за IP через nginx для параноїків.

Скільки часу займає встановлення 1С-Бітрікс та налаштування?

Перевірка після встановлення (покроковий чек‑лист)

1. Монітор продуктивності (/bitrix/admin/perfmon_panel.php) — цілимося в 30+ балів. Нижче 20 — є серйозні проблеми з конфігурацією.
2. Перевірка системи — автоматична перевірка всіх параметрів. Червоні пункти — виправляємо обов'язково, жовті — за ситуацією.
3. Сканер безпеки — перевірка на типові вразливості.
4. PageSpeed Insights — TTFB < 200мс на VPS, LCP < 2.5с.
5. Тестовий обмін з 1С — якщо планується інтеграція, перевіряємо CommerceML‑обмін до запуску.

Додатково перевіряємо версії ПЗ, налаштування кешування, роботу cron, SSL‑сертифікат, SPF/DKIM/DMARC, права доступу, видалення дефолтних користувачів та сторінок. Для проєктів з 54‑ФЗ переконуємося, що налаштована фіскалізація через ОФД‑провайдера.

Що входить у роботу (deliverables)

• Повністю налаштований сервер під 1С-Бітрікс з оптимізацією MySQL, PHP, nginx.
• Встановлена та активована ліцензія потрібної редакції.
• SSL‑сертифікат, поштові налаштування, cron та бекапи.
• Документація: всі параметри конфігурації, доступи, cron‑завдання.
• Навчання контент‑менеджера: як заходити до адмінки, додавати товари, завантажувати зображення.
• Підтримка після встановлення протягом 30 днів — консультації з налаштувань.

Чому варто довірити встановлення професіоналам?

Неправильне встановлення — втрата часу та грошей. Ми бачили проєкти, де магазин на «Старті» не міг витримати 50 відвідувачів, тому що не було налаштовано innodb_buffer_pool_size. Після перенесення на VPS з правильною конфігурацією сайт «полетів». Неправильна конфігурація призводить до невиправданих витрат — іноді в 2–3 рази дорожче, ніж вартість професійного налаштування. Ви отримуєте готову архітектуру, яка масштабується. Замовте встановлення 1С-Бітрікс під ключ — й отримайте надійну платформу для зростання бізнесу. Зв'яжіться з нами — розрахуємо вартість під ваш проєкт. Досвід понад 7 років, реалізовано 120+ проєктів на Бітрікс, включаючи highload‑магазини з каталогами понад 100 000 товарів. Звертайтеся — ми допоможемо налаштувати Бітрікс під ваш проєкт.