How to Create a Photo Website Portfolio

Direct answer: create a focused site around one audience and one action. Choose a platform and domain, publish a small set of strong galleries, add About and Contact pages, optimize every image for speed and accessibility, then test the site on phones before launch.

1. Define the portfolio’s purpose

Start by deciding what the site must help a visitor do. A portfolio for wedding clients needs a different structure from one used for editorial submissions or print sales.

Client inquiries: show relevant projects, services, availability and a prominent inquiry form.
Editorial or gallery submissions: emphasize cohesive series, captions, credits, biography and a CV.
Employment: organize work by role, client or skill and make your résumé easy to find.
Personal publishing: prioritize essays, project notes and a sustainable publishing workflow.
Prints or services: add commerce, booking, payment and fulfillment tools only when you need them.

Write the primary goal in one sentence, such as “A prospective art director should be able to understand my specialty and request a commission in under two minutes.” Use that sentence to decide what appears in the navigation, what goes above the fold and which call to action is repeated.

2. Choose a platform and domain

Hosted builders reduce maintenance and usually include responsive layouts, galleries, forms and hosting. A custom-built site gives you more control but makes image processing, deployment, forms, security and updates your responsibility.

Platform	Best fit	Evaluate before choosing
Squarespace	All-in-one client portfolios, services or print sales	Photography templates, portfolio pages, galleries, custom domains with SSL, forms, scheduling, commerce, watermarking and alt-text controls
Wix	Beginners who want visual drag-and-drop control	Image-first editing, focused galleries, essential pages, social connections, SEO settings, mobile behavior and feedback workflows
Adobe Portfolio	Photographers already paying for Creative Cloud	Creative Cloud inclusion, unlimited galleries and custom pages, plus Behance synchronization
Shopify	Portfolios that also sell prints or services	Store, payment, fulfillment, contact methods, image editing, mobile performance and promotion tools

Use a short domain that is easy to say and spell. Enable HTTPS, connect a professional email address and keep ownership of the domain even if you change platforms. Check the current plan limits and pricing directly with the provider before committing.

3. Curate the work before uploading

A portfolio is an edited argument for hiring or following you, not an archive. Select work that matches the audience and quality level you want next.

Collect more work than you plan to publish.
Remove technically weak, repetitive or off-target images.
Group the remainder into a few coherent projects or galleries.
Order each gallery so the first image establishes the subject and the last image leaves a memorable impression.
Ask a peer, mentor or past client what they think you specialize in after browsing for one minute.

Group images by genre, client type, location or series only when the label helps a visitor decide. A small number of focused galleries is easier to navigate than one undifferentiated feed. There is no evidence-backed universal ideal number of images; choose enough to demonstrate consistency without making visitors sort through near-duplicates.

4. Build the essential pages

Most photo portfolios need these pages:

Home: a clear specialty statement, a strong lead image or sequence, selected projects and one primary call to action.
Portfolio: gallery or project index with concise labels.
Project page: complete series, context, credits and a next step.
About: short biography, location, specialties, clients or publications and relevant credentials.
Contact: email address and a short inquiry form with useful fields such as project type, timeline, location and budget range.

Add Services, Testimonials, CV, Journal or Behind the Scenes when each page supports the visitor’s decision. Avoid making every social profile a competing call to action; keep one primary route to contact or book you.

5. Create a fast, responsive gallery

Prepare images before uploading. Export appropriately sized versions, compress them, use modern formats when your platform supports them and keep original camera files outside the public site. Use responsive image features so a phone does not download a desktop-sized file.

