Версия источника: 613500afd8eca5143b4094f6f5cd48e67844f8ff
Синхронизировано: 2026-11-11T03:48:23.836Z
Источник: https://github.com/sergey-from-riders/vibecoding-base/tree/613500afd8eca5143b4094f6f5cd48e67844f8ff

<a id="interface-server-thumbnails"></a>

# Серверные превью

## Коротко

Для таблицы сервер создаёт уменьшенную копию изображения до 50 px по большей стороне.

## Плохо

```text
<img src="original-6000px.jpg" width="50">
В строке скачиваются все 12 оригиналов.
```

## Хорошо

```text
<img src="thumbnail-50px.webp" width="50">
На одном превью: +11.
Оригинал открывается по явному действию.
```

## Почему

CSS-размер не уменьшает переданный файл. Производная копия сокращает трафик, а один кадр сохраняет компактную высоту строки.

## Когда применять

Размер 50 px — соглашение этого справочника для компактной таблицы. В медиаредакторе нужны более крупные превью. Соблюдайте доступ к приватным файлам; ошибка миниатюры не должна автоматически скачивать оригинал.

## Как проверить

- В сети браузера нет оригиналов при просмотре списка.
- Для 1 и 12 фото счётчик равен 0 и 11.

## Человек

Определяет размер и область использования превью.

## Агент

Создаёт производные файлы на сервере, кеширует их по версии оригинала.

## Пример применения

Изображение 6000×4000 превращается в 50×33. Фиксированное место под превью и заглушка при ошибке предотвращают скачок строки.

## Источники

- [<img> HTML image embed element - HTML | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img)

Уровень: Рекомендуется. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.

[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/server-thumbnails.md)