Profile Image for Portfolio Website: Size, Crop, Format, Alt Text, and Rights

Use a close-up, head-and-shoulders portrait with your face clearly visible, even lighting, a simple background, and an expression and wardrobe that fit your portfolio. A studio is optional. Leave enough space around your head and shoulders for square, circular, desktop, and mobile crops.

Upwork’s profile-photo guidance also recommends a clearly visible head-and-shoulders image and says a professional studio is not required. Avoid distant shots, side views, covered faces, text, watermarks, and distracting effects. Read the guidance.

What a strong portfolio profile image looks like

Decision	Recommended choice	Reason
Framing	Head and shoulders, face near the center	Survives square, circle, card, and narrow mobile crops.
Expression	Natural and alert	Matches your professional tone without looking staged.
Lighting	Soft window light or a large diffused source	Shows eyes and facial features without harsh shadows.
Background	Plain or gently blurred	Keeps attention on your face.
Clothing	Consistent with the work you want	Supports your visual identity and audience expectations.
Color	sRGB/RGB export	Produces more predictable browser color.

Plan the crop before you take the photo

1. Decide where the image appears: hero section, author card, about page, favicon-like avatar, or team grid.
2. Sketch the smallest crop. A circular avatar usually needs more side and top space than a rectangular hero image.
3. Keep modest headroom and do not place the top of your head against the frame edge.
4. Take several expressions and posture variations. Choose the frame that feels natural and suits the portfolio’s tone.

Lighting, background, and pose

• Face a window or use a large soft light. Avoid direct noon sun and hard overhead lighting.
• Keep both eyes visible and remove sunglasses, hats, hair, or props that hide your face.
• Stand a little away from the background to reduce shadows and make separation easier.
• Use a relaxed shoulder angle and look toward the camera unless your brand specifically calls for a profile.
• Check the image at the final display size. Minor skin texture and background detail disappear at avatar sizes.

Choose the right dimensions and file format

Export a web copy close to the largest size the layout displays. Oversized originals increase transfer time without improving a small avatar. Adobe Portfolio documents JPEG for photographs, PNG for graphics or transparency, a maximum generated rendition width of 3840px, practical 300KB–1MB bands for standard images, and under 500KB for thumbnails. See Adobe’s image guidance.

Use	Format	Starting point
Normal portrait	JPEG	Export the displayed width or modestly larger; compress until facial detail remains clean.
Transparent cutout	PNG	Use only when transparency is required; files are often larger.
Modern delivery	WebP or AVIF when your stack supports it	Serve a fallback if older clients matter.

Use a quality setting that avoids visible blocking around hair and eyes. Keep the original master separately so you can re-export at another crop or size.

Responsive HTML and CSS

Use a real image element so browsers can select an appropriate rendition and assistive technology can read its alternative text.

<picture>
  <source
    type="image/webp"
    srcset="/images/jane-doe-ux-480.webp 480w,
            /images/jane-doe-ux-960.webp 960w"
    sizes="(max-width: 640px) 112px, 160px"
  />
  <img
    src="/images/jane-doe-ux-960.jpg"
    width="960"
    height="960"
    alt="Jane Doe, UX designer"
    loading="lazy"
    decoding="async"
  />
</picture>

.profile-image {
  width: 10rem;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: 50%;
}

@media (max-width: 640px) {
  .profile-image {
    width: 7rem;
  }
}

Set explicit width and height (or an aspect ratio) to prevent layout shifts. Adjust object-position if the default center crop cuts off your hair or shoulders. Do not lazy-load the portrait if it is the main above-the-fold image and your performance tooling identifies it as the largest contentful paint.

Write useful alt text

W3C requires text alternatives for informative images; decorative images should use an empty alt attribute. W3C’s image tutorial explains the distinction.

• Informative portrait: alt="Jane Doe, UX designer"
• Portrait next to a heading that already names Jane Doe: alt="" may avoid repetition if the image adds no new information.
• Decorative background: keep it out of the text alternative, or use CSS instead.

Use a descriptive filename such as jane-doe-ux-designer.jpg. Google recommends descriptive filenames and useful, context-appropriate alt text while warning against keyword stuffing; see Google’s image SEO documentation.

Confirm photo rights and privacy

Use a photograph you created or have permission to publish. The U.S. Copyright Office says the person who takes an original photograph is generally its author and initial copyright owner; review its photography guidance. For a commissioned portrait, keep the invoice, license, and any model release. For someone else’s image, obtain written permission that covers your website, portfolio, social sharing, and future edits.