For a custom site, this minimal page is runnable as a single HTML file. Replace the image paths, text and email address with your own content.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Alex Rivera — Documentary Photographer</title>
  <meta name="description" content="Documentary photography by Alex Rivera.">
  <style>
    :root { font-family: system-ui, sans-serif; color: #171717; background: #fafafa; }
    * { box-sizing: border-box; }
    body { max-width: 1200px; margin: auto; padding: 1rem; }
    nav { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0 2rem; }
    nav a { color: inherit; text-decoration: none; }
    .hero { padding: 3rem 0; max-width: 42rem; }
    .hero h1 { font-size: clamp(2rem, 6vw, 5rem); line-height: .95; margin: 0 0 1rem; }
    .hero a { display: inline-block; padding: .75rem 1rem; background: #171717; color: white; border-radius: .25rem; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
    figure { margin: 0; }
    img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
    figcaption { padding: .5rem 0 1rem; }
    footer { padding: 4rem 0 2rem; }
  </style>
</head>
<body>
  <nav><a href="/">Alex Rivera</a><div><a href="#work">Work</a> · <a href="#about">About</a> · <a href="mailto:hello@example.com">Contact</a></div></nav>
  <main>
    <section class="hero">
      <p>Documentary photographer in Lisbon</p>
      <h1>Stories about people, place and change.</h1>
      <a href="mailto:hello@example.com?subject=Photography%20inquiry">Start an inquiry</a>
    </section>
    <section id="work" aria-labelledby="work-title">
      <h2 id="work-title">Selected work</h2>
      <div class="grid">
        <figure><img src="images/river.jpg" alt="People walking beside a river at dusk" loading="lazy" width="1200" height="900"><figcaption>River towns</figcaption></figure>
        <figure><img src="images/workshop.jpg" alt="A craftsperson working in a sunlit workshop" loading="lazy" width="1200" height="900"><figcaption>Hands at work</figcaption></figure>
        <figure><img src="images/night.jpg" alt="Street scene under warm lights at night" loading="lazy" width="1200" height="900"><figcaption>After dark</figcaption></figure>
      </div>
    </section>
    <section id="about"><h2>About</h2><p>Alex Rivera photographs documentary stories for editorial, nonprofit and cultural clients.</p></section>
  </main>
  <footer><a href="mailto:hello@example.com">hello@example.com</a></footer>
</body>
</html>

Use real dimensions in the width and height attributes to reduce layout shifting. Link each gallery tile to a project page if visitors need captions or context. Keep navigation usable with a keyboard and preserve visible focus states.

6. Make the image experience accessible

Write descriptive alt text for informative images; use empty alt text for purely decorative images.
Do not put essential information only inside an image.
Use captions when location, date, process or collaborators add meaning.
Check text contrast, focus indicators, form labels and keyboard navigation.
Test touch targets and galleries at narrow phone widths.

Ask someone who did not help build the site to complete three tasks: find a representative project, understand what you offer and send an inquiry. Fix the points where they hesitate.

7. Add trust, discoverability and a clear action

Use a consistent name, typography and image treatment. Add credits, publication names, client permissions and testimonials only when accurate. Include a descriptive page title, meta description, meaningful headings, clean URLs and descriptive link text. Connect social profiles that you actively maintain, and make your email or inquiry button visible on every important page.

Search visibility is not guaranteed by a particular builder. Publish useful project context, keep pages fast and review analytics to see which galleries attract attention and which contact paths are used.

8. Launch and maintain the portfolio

Review every page on a phone, tablet and desktop.
Submit the contact form and confirm delivery, spam handling and the reply address.
Check broken links, missing images, page titles, alt text and sharing previews.
Ask trusted reviewers to inspect a private draft.
Connect analytics only if you need the data and have handled consent requirements.
After launch, refresh the selection, remove stale work and promote new projects through channels your audience uses.

Keep a private master archive and a repeatable export process. When your specialty changes, update the homepage statement and first gallery before changing every page.

9. Or skip the browser setup

If you need screenshots of your published portfolio for reviews, documentation or social previews, ScreenshotNeo captures a URL with one request. Before capture it accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. See the ScreenshotNeo API documentation for all options.

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

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

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://your-domain.example' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

You can request PNG, JPEG, WebP or PDF output; capture a full page or one CSS-selected element; set a viewport or device preset, dark mode and retina scale; wait for a selector, delay or network idle; add custom CSS or JavaScript; hide selectors; set cookies, headers, user agent, timezone or geolocation; block ads, trackers, requests or resource types; resize images; cache with a chosen TTL; create signed links; run asynchronous jobs with signed webhooks; capture up to 100 URLs per bulk call; and use the usage API or OpenAPI specification. An MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients. Every feature is available on every plan. The Free plan includes 1,000 shots each month with no card; paid plans start at $5 for 3,000 shots.

Create a free ScreenshotNeo account and generate portfolio previews without adding a card.

10. Troubleshooting

Problem	Likely cause	Fix
Images look soft	Files are too small or over-compressed	Export a larger responsive variant, preserve the source archive and compare quality at the displayed size.
Page feels slow	Large originals, too many images or third-party scripts	Resize and compress, lazy-load below-the-fold images, remove unnecessary scripts and test again on a mobile connection.
Layout jumps while loading	Images have no reserved dimensions	Set width and height attributes or an aspect-ratio container.
Gallery is confusing	Too many categories or duplicate images	Reduce the number of galleries and label them by a decision visitors actually need to make.
Form submissions disappear	Incorrect recipient, spam filtering or an untested provider integration	Send a test, verify delivery and spam folders, add a confirmation message and provide a visible email fallback.
Mobile navigation is hard to use	Small controls, hidden links or an untested breakpoint	Use larger touch targets, keep the main action visible and test on a real phone.
Screenshot shows a cookie banner	The page requires consent before its clean state appears	With ScreenshotNeo, leave consent handling enabled; its capture flow accepts banners and removes known consent platforms before the shot.
Screenshot is blank or times out	Page failure, bot check, blocked resource or insufficient wait time	Check the live URL, wait for a selector or network idle, adjust blocking rules and inspect `X-Page-Verdict`. These failed captures are not billed by ScreenshotNeo.

11. FAQ

How many photos should a portfolio contain?

There is no universal number. Publish enough work to prove consistency in your specialty, then remove repetition and weak images. Review behavior and inquiries to refine the selection.

Should I use one gallery or several?

Use several focused galleries when the groups represent different decisions or audiences. Use one gallery when dividing the work would make a small portfolio feel empty.

Do I need a custom domain?

A custom domain is usually easier to remember and share. Buy it separately when possible so you retain control if you change builders.

Should every image have a caption?

Add captions when context improves understanding or gives credit. Leave them out when they add no useful information, but keep alt text for accessibility.

Can I build the site without coding?

Yes. Hosted builders and Adobe Portfolio can handle the core pages and galleries. Coding is useful when you need custom layouts, integrations or deployment control.