mod: как делать превью галереи и не "обрушить" браузер!

_blueprint/plan-draft.md

@@ -311,6 +311,16 @@ pixels = image.quantize(colors=256)  # или custom median-cut
 - Пагинация: 24 карточки на странице
 - `GET /gallery/{hash}` — полноэкранный просмотр SVG с кнопками "Скачать" и "Поделиться"
 
+#### ВАЖНО: Оптимизация производительности рендеринга галереи (SVG-превью)
+- **Проблема:** Десятки карточек с тысячами анимированных SVG-элементов могут перегрузить браузер клиента (CPU/GPU при одновременной перерисовке).
+- **Решение для витрины галереи:**
+  - Карточки галереи выводятся через тег `<img src="..." loading="lazy">` (изолированный контекст рендеринга).
+  - Для предотвращения постоянного пожирания ресурсов анимация в SVG по умолчанию спит (`animation-play-state: paused`) и оживает только при наведении (`:hover { animation-play-state: running; }`).
+  - Дополнительно на контейнерах карточек используется CSS-свойство `content-visibility: auto` для отключения рендера невидимых вне экрана карточек.
+- **Выдача пользователю («Копировать» и «Скачать»):**
+  - Пользователю всегда отдается «чистый» полнофункциональный SVG со стандартно запущенной анимацией (без ограничений `animation-play-state: paused`).
+  - На бэкенде/сервисе при сохранении для галереи модификатор паузы/ховера может вшиваться по умолчанию либо подставляться/вырезаться на лету при выдаче пользователю.
+
 **CSS:**
 - Dev: Tailwind CDN (`<script src="https://cdn.tailwindcss.com"></script>`) + Purge content в конфиге
 - Prod: `collectstatic` → `whitenoise` обслуживает скомпилированную статику