API заглушек для аватаров

Живые примеры

Все изображения ниже отдаёт в реальном времени эндпоинт, описанный на этой странице.

200roundedsquareBPgriddotsdiagonalcheckerid 237grayblur 4colors

Быстрый старт

Вставьте URL прямо в тег img. Размеры задаются в пикселях, форма по умолчанию — круг, поэтому дополнительные стили не нужны.

<img src="https://blankpfp.com/api/avatar/seed/alice/200" alt="Alice" width="200" height="200">

Или используйте его как фон в CSS:

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-image: url("https://blankpfp.com/api/avatar/seed/alice/96");
  background-size: cover;
}

В JavaScript соберите URL из того, что идентифицирует пользователя:

avatar.src = 'https://blankpfp.com/api/avatar/seed/' + encodeURIComponent(user.email) + '/200';

Синтаксис URL

Все четыре формы принимают необязательную высоту. Добавьте .json к любой из них, чтобы получить метаданные, описанные ниже, вместо самого изображения.

Детерминированные сиды

Сид хешируется в один цвет из палитры из 48 оттенков, поэтому один и тот же сид всегда возвращает один и тот же аватар — без базы данных и без записи на диск. Подойдёт имя пользователя, адрес почты или идентификатор записи. Сиды с пробелами и спецсимволами нужно кодировать в процентах, а /api/avatar/id/ — это сокращение для числовых идентификаторов.

<img src="https://blankpfp.com/api/avatar/seed/alice/200" alt="alice">\n<img src="https://blankpfp.com/api/avatar/seed/bob/200" alt="bob">\n<img src="https://blankpfp.com/api/avatar/id/237/200" alt="record 237">

Параметры запроса

Все параметры необязательны и комбинируются. Нераспознанное значение возвращает 400 с пояснением в JSON вместо битой картинки.

HEX-цвета можно писать с решёткой и без неё, а трёхзначную запись вида #abc система развернёт. Без bg фон берётся из сида, без fg цвет чернил подбирается автоматически, чтобы текст оставался читаемым. Размытие сверх максимума обрезается до максимума, а не отклоняется, и инициалы никогда не длиннее двух букв.

Силуэты

Те же пятнадцать силуэтов по пояс, что и в генераторе, доступные по id или по названию. fg красит силуэт, а bg — фон, поэтому один и тот же id выглядит по-разному в каждой палитре.

Solid fill

defaultmalefemaleelderchildcartoonheadshotprofileroundheadhoodielonghairbuncapbeaniecurlytallathleticslimbroadpetitelargeshorthairwavyponytailpigtailsbaldrecedingafromohawksidepartbobfedoratophatberetcrownglasses_roundglasses_squareglasses_aviatorheadphonesbeard_fullbeard_goateemustachecollaredturtleneckscarftieprofile_leftprofile_righthipstersurfernerdexecutiveartist

Hollow outline (outline=1)

defaultmalefemaleelderchildcartoonheadshotprofileroundheadhoodielonghairbuncapbeaniecurlytallathleticslimbroadpetitelargeshorthairwavyponytailpigtailsbaldrecedingafromohawksidepartbobfedoratophatberetcrownglasses_roundglasses_squareglasses_aviatorheadphonesbeard_fullbeard_goateemustachecollaredturtleneckscarftieprofile_leftprofile_righthipstersurfernerdexecutiveartist

Попробуйте

Выберите любую аватарку на этой странице, затем поменяйте параметры ниже. Превью и код обновятся сразу, и скопируется ровно то, что отдаёт эндпоинт.

Превью

Форма circle rounded square Текстура solid grid dots diagonal checker Инициалы

Фон авто

Передний план авто

Размытие

0

Outline Оттенки серого

Сбросить

URL

Форматы ответа

Изображения отдаются в SVG: обычный аватар занимает от 200 до 1000 байт и остаётся чётким при любой плотности пикселей. Добавьте .json к тому же URL, чтобы вместо картинки получить вычисленные цвета — это удобно, чтобы подогнать оформление интерфейса под аватар.

{
  "ok": true,
  "mode": "seed",
  "seed": "alice",
  "width": 200,
  "height": 200,
  "shape": "circle",
  "pattern": "solid",
  "figure": null,
  "background": "#9CA3AF",
  "foreground": "#111827",
  "initials": null,
  "outline": false,
  "grayscale": false,
  "blur": 0,
  "format": "svg",
  "bytes": 266,
  "url": "https://blankpfp.com/api/avatar/seed/alice/200/200.svg",
  "info": "https://blankpfp.com/api/avatar/seed/alice/200/200.json"
}

Некорректные запросы получают 400 и тело в JSON:

{
  "ok": false,
  "error": "invalid_parameters",
  "errors": ["pattern: expected one of solid, grid, dots, diagonal, checker"],
  "docs": "https://blankpfp.com/docs"
}

Кеширование и ограничения

URL с сидом — чистая функция адреса, поэтому отдаются с неизменяемым кеш-заголовком на год и ETag. Поставьте CDN перед приложением, и после первнего запроса картинки будут стоить вам ноль. Ширина и высота — от 16 до 2048 пикселей; большие значения приводятся к пределу, а не отклоняются, и итоговый размер возвращается в JSON. Чтобы показывать новую картинку при каждом запросе, добавьте ?random= с любым значением.

Частые вопросы

Связанные инструменты