Make next/images responsive

next.config.js

@@ -28,7 +28,7 @@ const createRemotePattern = (hostname) => hostname
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-    imageSizes: [200, 1080],
+    imageSizes: [200],
     remotePatterns: []
       .concat(createRemotePattern(HOSTNAME_VERCEL_BLOB))
       .concat(createRemotePattern(HOSTNAME_CLOUDFLARE_R2))

src/components/ImageBlurFallback.tsx

@@ -66,7 +66,7 @@ export default function ImageBlurFallback(props: ImageProps) {
               className: clsx(
                 imageClassName,
                 // Fix poorly blurred placeholder data generated by Safari
-                'blur-md scale-110',
+                'blur-md scale-105',
               ),
             }} />
             :  <div className={clsx(
@@ -78,6 +78,7 @@ export default function ImageBlurFallback(props: ImageProps) {
         ...rest,
         ref: imgRef,
         priority,
+        layout: 'responsive',
         className: imageClassName,
         onLoad: () => setIsLoading(false),
         onError: () => setDidError(true),

src/services/next-image.ts

@@ -1,7 +1,7 @@
 import { BASE_URL } from '@/site/config';
 
 // Explicity defined next.config.js `imageSizes`
-type NextCustomSize = 200 | 1080;
+type NextCustomSize = 200;
 
 type NextImageDeviceSize = 640 | 750 | 828 | 1080 | 1200 | 1920 | 2048 | 3840;