Interior Design Website Development: Fast Photo Pages

Interior design website development comes down to one tension: the photographs are the product, and they're heavy. A good portfolio site serves each photo at the size the screen needs, in a modern format, loads the first image first, and gives the studio an admin to publish and reorder projects without a developer. Everything else supports those two jobs.

TL;DR: Keep full-size originals in storage and let the site serve resized WebP or AVIF copies per screen. Preload the main image, lazy-load the rest, and reserve space so nothing jumps. Give the studio drag-and-drop ordering and visibility toggles, validate uploads, and keep every write on the server.

We built a portfolio site and gallery admin for The Sharp Interiors, a residential and commercial interior design firm, and we remain their IT partner. This post doesn't repeat the case study. It focuses on what a photo-led studio site has to get right technically: serving big photographs fast, and keeping the gallery current and safe.

Why are photo-heavy portfolio sites slow?

Because a camera original can be many megabytes, and a phone showing it in a 400-pixel box downloads all of it. Multiply that by a gallery of twenty projects and the page stalls before a visitor sees anything. Slowness here isn't a hosting problem. It's an image problem.

Google's guidance gives a clear target. A page should reach Largest Contentful Paint within 2.5 seconds, keep layout shift at 0.1 or less, and respond to input within 200 milliseconds, measured at the 75th percentile of page loads (web.dev). On a portfolio, the largest element is almost always a photograph, so the hero image decides whether you pass.

How do you serve large photos without slowing the page?

Serve several sizes of each image and let the browser choose, convert to a modern format, load the first image early and the rest late, and give every image its dimensions. Each step is small. Together they turn a multi-megabyte page into one a phone can load on mobile data.

1. Resize per screen. With a sizes value, the Next.js Image component generates a full srcset (640w, 750w, and so on), and the browser picks the smallest version that fits (Next.js docs).
2. Use WebP or AVIF. Google reports that WebP lossy images are 25 to 34 percent smaller than comparable JPEGs at equivalent quality (Google for Developers). Next.js serves WebP by default and can prefer AVIF where browsers support it.
3. Load the hero first. Images lazy-load by default in Next.js. For the main image, use loading="eager" or fetchPriority="high"; since Next.js 16, the old priority prop is deprecated in favour of preload.
4. Reserve space. Width and height let the browser hold the image's aspect ratio while it loads, so the layout doesn't jump.
5. Keep originals in storage, not in the page. The studio uploads its best files; the site makes the small copies.

Does the studio need to understand any of this? No. That's the point: they upload a full-size photo, and the site does the rest. We cover Next.js work more broadly on the Next.js development page.

Handling different photo shapes

Interior photos come in wide room shots, tall detail shots, and the occasional square. A grid that crops them all to one shape cuts off exactly what the designer wanted shown. Pick a layout per project instead, or a grid that respects each image's ratio.

Two practical rules help. Keep one aspect ratio per project where the photographer can, so its grid lines up. And let the site, not the upload, decide display size, so a portrait shot is never stretched to fill a wide slot. Reserved dimensions make both work without layout shift.

What should a gallery admin let the studio do?

Add projects, upload and order images, pick a feature image, and hide work without deleting it. If adding a project means emailing a developer, the portfolio goes stale within months, and a stale portfolio tells visitors the studio isn't busy.

The Sharp Interiors' custom admin has drag-and-drop ordering of projects and of images inside each project, feature images, and visibility toggles. Ordering matters more than it sounds. Designers think in sequence: the first image of a project sets the tone, and a gallery sorted by upload date takes that choice away from them.

Visibility toggles do quiet work too. A project can be prepared before it's shown, or taken down while a client reviews the photos, without losing anything.

Keeping uploads clean

Validate every project against a schema before saving it, with limits on image type and size, and clean up stored files when a project is removed. Bad uploads are the most common way a studio site degrades: a 40 MB photo, a file that isn't an image, a project with no cover.

On The Sharp Interiors' site, Zod schemas are the single source of truth for the CMS, so the admin form and the server agree on what a valid project is. Every upload is checked for image type and size, and removing a project cleans its files out of storage, so nothing lingers costing money or turning up by accident.

Why should only the server write to the database?

Because the fewer places that can change content, the fewer ways it can go wrong. The Sharp Interiors' site runs on Next.js App Router with Firebase Firestore and Storage on Firebase App Hosting, and uses separate client and admin SDKs, so writes only happen server-side, after the admin is checked.

This is a design choice, not the only safe option. Firestore checks every request from its web and mobile client libraries against Security Rules, while server client libraries bypass the rules entirely and rely on IAM instead (Firebase docs). So browser writes can be safe with careful rules. Keeping writes on the server means there's one path to secure and test, and the rules can simply refuse client writes. We compare backends for sites like this on the Supabase vs Firebase page.

Can a visual portfolio rank in search?

Yes, but photos alone give search engines little to read. Each project needs a few lines of text: the brief, the space, the location, and the materials. Add descriptive alt text to images, which also helps visitors using screen readers, and one plain page per service.

Write the project text at upload time, while the details are fresh. Structured data that identifies the business and its location helps too. None of this takes long per project, and it's the difference between a gallery Google can describe and one it can't.

How do you turn portfolio visitors into enquiries?

Put the next step on every project page, not only on a contact page. A visitor who's just looked at a kitchen they love should be one tap from asking about theirs. Then record which project they came from, so the studio knows what caught their eye.

Services pages should say what the firm does, for whom, and where. Analytics on project views and enquiries show which work brings in clients; The Sharp Interiors' site uses Google Analytics for this.

After launch

Someone has to own hosting, the domain, analytics, and the steady stream of small changes. For The Sharp Interiors, that's us, as their ongoing IT partner. Our software maintenance post explains what that kind of arrangement covers, and our website cost guide explains where a portfolio with a custom admin sits on price.

FAQ

What image size should a studio upload?

The largest, best-quality version you have, as long as it's within the admin's size limit. The site makes the smaller copies for phones and laptops. Uploading pre-shrunk images saves nothing and caps quality on large screens, while the original stays in storage for future layouts.

Can a portfolio site show before-and-after photos?

Yes. Treat the pair as one item in the project, with both images sized and lazy-loaded like any other, and label which is which in the alt text. A side-by-side or slider works on desktop; on phones, stacking the two images is usually clearer than a slider.

How do we check whether our current site is too slow?

Run the main pages, especially the gallery and one project page, through PageSpeed Insights and look at Largest Contentful Paint on mobile. If it's over 2.5 seconds, the hero photo is usually the cause. Check the image's file size and format before blaming hosting.

Need a portfolio site that does your photography justice? See our interior design website work and send us a few of your best projects.