Building BKB Photography's portfolio site: images first, everything else second

When BKB Photography came to me, they had a problem that's more common than it should be: genuinely great work living on a site that undersold it. Not catastrophically bad — just slow in the wrong places, busy in the wrong ways, and with a booking flow that made people work harder than they needed to.

Photography portfolio sites have a specific job to do. Show the work. Make it easy to hire. Get out of the way. Most of them fail at two of those three.

The image delivery problem

The most common technical failure I see on photography sites is image handling. The photographer has beautiful, high-resolution files. They upload them. The site loads them at full size, on every device, whether the visitor is on a 27-inch monitor or a phone on LTE. The gallery takes eight seconds to show anything. The visitor leaves.

This isn't a hard problem to solve, but it requires actually solving it rather than just uploading images and hoping for the best.

For BKB's site I used Next.js, which gives you the next/image component. What that actually does in practice: it serves the right file format (WebP or AVIF for browsers that support them, JPEG fallback for those that don't), sizes the image to the container it's rendering in rather than delivering a 4000px file into a 600px slot, and lazy-loads everything below the fold. The browser only downloads what it's actually going to display, at the size it needs to display it.

The difference in load time is not subtle. A gallery that previously took several seconds to populate comes in fast enough that the experience feels instant. That matters on every device, but it especially matters on mobile where most portfolio browsing happens.

I also paid attention to the above-the-fold image specifically — the first thing a visitor sees. That one gets priority loading treatment: it's preloaded rather than lazy-loaded, so it's ready before the rest of the page finishes. First impressions are formed in the first second or two. You want the work front and center, not a grey placeholder box.

Layout decisions

The other common failure mode is layout complexity. I've seen photography sites where the actual photos are surrounded by sidebars, decorative elements, overlapping text boxes, gradient overlays, and enough CSS animation to make your eyes water. The designer was clearly trying to make the site feel premium. The effect is the opposite — it makes the photos feel like content in a magazine rather than work you're being invited to experience.

For BKB's gallery pages I made a deliberate choice: maximum whitespace, minimal chrome. The photos are the UI. The grid gives them room to breathe. There's no border, no drop shadow, no caption clutter unless you interact with a specific image. The navigation is there when you need it and invisible when you don't.

This is a harder sell than it sounds. Clients sometimes interpret simplicity as the developer not doing enough. Part of my job is explaining that restraint is a design choice, not a shortcut. The work speaks when you stop interrupting it.

I kept the grid responsive but I did it manually rather than reaching for a CSS grid library that would add weight to the page. On desktop it's a two or three column masonry-style layout. On mobile it drops to a single column. Transitions are handled in Tailwind with no JavaScript until the user actually opens a lightbox. The page is fast because nothing is loading that isn't needed.

The booking flow

A portfolio site for a professional photographer has one primary conversion goal: someone fills out an inquiry form. Everything else is in service of that.

The failure mode I see here is burying the booking path. You have to find it in the nav, click through to a contact page, and then face a form that asks for twelve pieces of information before you can submit. Every step is friction. Some percentage of people who would have become clients just don't bother.

For BKB I put the call to action in two places: visible on the home page without scrolling, and present at the bottom of every gallery. If someone has just spent five minutes looking through a set of portraits and is feeling good about the work, they should be able to act on that feeling immediately. Not go back to the homepage, find the nav, click Contact, wait for the page to load.

The form itself asks for what's actually needed: name, email, type of session, rough timeline, and a notes field. That's it. You can collect more information in the follow-up conversation. The goal of the form is to start the conversation, not to pre-qualify the lead through bureaucracy.

I built the form handler in Next.js API routes — no third-party form service, no extra JavaScript loading in the background. Form submission sends an email via Resend and logs the inquiry. Clean, fast, under our control.

Performance as a professional signal

There's a business case for site performance that goes beyond load times. When a potential client visits a photography site that loads slowly, some part of their brain registers it as a signal about the business. If the website feels cheap, the business feels cheap. That's not fair — a slow site doesn't mean bad photography — but it's how perception works.

Core Web Vitals are Google's framework for measuring real-world performance: Largest Contentful Paint (how fast the main content appears), Cumulative Layout Shift (whether elements jump around as the page loads), and Interaction to Next Paint (how responsive the page feels when you click something). BKB's site scores well on all three, which also affects search visibility. Google factors page experience into rankings for image searches, which matters for a photography business.

I didn't use a page builder. No Squarespace, no Wix, no WordPress with a drag-and-drop theme. Those tools add weight — plugin scripts, framework overhead, fonts and icons loading whether you use them or not. A clean Next.js build ships exactly what the page needs and nothing else. The difference shows up in the numbers and in how the site feels to use.

What this kind of project is really about

The developer's job on a portfolio site is to disappear. The photographer spent years developing their eye, their style, their client relationships. The site should put all of that forward without adding any noise.

Fast image delivery, thoughtful layout, a booking flow that doesn't make people work — none of this is technically exotic. It's just doing the fundamentals well, in service of the actual product, which is the work. That's the job.