web: let next/image serve SVGs so they lazy-load instead of being preloaded

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 && (

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} />;
 }