Circle avatar image

Image styletype: "image"

Crop any photo into a ring-bordered circular avatar and swap the URL on every API call — perfect for profile-driven cards. Generate avatar images free.

Edit it — this is the actual editor panel

Design JSON — “Circle avatar” variant

{
  "title": "Image sample",
  "description": "A rounded dynamic photo",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-image",
      "key": "photo",
      "type": "image",
      "position": {
        "x": 250,
        "y": 60
      },
      "rotation": 0,
      "size": {
        "width": 300,
        "height": 300
      },
      "dynamic": true,
      "image": "https://picsum.photos/600/600",
      "properties": {
        "imageSize": "cover",
        "borderRadius": 150,
        "opacity": 1,
        "borderWidth": 4,
        "borderColor": "#4F46E5",
        "borderStyle": "solid"
      }
    }
  ]
}

Image examples

Real renders of the circle avatar image — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Speaker announcement avatar

A conference speaker photo in a green-ringed circle for the lineup card.

API overrides for this example

{
  "photo.imageSize": "cover",
  "photo.borderRadius": 120,
  "photo.borderWidth": 6,
  "photo.borderColor": "#10B981",
  "photo.borderStyle": "solid"
}

Author avatar on a dark OG card

A white-ringed author photo popping off a dark Open Graph background.

API overrides for this example

{
  "photo.imageSize": "cover",
  "photo.borderRadius": 150,
  "photo.borderWidth": 4,
  "photo.borderColor": "#F8FAFC",
  "photo.borderStyle": "solid"
}

When to use the circle avatar style

Personalized OG images with the author avatar
Community welcome cards for every new member
Speaker cards for event promotion

Use it dynamically via the API

Point '<key>.image' (or just '<key>') at any image URL per render; opacity, borders and padding can be overridden too.

Full API request with this variant's current values — the playground above sends only the properties you change

curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "photo.image": "https://picsum.photos/600/600",
    "photo.imageSize": "cover",
    "photo.borderRadius": 150,
    "photo.opacity": 1,
    "photo.borderWidth": 4,
    "photo.borderColor": "#4F46E5",
    "photo.borderStyle": "solid"
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other image styles

Default ContainCircle avatarPolaroid

See the image component page for the full property reference and FAQs.