Размеры, которые стоит знать
| Пресет | Размер | Для чего | | --- | --- | --- | | OG | 1200 × 630 | Open Graph, карточки ссылок | | Квадрат | 1080 × 1080 | лента Instagram, плитки товаров | | Сторис | 1080 × 1920 | сторис, вертикальное видео | | Обложка | 1600 × 900 | шапки страниц, встраивания 16:9 | | Превью | 400 × 300 | миниатюры в списках, карточки | | Аватар | 256 × 256 | фотографии профиля |
Заглушка должна выглядеть заглушкой
Самая дорогая ошибка прототипирования — заглушка, достаточно убедительная, чтобы дожить до релиза. Серый прямоугольник с подписанными размерами невозможно принять за фотографию — поэтому подпись с размерами и стоит здесь по умолчанию.
Сетка поверх решает другую задачу: она показывает, как изображение ведёт себя при
object-fit: cover в контейнерах разного размера, — на сетке кадрирование видно
сразу.
Почему обычно правильный ответ — SVG
Заглушка 1200 × 630 в SVG весит около 300 байт. То же изображение в PNG — десятки килобайт. SVG остаётся чётким на retina-экране, в печатном разрешении и при масштабировании прототипа до 200%. Случая, когда растровая заглушка меньше или чётче, не существует — бывают только случаи, когда инструмент не принимает вектор.
Генерируется на вашем устройстве
Canvas рисует в браузере, файл создаётся локально. Ни сетевого запроса, ни зависимости от сервиса — и работает без интернета.
Вопросы
Чем плохи сервисы-заглушки?+
Тем, что удалённая заглушка — это сторонний запрос при каждой загрузке прототипа: медленнее, не работает офлайн, сообщает владельцу сервиса, что вы делаете, и перестаёт работать в день, когда сервис закроется, — с популярными такое случалось не раз. У локальной генерации ни одной из этих проблем нет.
Какой формат выбрать?+
SVG, если что-то его не отвергает. Это несколько сотен байт, чёткость на любом размере и масштабирование без второго файла. PNG — когда инструмент требует растр, а JPG или WebP — только если вы специально проверяете, как выглядят артефакты сжатия.
Можно ли использовать их в продакшене?+
Как осознанные заглушки — пустое состояние, отсутствующий аватар — да. Главное, чтобы в интерфейсе они были обозначены как заглушки и никогда не читались как реальный контент.
Какой размер нужен для Open Graph?+
1200 × 630. Это пресет здесь, и именно из него кадрируют все крупные площадки. Всё уже 600 px по ширине может быть просто проигнорировано.