Оновлено листопад 2025

High-Resolution Media Gallery

Повна бібліотека візуальних активів для Science Portal: AR/VR рендери, ілюстрації симуляцій, відео-демонстрації, інфографіка та динамічні банери. Всі матеріали оптимізовано під SEO, доступність та швидкість завантаження.

МСький набір (Core Collection)

4K • PNG

Quantum Field Lab

Високоякісний рендер для симуляції квантових полів. Використання: hero-banner, друковані матеріали.

8K • EXR

Cellular Universe

3D-ілюстрація клітинної структури для AR-досліджень, інтерактивні презентації, друк A2.

6K • JPG

Aurora Nebula

Космічний рендер із NASA даних. Призначення: статті, фони для `learning-pathways.html`, презентації.

4K • GIF/WebM

Reaction Dynamics

Анімований цикл хімічних реакцій. Вбудовується на `simulation-builder.html` та сторінки симуляцій.

Пайплайн виробництва

  1. Бриф і moodboard (Figma) + технічні вимоги (роздільна здатність, стиль, цільова сторінка).
  2. 3D-моделювання (Blender, Houdini) + симуляції (Unity/Unreal).
  3. Пост-обробка: тонування, шумозаглушення, експорт у 4K/8K.
  4. Оптимізація: WebP/AVIF, lazy-load, генерація різних розмірів (Cloudinary pipeline).
  5. Метадані: alt-тексти, licencing, JSON-LD `ImageObject` для SEO.

Контроль якості

  • 🔍 Pixel-perfect review (QA чек-листи, контроль артефактів).
  • 🖥️ Перевірка на HDR/SDR, mobile/desktop viewport.
  • ♿ Перевірка контрасту (WCAG 2.1), читабельність тексту поверх зображень.
  • 📂 Ведення реєстру у Notion + Git LFS для raw-файлів.
  • 📊 Автоматичні тести Lighthouse + Pa11y для сторінок з галереями.

Метрики використання

120+

HD/4K/8K зображень у продакшені

18TB

Обсяг сирих матеріалів у хмарному архіві

7.4%

Зростання CTR після оновлення галереї (Q3→Q4)

98%

Позитивних відгуків щодо якості медіа

Автоматизація публікації

name: Media Pipeline
on:
  push:
    paths:
      - \"assets/images/gallery/**\"
jobs:
  optimize-and-publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Generate Variations
        run: python scripts/automation/media_variants.py --input assets/images/gallery --sizes 3840,1920,1280
      - name: Upload to CDN
        run: node scripts/automation/upload_cdn.js --dir assets/images/gallery
      - name: Refresh Cache
        run: curl -X POST https://cdn.scienceportal.ua/purge

Логи зберігаються у Cloud Logging, алерти налаштовані через PagerDuty.

FAQ (10)

1. Які формати доступні?

PNG, JPG, WebP для зображень; GIF, WebM, MP4 для анімацій; EXR для постпродакшну; GLB для 3D сцен.

2. Яка політика ліцензування?

Creative Commons BY-NC для освітніх партнерів; комерційна ліцензія за погодженням з командоюbranding@scienceportal.ua.

3. Як шукати потрібні активи?

Використовуйте тегування в DAM (Bynder), введіть тему/напрям, формат, колірну палітру, рівень складності.

4. Чи доступні PSD/AI файли?

Так, вони зберігаються у внутрішньому S3 bucket. Запит через Jira «Media Request».

5. Як генеруються прев’ю?

Node-скрипт `media_generate_previews.js` + Sharp. Є варіанти 640px та 1280px.

6. Чи підтримуються локалізовані версії?

Так, для інтерфейсів з текстами ми створюємо 66 локалізованих шарів у Figma + автоматизований експорт.

7. Як оновити старий банер?

Створіть заявку в Notion «Media Refresh», оберіть цільову сторінку, додайте дедлайн і особливі вимоги (доступність, контраст).

8. Які рекомендації для соціальних мереж?

Формати 1080x1080, 1920x1080, 4:5. Обов’язкові alt-тексти, CTA, локалізовані тексти, контроль бренду.

9. Чи можна використовувати матеріали в друці?

Так, завантажуйте оригінальні 4K/8K, дотримуйтеся профілів CMYK, додавайте bleed 3 мм.

10. Як відстежувати перформанс?

Метрики з GA4 (event `media_view`), heatmap (Hotjar), експерименти (Google Optimize), дашборд у Looker Studio.

📊 Перейти до інфографіки симуляцій