← всі звіти · feedback_banner_packshots_method.md

name: Banner pack-shots — методологія пошуку зображень description: Як правильно знаходити і вставляти pack-shot SKU у інтерактивні банери. Без цього ми кожного разу спотикаємось. type: feedback originSessionId: 256f068c-ce5f-41dd-917f-a62a834b8c2a

Banner pack-shots — як шукати

Why: Кожний рекламний банер вимагає реальних зображень упаковок (Menopace 2025, Schönen, Filtrum тощо). Без них дизайнер віддає CSS-плашки → продакт-менеджер зразу відхиляє. Сергій каже: «ми часто спотикаємось через PIC, бажано наступного разу знав як це робиться».

How to apply

Крок 1. Йти на офіційний бренд-сайт

Кожен бренд Deltamedical має свій бренд-сайт: menopace.ua, schonen.com.ua, proflex.ua тощо. Не Google Images, не Pinterest, не Yandex — там старі версії або чужі підробки.

Крок 2. Витягти sitemap або product catalog

curl -s -A "Mozilla/5.0" https://<brand>.ua/ -o /tmp/home.html
# Шукати: посилання на /products/, /catalog/, /<sku-name>/
grep -oE 'href="[^"]+"' /tmp/home.html | sort -u | grep -iE 'product|catalog|<keyword>'

curl -s -A "Mozilla/5.0" https://<brand>.ua/products/ -o /tmp/products.html
# Витягти URL pack-shot:
grep -oE 'src="[^"]+\.(png|jpg|webp)"' /tmp/products.html

Крок 3. Перевагти WebP / 1024px / TopFront-Straight

Бренд-сайти (особливо WordPress) генерують кілька розмірів одного фото: thumbnails (200px), medium (749px), large (1024px), scaled (2560px). Для банера 300×600 беремо 749-1024 px webp:

Достатньо для retina rendering
Розмір файлу ~70-200 KB (ШВИДКЕ завантаження)
WebP стиснутий у 4× краще за PNG

Файли часто названі консистентно — наприклад Menopace_Original_2025_TopFront_Straight-749x1024.webp. Це сигнал: TopFront-Straight = pack-shot спереду на білому/прозорому, фірмовий рендер.

Крок 4. Перевірити hot-link permission

# Без referer
curl -s -o /dev/null -w "HTTP %{http_code}\n" "https://<brand>.ua/wp-content/.../pack.webp"
# З нашим referer (cross-origin embed)
curl -s -o /dev/null -w "HTTP %{http_code}\n" -H "Referer: http://31.131.26.203/" "https://<brand>.ua/.../pack.webp"

Якщо обидва 200 → можна embed напряму через <img src="...">. Якщо блокується (403/429) — треба завантажити локально у /srv/reports/assets/<brand>/ і подавати з нашого хосту.

Крок 5. Вставити в банер

<div class="pack-trio">
  <div class="pack original">
    <img class="pack-photo" src="https://<brand>.ua/wp-content/uploads/.../Original-749x1024.webp" alt="..." loading="lazy">
    <div class="pack-bottom">Оріджинал</div>
  </div>
  <!-- Plus, Night... -->
</div>

CSS: .pack-photo { width: 100%; height: 100%; object-fit: contain; }

Крок 6. Підстрахуватись

Додати loading="lazy" — щоб не блокувало рендер банера
onerror="" fallback на локальну CSS-плашку (на випадок якщо CDN брендсайту впав)
Перевірити banner у Incognito/іншому браузері перед відправленням продакту — кеш Chrome у тебе може показувати старий рендер

Крок 7. Якщо бренд-сайт не публічний (preview, staging, password-protected)

Альтернативи:

Запитати маркетинг-команду надіслати pack-shots напряму
Завантажити з прес-кіту бренду (часто є /press/ або /media/ розділ)
Vitabiotics UK офіційний сайт vitabiotics.com — має press kit з англомовними назвами SKU

НЕ робити

❌ Google Images — старі версії, копірайт-ризики
❌ Aliexpress / Rozetka product photos — там часто упаковки інших країн
❌ Скріншот з Chrome DevTools → ріжуть якість, видно UI бренд-сайту
❌ AI-згенеровані зображення упаковок — продакт-менеджер відразу відрізнить

Приклад: Menopace 2026-05-01

Знайдено 3 SKU з консистентним патерном Menopace_<SKU>_2025_TopFront_Straight:

Original: https://menopace.ua/wp-content/uploads/2025/04/Menopace_Original_2025_TopFront_Straight-749x1024.webp
Plus: https://menopace.ua/wp-content/uploads/2025/04/Menopace_Plus_2025_TopFront_Straight-737x1024.webp
Night: https://menopace.ua/wp-content/uploads/2025/04/Menopace_Night_2025_TopFront_Straight-scaled.webp

URL тесту менопаузи (CTA «Детальне тестування»): https://menopace.ua/test-indeks-za-kupermanom/

Hot-link перевірено — Cloudflare не блокує, Referer не критичний.