Skip to main content
All Docs
FeaturesBlockManOSUpdated March 26, 2026

Establishing the Image Optimisation Standard with next/image

Establishing the Image Optimisation Standard with next/image

Release: v1.0.89
Category: Performance — Frontend

Background

The platform currently contains no images — no logos, hero images, user avatars, development photographs, or document thumbnails. While that means there is no immediate performance problem to fix, it also means there is a window of opportunity: establish the right standard now, before any images are added, so that every future image automatically benefits from it.

This is exactly what PERF-02 does. Rather than waiting until a developer reaches for a raw <img> tag and ships a regression, the project now has a clear, documented rule: all images must use next/image.

Why next/image?

Next.js ships a built-in Image component that provides several automatic optimisations that raw <img> tags do not:

  • Automatic format negotiation — serves WebP or AVIF to browsers that support them, falling back to JPEG/PNG for others.
  • Responsive sizing — generates multiple image sizes and lets the browser pick the most appropriate one via srcset.
  • Lazy loading by default — images below the fold are not fetched until the user scrolls near them, reducing initial page load bytes.
  • Layout shift prevention — requires explicit width and height (or fill) so the browser can reserve space before the image loads, eliminating Cumulative Layout Shift (CLS).
  • Priority loading — above-fold images can be marked with priority to trigger early preloading.

For a block management platform that will eventually display property development photos, company logos, document thumbnails, and user avatars, these optimisations directly affect page load time and Core Web Vitals scores.

Components to Watch

Two components are the most likely places where images will first appear:

src/components/avatar.tsx

This component will render user avatars — typically small, circular profile images fetched from an external CDN. When avatars are introduced:

  • Replace any <img> element with <Image> from next/image.
  • Add the avatar CDN domain to remotePatterns in next.config.ts (see below).
  • Use a fixed width and height matching the rendered avatar size to prevent layout shift.
// Example — future avatar implementation
import Image from 'next/image';

export function Avatar({ src, alt }: { src: string; alt: string }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={40}
      height={40}
      className="rounded-full"
    />
  );
}

src/components/org-switcher.tsx

This component will eventually display OMC or management company logos. When organisation logos are introduced:

  • Use next/image with appropriate width and height values.
  • If logos come from an external source, add the domain to remotePatterns.

Configuring Remote Image Domains

Before rendering any image from an external URL, its domain must be allowlisted in next.config.ts using the remotePatterns option. This is a Next.js security requirement that prevents the image optimisation endpoint from being used as an open proxy.

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'your-avatar-cdn.example.com',
        pathname: '/avatars/**',
      },
      {
        protocol: 'https',
        hostname: 'your-property-photo-cdn.example.com',
      },
    ],
  },
};

export default nextConfig;

Add a new entry to remotePatterns for every external image host before it is used in a component.

Rules for All Future Image Usage

RuleDetail
Use next/imageNever use a raw <img> tag.
Set width and heightPrevents Cumulative Layout Shift. Use fill with a positioned parent if the image is fluid.
Use priority for above-fold imagesEnsures hero images and top-of-page photos are preloaded.
Provide sizes for responsive imagesTells the browser what size the image will render at each breakpoint so it downloads the right asset.
Allowlist external domainsAdd every external image host to remotePatterns in next.config.ts.
Supply meaningful alt textRequired for accessibility and screen reader support.

Impact on Existing Code

There are no functional changes in this release. The application currently has no images, so no components were modified. This release is purely a proactive standard to ensure the platform remains performant as image content is introduced.

See Also