From fb1453b419b933de7d90d2d2d6766ad2df32987b Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Thu, 15 Oct 2026 01:43:05 +0200
Subject: [PATCH] web: let next/image serve SVGs so they lazy-load instead of
 being preloaded

---
 .../components/blocks/ContactEntityBlock.tsx  |  1 +
 web/src/components/general/Image.tsx          | 25 ++-----------------
 2 files changed, 3 insertions(+), 23 deletions(-)

diff --git a/web/src/components/blocks/ContactEntityBlock.tsx b/web/src/components/blocks/ContactEntityBlock.tsx
index abc4a27..224e906 100644
--- a/web/src/components/blocks/ContactEntityBlock.tsx
+++ b/web/src/components/blocks/ContactEntityBlock.tsx
@@ -43,6 +43,7 @@ export const ContactEntityBlock = ({
           <img
             src="/assets/graphics/portrait-pig.svg"
             className={styles.portraitPlaceholder}
+            loading="lazy"
           />
         )}
         {image && (
diff --git a/web/src/components/general/Image.tsx b/web/src/components/general/Image.tsx
index ac3e92b..1e60507 100644
--- a/web/src/components/general/Image.tsx
+++ b/web/src/components/general/Image.tsx
@@ -7,27 +7,6 @@ type ImageProps = NextImageProps & {
   imageFormat?: string | null; // "original" | "bleed" | "fullWidth"
 };
 
-function isSvgSrc(src: NextImageProps["src"]): src is string {
-  return typeof src === "string" && /\.svg(\?|#|$)/i.test(src);
-}
-
-function MaybeNextImage(props: NextImageProps) {
-  if (isSvgSrc(props.src)) {
-    const { src, alt, width, height, className, style } = props;
-    return (
-      <img // eslint-disable-line @next/next/no-img-element
-        src={src}
-        alt={alt}
-        width={width}
-        height={height}
-        className={className}
-        style={style}
-      />
-    );
-  }
-  return <NextImage {...props} />;
-}
-
 export function ImageFigure(props: ImageProps) {
   const { attribution, caption, imageFormat, ...imageProps } = props;
   return (
@@ -35,7 +14,7 @@ export function ImageFigure(props: ImageProps) {
       className={`${styles.image} ${imageFormat ? styles[imageFormat] : ""}`}
     >
       <div className={styles.imageWrapper}>
-        <MaybeNextImage quality={90} {...imageProps} />
+        <NextImage quality={90} {...imageProps} />
         {attribution && <div className={styles.attribution}>{attribution}</div>}
       </div>
       {caption && <figcaption>{caption}</figcaption>}
@@ -44,5 +23,5 @@ export function ImageFigure(props: ImageProps) {
 }
 
 export function Image(props: NextImageProps) {
-  return <MaybeNextImage {...props} />;
+  return <NextImage {...props} />;
 }