You've got the headshots. A team page only works when those photos match, bios stay scannable, and a visitor can tell who does what without hunting.
A photographer typically charges $200 to $500 per person for an on-site team session. TeamShotsPro is from $29.99 per seat for 8 photos, minimum 2 seats, one-time, with a money-back guarantee. Each person uploads one selfie. Matching photos come back in about 60 seconds.
This guide is for founders, marketing teams, and HR teams building or redesigning the people page. If you only need your own portrait, start with Portreya. For a company-wide rollout, see company headshots.
Why Your Team Page Matters More Than You Think
Let's get the business case out of the way.
Your team page isn't a vanity project. It's a trust signal. When someone lands on your website for the first time — whether they're a prospective client, a job candidate, or a potential partner — one of their first moves is clicking "About" or "Team." They want to know who they're dealing with.
The psychology is straightforward. People trust people, not logos. A well-designed team page with consistent, professional headshots signals competence, attention to detail, and organizational maturity. A messy one signals the opposite.
Here's what we know from the data: LinkedIn profiles with professional headshots receive 21x more views and up to 9x more connection requests. The same principle applies to your company team page — the quality and consistency of your team's presentation directly shapes how visitors perceive your organization's credibility.
This is also an E-E-A-T play. Google's emphasis on Experience, Expertise, Authoritativeness, and Trustworthiness means that a well-structured team page with proper Person schema markup actively supports your site's search rankings. The people behind your company are a ranking signal.
Choosing the Right Layout for Your Team
Every team page starts with a layout decision. The format you choose should match your company size, industry, and what visitors are looking for when they click "Team."
The Grid Layout (Best for Most Companies)
A responsive card grid — 3-4 columns on desktop, 2 on tablet, 1 on mobile — is the standard for good reason. It's clean, scalable, and creates visual rhythm that reinforces the consistency of your team's presentation.
Each card includes: a headshot, name, title, and optionally a short bio (40-80 words) and a LinkedIn link. That's it. Don't overcomplicate it.
The grid works because it treats every team member equally within the visual space. When you pair it with consistent headshots — same lighting, same background, same framing — the effect is immediate and powerful. Visitors see a cohesive organization.
When to use it: Professional services, SaaS companies, financial services, healthcare, legal — basically any company where credibility matters more than creative flair.
The Staggered/Asymmetric Layout
Creative agencies and design studios sometimes use staggered layouts — offset columns, varied card sizes, or non-uniform grids. These can look distinctive but carry risk. If the headshots aren't perfectly consistent, a staggered layout amplifies the inconsistency instead of hiding it.
Companies like Pitch (the SaaS presentation tool) pull this off with a careful color treatment and hover effects that reveal additional information. But for every Pitch, there are fifty agency team pages where the staggered layout just looks messy.
When to use it: Creative agencies, design studios, or companies where visual experimentation aligns with your brand positioning. Only if your headshots are already perfectly consistent.
The Executive Spotlight + Full Team
For companies with 50+ people, a hybrid approach works well: feature leadership in a prominent section (larger cards, longer bios), then show the full team below in a compact grid. This serves both visitors who want to know "who's in charge" and those who want to see organizational depth.
GitLab does a particularly elegant version of this — they list all 2,500+ employees with filtering by department and expertise area, with optional headshots and LinkedIn links. It works because the underlying data is consistently structured.
When to use it: Mid-to-large companies (50-500+ employees) where showing both leadership and organizational depth matters. Especially strong for companies hiring actively — candidates want to see the full team.
Headshot Specifications for Web
Getting the technical specs right prevents the most common team page problems: slow loading, blurry images on retina displays, and inconsistent sizing that breaks your grid.
Dimensions and Format
Use square headshots (1:1 aspect ratio) for maximum flexibility across layouts. Here are the specs that work:
Source resolution: 1000x1000px — this gives you enough quality for retina displays while keeping file sizes manageable. Never go below 600x600px.
File format priority: WebP first (best compression-to-quality ratio), JPEG as fallback, PNG only if you need transparency for custom backgrounds. Avoid serving uncompressed PNGs for team headshots — file sizes balloon unnecessarily.
File size target: Under 300KB per headshot. 500KB is the absolute maximum. A team page with 30 members at 500KB each loads 15MB of images — that's painfully slow on mobile.
Responsive delivery: Use HTML srcset to serve appropriately sized images:
- Mobile: 400px width
- Tablet: 600px width
- Desktop: 800-1000px width
Performance Optimization
For team pages with more than 8-10 headshots, implement lazy loading. The HTML5 loading="lazy" attribute on below-fold images prevents the browser from downloading all 30 headshots simultaneously, cutting initial page load time dramatically.
Combine lazy loading with a subtle fade-in animation as images enter the viewport. This turns a performance optimization into a design feature — the page feels polished rather than patchy.
For AI-generated headshots from TeamShotsPro or similar platforms, the images arrive at high resolution. Always run them through an image optimizer (Squoosh, ShortPixel, or your CMS's built-in compression) before uploading to your team page.
The Consistency Test: What Makes or Breaks Your Team Page
I'll say it plainly: consistency matters more than any other design choice. A team page with average headshots that all match will always outperform one with a mix of stunning and terrible photos.
What "Consistent" Actually Means
Every headshot on your team page should match on these dimensions:
Background: Same color or treatment for every single team member. A solid neutral (light gray, white, or your brand color at low opacity) is the safest choice. "Office" backgrounds with blurred bookcases are harder to keep consistent and tend to look dated.
Lighting: Same direction, same warmth, same contrast. This is where AI headshot platforms have a massive advantage — they apply identical lighting parameters to every photo automatically. With traditional photography, achieving this across multiple sessions and locations is nearly impossible without a spec sheet that the photographer follows exactly.
Framing: Same crop, same head-to-frame ratio (face should fill 60-70% of the image), same amount of shoulder visible. The most common mistake: one person's headshot is cropped tight to their face while another's shows them from the waist up.
Color treatment: Same saturation, same color profile. Don't mix vivid, saturated headshots with desaturated, muted ones on the same page. If you're applying a brand color overlay or filter, apply it identically to all images.
Companies like Monzo (the bank) nail this — clean, consistent framing with blurred backgrounds, same crop on every photo. It doesn't need to be flashy. It needs to be uniform.
This is why we built TeamShotsPro with consistency as the core feature for teams. When every headshot is generated with the same AI settings — background, lighting, composition — you get the uniformity that makes team pages look polished. For details on how it works, see our complete guide to AI headshots for teams.
The Inconsistency Red Flags
Here's my informal checklist for spotting a team page that needs work:
- One person has a vacation selfie, another has a studio portrait — instantly unprofessional
- Three different background colors across ten headshots — signals disorganization
- Half the team is cropped to head-only, half shows full torso — inconsistent framing
- Some photos are high-resolution, others are pixelated — quality variance
- Two team members don't have photos at all — looks incomplete
Writing Team Bios That Work
Your headshots get attention. Your bios close the deal. Here's what works.
The Structure
Keep it simple and consistent. Every bio on the same page should follow the same structure:
For grid cards (40-80 words):
- Current role and what they're responsible for (1 sentence)
- Professional background or expertise area (1-2 sentences)
- One personal detail that humanizes them (1 sentence)
- Current role and scope of responsibility (1-2 sentences)
- Professional background and relevant experience (2-3 sentences)
- Key expertise areas or specializations (1-2 sentences)
- Education or notable credentials if relevant (1 sentence)
- Personal detail — hobby, location, something memorable (1-2 sentences)
The Golden Rule: Consistency in Length
Nothing looks worse than three team members with detailed, polished 80-word bios sitting next to one person with "John handles sales." It signals that some team members matter more than others, which is the opposite of the team cohesion you're trying to project.
Before publishing, enforce a word count range. If your target is 50-70 words, every bio should fall within that range. No exceptions. If someone submits a 200-word bio, edit it down. If someone submits nothing, write something for them based on their LinkedIn profile and get approval.
What to Include (and Skip)
Include: Current role, relevant experience, one unique personal detail (favorite hobby, where they're based, a fun fact). LinkedIn profile link — for guidance on optimizing those linked profiles, see our professional headshots for LinkedIn guide.
Skip: Full career history (save it for LinkedIn), generic filler ("passionate team player"), jargon-heavy titles that outsiders won't understand, and — please — no "guru" or "ninja" or "rockstar" in the title.
For wardrobe guidance that applies to both headshots and the overall team page aesthetic, see our what to wear for professional headshots guide.
Ordering Your Team: Hierarchy, Alphabetical, or Department?
How you order your team members sends a cultural signal. Choose deliberately.
Hierarchy-Based (Top to Bottom)
Leadership first — CEO, C-suite, VPs — then directors, managers, and individual contributors. This is the default for professional services firms (law, consulting, finance) where visitors want to quickly find who's in charge.
Pro: Matches visitor expectations in formal industries. Clearly signals organizational structure. Con: Can feel hierarchical or exclusionary in flat-culture organizations.
Alphabetical
Everyone's equal, sorted by last name. Common in startups, creative agencies, and companies that want to signal a collaborative, non-hierarchical culture.
Pro: No implicit ranking. Easy to maintain as the team grows. Con: Visitors have to search for specific people. Leaders aren't immediately visible.
Department-Based
Group by function — Engineering, Sales, Marketing, Operations — with each group having its own section or filter. Works well for mid-to-large companies where visitors might be looking for someone in a specific function.
Pro: Visitors can quickly find the right team. Shows organizational depth. Con: Requires more design work. Cross-functional roles can be awkward to place.
The Hybrid (Recommended for Growing Teams)
Feature leadership in a prominent top section (3-6 people with larger cards and longer bios), then show the full team below in a department-grouped or alphabetical grid with smaller cards. This serves both the "who's in charge?" and "how big is this team?" questions in one page.
Making It Work on Mobile
Over 50% of web traffic is mobile. If your team page looks great on desktop but breaks on a phone, you're failing more than half your audience.
The Mobile Grid
A 3-4 column desktop grid should collapse to a single column on mobile. Each card should stack vertically: headshot on top, name and title below, bio (if shown) below that. Test on actual devices — simulators miss rendering quirks.
Tap Targets
If you're using hover effects to reveal bios or LinkedIn links on desktop, you need a mobile alternative. Hover doesn't exist on touchscreens. Options: show bios by default on mobile, use a tap-to-expand accordion, or link the entire card to a detail view.
Image Loading
Mobile users are often on slower connections. This is where lazy loading and responsive image delivery (srcset) become critical. Load only what's visible in the viewport. For a 30-person team page, this can cut initial load time from 8+ seconds to under 2.
