From 3a52b16b12da71162290cb9484f543fb9a93a081 Mon Sep 17 00:00:00 2001
From: PavelMakarchuk <pavel.ma99@gmail.com>
Date: Tue, 26 May 2026 08:49:18 -0400
Subject: [PATCH] Serve 2x assets on retina screens via srcset
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

OptimisedImage hardcoded dpr = 1, so an image asked to fill a 640px slot
was fetched at 640px and then upscaled by the browser to ~1280 physical
pixels on every retina/high-DPI display — visibly soft across hero,
team photos, blog/research cards, and tracker thumbnails.

Switches to a 1x/2x srcset: the browser picks the right asset per
device. Low-DPI screens keep using the 1x file (no bandwidth waste),
high-DPI screens get the sharper 2x. When the snapped 1x and 2x widths
collide (e.g. both round to the same ALLOWED_WIDTHS bucket) we drop the
descriptor so the browser doesn't double-fetch the same file.

Also factored out the bypass conditions into shouldSkipOptimisation()
so the main render branch reads as straight srcset construction.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 website/src/components/ui/OptimisedImage.tsx | 87 ++++++++++++--------
 1 file changed, 53 insertions(+), 34 deletions(-)

diff --git a/website/src/components/ui/OptimisedImage.tsx b/website/src/components/ui/OptimisedImage.tsx
index eda12932e..234c6be45 100644
--- a/website/src/components/ui/OptimisedImage.tsx
+++ b/website/src/components/ui/OptimisedImage.tsx
@@ -1,4 +1,4 @@
-import type { ImgHTMLAttributes } from 'react';
+import type { ImgHTMLAttributes } from "react";
 
 /**
  * Wraps an <img> to serve images through Vercel's edge image optimisation.
@@ -17,7 +17,10 @@ interface StaticImageData {
   width: number;
 }
 
-interface OptimisedImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+interface OptimisedImageProps extends Omit<
+  ImgHTMLAttributes<HTMLImageElement>,
+  "src"
+> {
   /** Desired display width in pixels — used for resizing on the edge. */
   width?: number;
   /** Image quality 1–100 (default 80). */
@@ -39,36 +42,22 @@ function snapWidth(w: number): number {
   return ALLOWED_WIDTHS[ALLOWED_WIDTHS.length - 1];
 }
 
-function optimisedSrc(src: string, width?: number, quality = 80): string {
-  // Only optimise local paths served from the same origin
-  if (!src.startsWith('/')) {
-    return src;
-  }
-
-  // Skip _next/static paths — already optimized at build time by Next.js
-  if (src.startsWith('/_next/')) {
-    return src;
-  }
-
-  // Skip SVGs — vector images can't be raster-optimized
-  if (src.endsWith('.svg')) {
-    return src;
-  }
-
-  // Skip in dev — Vercel image API isn't available locally
-  if (process.env.NODE_ENV === 'development') {
-    return src;
-  }
-
-  // Vercel's image endpoint requires an explicit width.
-  // Fall back to the original asset path when callers omit one.
-  if (!width) {
-    return src;
-  }
+/**
+ * True when the asset should bypass Vercel's image optimiser (external URLs,
+ * already-optimised Next.js static chunks, SVGs, local dev, or missing width).
+ */
+function shouldSkipOptimisation(src: string, width?: number): boolean {
+  if (!src.startsWith("/")) return true;
+  if (src.startsWith("/_next/")) return true;
+  if (src.endsWith(".svg")) return true;
+  if (process.env.NODE_ENV === "development") return true;
+  if (!width) return true;
+  return false;
+}
 
-  const dpr = 1;
+function optimisedSrc(src: string, width: number, quality = 80): string {
   const params = new URLSearchParams({ url: src, q: String(quality) });
-  params.set('w', String(snapWidth(Math.round(width * dpr))));
+  params.set("w", String(snapWidth(Math.round(width))));
   return `/_vercel/image?${params}`;
 }
 
@@ -76,12 +65,42 @@ export default function OptimisedImage({
   src,
   width,
   quality = 80,
-  alt = '',
+  alt = "",
   ...rest
 }: OptimisedImageProps) {
   // Resolve Next.js static imports (StaticImageData) to their .src string
-  const rawSrc = typeof src === 'object' && src !== null && 'src' in src ? src.src : src;
-  const resolvedSrc = typeof rawSrc === 'string' ? optimisedSrc(rawSrc, width, quality) : undefined;
+  const rawSrc =
+    typeof src === "object" && src !== null && "src" in src ? src.src : src;
+
+  if (typeof rawSrc !== "string") {
+    return (
+      <img {...rest} src={undefined} width={width} loading="lazy" alt={alt} />
+    );
+  }
+
+  if (shouldSkipOptimisation(rawSrc, width)) {
+    return (
+      <img {...rest} src={rawSrc} width={width} loading="lazy" alt={alt} />
+    );
+  }
+
+  // width is guaranteed by shouldSkipOptimisation above
+  const w = width!;
+  const src1x = optimisedSrc(rawSrc, w, quality);
+  const src2x = optimisedSrc(rawSrc, w * 2, quality);
+
+  // If 1x and 2x snap to the same allowed width, the browser would download
+  // the same file twice via srcset — skip the descriptor in that case.
+  const srcSet = src1x === src2x ? undefined : `${src1x} 1x, ${src2x} 2x`;
 
-  return <img {...rest} src={resolvedSrc} width={width} loading="lazy" alt={alt} />;
+  return (
+    <img
+      {...rest}
+      src={src1x}
+      srcSet={srcSet}
+      width={w}
+      loading="lazy"
+      alt={alt}
+    />
+  );
 }