Also consider recognizable people in the background, private locations, and whether the image reveals information you do not want public. The EU Publications Office recommends authorization and web optimization while accounting for privacy and personality rights; consult its publishing guidance.

Compress and publish a fast image

1. Keep a full-resolution master outside the web directory.
2. Crop the web copy to the largest actual display size, then create smaller responsive renditions.
3. Strip unnecessary metadata unless you need copyright or color-profile data.
4. Check the compressed file on a phone and at 100% zoom for ringing, banding, or muddy eyes.
5. Set long-lived cache headers for versioned filenames, such as jane-doe-ux-v2.jpg.

For a standard portrait, Adobe’s documented practical range is roughly 300KB–1MB; a small avatar should generally stay below 500KB. These are starting points, not requirements: the displayed dimensions and visual quality decide the final size.

Test every crop and device

• Check desktop, tablet, and narrow mobile widths.
• Test square and circular masks if your design uses both.
• Disable images or use a slow connection to verify that surrounding text still identifies you.
• Check keyboard focus and contrast around the image if it is a link.
• Confirm the image does not shift nearby headings while loading.

Or skip the browser setup

If you need to verify how the profile image and crop render on a live portfolio, ScreenshotNeo can capture the page through one request. Its consent step accepts cookie banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the verdict and billing status.

See the ScreenshotNeo API documentation for all options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://your-portfolio.example \
  -o portfolio.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://your-portfolio.example",
    },
    timeout=90,
)
r.raise_for_status()
open("portfolio.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://your-portfolio.example'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('portfolio.webp', image));

Useful capture options include full-page screenshots with lazy images loaded, a CSS-selector element capture, dark mode, device presets or custom viewports, retina scale, custom CSS and JavaScript, click-before-capture, selector hiding, waits for a selector, delay, or network idle, blocked ads/trackers/requests/resource types, custom headers/cookies/user agent/Authorization, timezone and geolocation, transparent backgrounds, resizing, a chosen cache TTL, signed links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, and a usage API. Every feature is available on every plan.

ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. Plans include 1,000 free shots per month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

Troubleshooting

Symptom	Likely cause	Fix
Top of head is cut off	Crop is centered too tightly	Add headroom to the source or move object-position upward.
Face looks soft	Displayed file is too small or over-compressed	Export near the largest display width and raise JPEG quality slightly.
Colors differ between devices	Non-sRGB profile or display differences	Convert the web copy to sRGB and inspect on more than one screen.
Page jumps while loading	No intrinsic dimensions	Set width/height or aspect-ratio.
Screen reader repeats the name	Alt text duplicates adjacent text	Use concise alt text or alt="" when the image is decorative.
Image is slow on mobile	Oversized original or missing responsive sources	Create srcset renditions, compress, and cache versioned files.
Screenshot shows a cookie banner	The capture tool did not dismiss consent UI	Use ScreenshotNeo’s consent handling or hide the selector before capture.
Screenshot request returns an error	Invalid key, inaccessible URL, or timeout	Check the key and public URL, increase the wait/timeout strategy, and inspect response headers including X-Page-Verdict and X-Billed.

DIY portrait or professional photographer?

Factor	DIY	Professional
Cost	Lowest cost; use available light	Fee for shooting, retouching, and sometimes licensing
Control	Easy to reshoot expressions and outfits	Photographer directs pose and lighting
Consistency	Depends on your setup	Repeatable lighting and color
Turnaround	Immediate	Schedule and editing time
Brand fit	You control the setting completely	Useful when you want polished art direction

Either approach can work. Choose the one that gives you a clear face, suitable crop, good light, and rights to publish.

FAQ

Do I need a professional headshot?

No. A well-lit, simple portrait made with a phone can work when the face is clear and the crop is intentional.

Should my portfolio photo be square?

Make the source flexible enough for square and circular crops. Exporting a square web copy is convenient, but the layout determines the final presentation.

Is PNG better than JPG for a headshot?

Usually JPEG for a normal photograph. Use PNG when you genuinely need transparency or graphic-style edges.

What should alt text say?

Identify the person and relevant role briefly, unless nearby text already provides that information and the image is decorative.

Can I use a photographer’s image?

Only when your license or written permission covers publication and the intended uses. The photographer commonly owns copyright unless an agreement states otherwise.

How often should I replace the image?

Replace it when your appearance, role, brand, or portfolio design changes enough that the current image misrepresents you.