Architecture and interior design firms sell with images. The portfolio is the product. A site that loads slowly — or renders images as blurry JPEG thumbnails on mobile — is losing clients at the point of first impression, before a single project description is read.
But speed and visual quality are not in conflict. They are an engineering problem. A Next.js architecture portfolio using AVIF images, responsive sizing, and correct LCP prioritisation can load the first hero image in under 1.2 seconds on a 4G mobile connection — while displaying that image at full resolution on a 27" display. This guide explains how to achieve that, and how to structure the portfolio, project pages, and enquiry flow to convert visitors into commission-paying clients. The image-handling layer should be treated with the same discipline outlined in Image SEO Checklist for next/image, because portfolio sites win or lose trust on visual delivery speed.
The image pipeline: AVIF, responsive sizing, and LCP
The Largest Contentful Paint (LCP) on most architecture sites is the hero image — typically a hero photo of a completed project at 1920×1080px or larger. If this image is a JPEG loaded at full resolution, LCP will be 3–6 seconds on mobile. That is where 60%+ of traffic comes from.
The technical fix — four changes:
1. Convert to AVIF. AVIF encoding produces files 40–60% smaller than JPEG at equivalent perceptual quality. For a typical hero image:
- JPEG at 300KB → AVIF at 120KB at identical visual quality
- 30% smaller file → approximately 600ms LCP improvement on a 10Mbps connection
In Next.js 14+, next/image handles AVIF conversion automatically when configured:
// next.config.js
images: {
formats: ['image/avif', 'image/webp'],
}
No manual conversion needed. The image optimiser serves AVIF to supporting browsers and WebP as a fallback.
2. Use responsive sizes. A 1920px-wide image should not be served to a 390px-wide iPhone. Use the sizes prop:
<Image
src="/projects/jones-house-hero.jpg"
alt="Jones House, Toorak — residential extension, 2025"
fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
priority
/>
The priority prop marks this as the LCP element — Next.js preloads it. This alone typically saves 400–800ms of LCP on mobile.
3. Use fill + container sizing for portfolio grids. Masonry or grid portfolio layouts using width and height props cause Cumulative Layout Shift (CLS) as images load. The fill + positioned container pattern eliminates CLS:
<div className="relative aspect-[4/3] overflow-hidden">
<Image src={project.heroImage} alt={project.title} fill className="object-cover" />
</div>
4. Lazy-load below-fold images. Only the hero and the first viewport row should be priority. All other portfolio images should load lazily. Next.js does this by default — just don't apply priority to every image.
With these four changes, an architecture portfolio loads the first visible content in 1.0–1.5s on a 4G mobile connection. That is competitive with fast e-commerce sites — and significantly faster than most competitor architecture sites in Australia.
Project pages: the overlooked SEO asset
Most architecture firms have a portfolio section with 20–50 projects displayed as a gallery. Each project is an image or a small lightbox. None of those projects have their own URL.
This is a missed opportunity equivalent to an e-commerce store without individual product pages.
Each completed project should be a dedicated URL:
/projects/jones-house-toorak-residential/
/projects/brighton-commercial-office-fitout/
/projects/fitzroy-heritage-conversion/
Each project page should have:
- Project title as H1: "Jones House, Toorak — Contemporary Residential Extension" (location embedded, project type embedded)
- Project brief (100–150 words): client's brief, context, site constraints
- Design response (150–200 words): how the design responds to the brief, materials, spatial strategy
- Photography gallery (4–8 images, AVIF, responsive, lazy-loaded except hero)
- Project credits: Structural engineer, landscape architect, builder, photographer
- Schema:
CreativeWorkwithcreator,locationCreated,keywords,about
A project page structured this way can rank for:
contemporary residential extension toorak architectheritage conversion fitzroy architectcommercial office fitout brighton interior designer
These are low-competition, high-intent queries. A prospect searching for "heritage conversion fitzroy architect" is a serious buyer — they have a specific project type, a specific location, and they are looking for a practice with demonstrated experience in both.
Link each project page from the main /projects/ index, from the relevant /services/ page (residential / commercial / heritage), and from 1–2 nearby project pages ("You might also be interested in our Collingwood warehouse conversion").
The enquiry brief: converting visitors to consultation-ready leads
Architecture enquiries have a cold-lead problem. Many architecture practices receive enquiry emails that say "I'm thinking about extending my house, can you help?" — with no budget, no timeline, no project description, and no site address.
The intake brief solves this. Instead of a contact form with name/email/message, build a multi-step enquiry brief:
Step 1: Project type (new build / extension / renovation / commercial / interior) Step 2: Project location (postcode or suburb) Step 3: Estimated construction budget (range dropdown: <$200k / $200k–$500k / $500k–$1M / $1M+) Step 4: Preferred start date (dropdown: ASAP / 1–3 months / 3–6 months / 6–12 months / Planning only) Step 5: Brief description (optional, 300 chars max) Step 6: Contact details (name, email, phone)
The practice receives a pre-qualified enquiry brief. The prospect has already committed to sharing their budget — which selects out enquiries that are not viable.
Practices that implement this format report 3× the conversion rate from initial enquiry to commission compared to a standard contact form — because the initial call is a conversation about the project, not a discovery call about whether there is a project worth pursuing.
Implement this as a multi-step form component (Typeform-style flow within your own site, not embedded third-party — avoids GDPR-adjacent tracking issues and keeps the session in your analytics).
Portfolio structure and navigation
For a practice with a mixed portfolio (residential + commercial):
Navigation:
- Work → Residential / Commercial / Heritage / Interior / All
- Services → Residential / Commercial / Heritage / Interior
- About → Team / Process / Accreditations
- Contact / Enquire
The portfolio filter should work client-side (JavaScript state) without page reloads — faster UX, no full-page reload on filter change. A simple CSS-grid filter with data-attributes handles this without a heavy library.
Project page discovery from Google:
In the project's HTML <head>:
- Title:
{Project name} | {Practice name} | {Project type} {Suburb} - Description: 140–160 chars describing the project type, location, and one distinctive feature
- OG image: The hero photo at 1200×630, AVIF preferred, WebP fallback
CreativeWorkschema
Registration and credentialing requirements
In all Australian states, use of the title "architect" is restricted to persons registered with the relevant state Architects Registration Board (ARB). Website content must not:
- Describe unregistered practitioners as "architects"
- Use "architecture firm" as a business descriptor if the principals are not registered
- Claim registered architect status that is not current
For interior design practices (not registered architects): use "interior design" and "interior designer" consistently. Do not use "interior architecture" as a descriptor without checking state-specific guidelines — the term is contested in some jurisdictions.
Board registration details (registration number, states of registration) should appear on the About page. This is an E-E-A-T signal and may be required by the ARB.
Costs for architecture and interior design websites in 2026
| Tier | Investment | Suitable for |
|---|---|---|
| Template / DIY | $2,000–$4,000 | Single-person studio, minimal SEO ambition |
| Agency WordPress | $7,000–$14,000 | Small practice (2–5 people), gallery portfolio, basic enquiry form |
| Senior agency (Next.js) | $14,000–$28,000 | Mid-size practice, project pages at scale, AVIF pipeline, enquiry brief, CMS editing |
| Large practice custom | $28,000–$60,000+ | 10+ person practice, multi-disciplinary, awards submission integration |
FAQ
AVIF vs WebP — which format should I use for an architecture portfolio in 2026?
AVIF is usually the stronger primary format because it preserves image quality at lower file sizes, with WebP as a practical fallback where browser support or pipeline simplicity requires it.
Do project pages dilute the homepage's SEO authority?
No. Well-structured project pages strengthen the site by creating more indexable proof assets and more ways for searchers to enter the portfolio.
Should the enquiry form ask for budget upfront?
Yes, if it is framed as a helpful range rather than a hard gate. For architecture and interiors, budget context improves lead quality and helps the studio respond appropriately.
One website for an architecture practice, or separate sites for residential and commercial?
Usually one site with clear segmentation is better. Split sites only make sense when the practice names, audiences, and service propositions are genuinely independent.
Related reading
- Image Pipeline — Sharp, AVIF, WebP Trade-offs
- Image SEO Checklist for next/image
- Core Web Vitals Playbook for Service Websites
- Web Development for Australian Businesses — 2026 Buyer's Guide
Ready to rebuild your architecture or interior design portfolio site? Talk to StratifyIQ.