Complete Guide to Avatar Generation API Integration

The S11 Avatar API is the fastest and most reliable way to generate professional profile pictures from names. In this comprehensive guide, we'll walk you through everything you need to know about integrating our API into your applications.

Getting Started

The S11 Avatar API is completely free and requires no authentication. Simply make HTTP GET requests to generate avatars instantly.

Basic Usage

// Basic avatar generation
const avatarUrl = 'https://www.s11-avatar.com/api/avatar?name=John+Doe';

// Use in HTML
<img src="${avatarUrl}" alt="Avatar" />

Live Demo:

John Doe

Generated with default settings

React Integration

import React from 'react';

const Avatar = ({ name, size = 64 }) => {
  const avatarUrl = `https://www.s11-avatar.com/api/avatar?name=${encodeURIComponent(name)}&size=${size}`;
  
  return (
    <img 
      src={avatarUrl} 
      alt={`Avatar for ${name}`}
      width={size}
      height={size}
      className="rounded-full"
    />
  );
};

export default Avatar;

Vue.js Integration

<template>
  <img 
    :src="avatarUrl" 
    :alt="`Avatar for ${name}`"
    :width="size"
    :height="size"
    class="rounded-full"
  />
</template>

<script>
export default {
  props: {
    name: String,
    size: {
      type: Number,
      default: 64
    }
  },
  computed: {
    avatarUrl() {
      return `https://www.s11-avatar.com/api/avatar?name=${encodeURIComponent(this.name)}&size=${this.size}`;
    }
  }
}
</script>

Advanced Customization

Custom Colors

Custom Blue

background=0D8ABC

Custom Red

background=dc2626

Custom Green

background=059669

// Custom background and text colors
const customAvatar = 'https://www.s11-avatar.com/api/avatar?name=Jane+Smith&background=0D8ABC&color=ffffff';

Random Colors for Dynamic Content

User 1

User 2

User 3

User 4

// Generate random colors for unique avatars
const randomAvatar = 'https://www.s11-avatar.com/api/avatar?name=User&background=random&color=random';

Full Parameter Example

Professional Avatar

All parameters customized for professional look

• • Size: 128px
• • Font size: 0.4
• • Length: 2 characters
• • Rounded corners
• • Bold text
• • Uppercase

const fullCustomAvatar = 'https://www.s11-avatar.com/api/avatar?' + new URLSearchParams({
  name: 'Professional User',
  size: '128',
  'font-size': '0.4',
  length: '2',
  rounded: 'true',
  bold: 'true',
  uppercase: 'true',
  background: '1a202c',
  color: 'ffffff',
  format: 'png'
}).toString();

Best Practices

1. URL Encoding

Always encode names properly to handle special characters:

const safeName = encodeURIComponent('Nguyễn Văn A');
const avatarUrl = `https://www.s11-avatar.com/api/avatar?name=${safeName}`;

2. Error Handling

const AvatarWithFallback = ({ name }) => {
  const handleError = (e) => {
    e.target.src = '/default-avatar.png'; // Fallback image
  };

  return (
    <img 
      src={`https://www.s11-avatar.com/api/avatar?name=${encodeURIComponent(name)}`}
      alt="Avatar"
      onError={handleError}
    />
  );
};

3. Caching Strategy

The S11 Avatar API automatically caches generated images for optimal performance. For additional caching on your end:

// Cache avatar URLs in localStorage
const getCachedAvatar = (name, options = {}) => {
  const cacheKey = `avatar_${name}_${JSON.stringify(options)}`;
  let cached = localStorage.getItem(cacheKey);
  
  if (!cached) {
    const params = new URLSearchParams({ name, ...options });
    cached = `https://www.s11-avatar.com/api/avatar?${params}`;
    localStorage.setItem(cacheKey, cached);
  }
  
  return cached;
};

Performance Tips

Conclusion