Avatar Placeholder Image (150x150)
Create a 150x150 pixel square avatar placeholder for user profile images. Covers common avatar sizes, circular cropping with border-radius, and best practices.
Detailed Explanation
Avatar Placeholder — 150×150
Avatar images are small square profile pictures used across web applications, forums, social media platforms, and messaging apps. The most common avatar size is 150×150 pixels, though many applications display avatars at various sizes from 32px to 256px.
Common Avatar Sizes
| Context | Size | Notes |
|---|---|---|
| Comment threads | 32×32 or 40×40 | Tiny avatars next to text |
| Navigation bar | 36×36 or 48×48 | Header profile icon |
| Profile cards | 96×96 or 128×128 | Medium display |
| Profile page | 150×150 or 256×256 | Full profile view |
| Social media | 170×170 to 400×400 | Platform-specific |
Creating Circular Avatars
Most modern UIs display avatars as circles. You can achieve this in two ways:
- CSS border-radius — Apply
border-radius: 50%to a square image element. The image file remains square, but the browser renders it as a circle. - Built-in border radius — Use the Image Placeholder Generator's border radius slider set to half the image width (75px for a 150×150 image) to generate an already-circular image.
Choosing Colors for Avatar Placeholders
For multi-user systems, consider generating avatar placeholders with different background colors based on the user's name initial or ID. A common pattern:
A-D: #3B82F6 (blue)
E-H: #10B981 (green)
I-L: #F59E0B (amber)
M-P: #EF4444 (red)
Q-T: #8B5CF6 (purple)
U-Z: #EC4899 (pink)
This provides visual variety while maintaining a consistent design language.
Use Case
Developers building user profile systems need avatar placeholders to display before users upload their own photos. Design teams use avatar placeholders in wireframes and mockups to represent user-generated content areas.