From 6e94f9f23a495389b729044595752e6917e347ee Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 23 Feb 2024 21:23:26 -0600
Subject: [PATCH 1/3] Add 1080 to custom next sizes

---
 next.config.js             | 2 +-
 src/services/next-image.ts | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/next.config.js b/next.config.js
index f0ff1b30..28ff2187 100644
--- a/next.config.js
+++ b/next.config.js
@@ -28,7 +28,7 @@ const createRemotePattern = (hostname) => hostname
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-    imageSizes: [200],
+    imageSizes: [200, 1080],
     remotePatterns: []
       .concat(createRemotePattern(HOSTNAME_VERCEL_BLOB))
       .concat(createRemotePattern(HOSTNAME_CLOUDFLARE_R2))
diff --git a/src/services/next-image.ts b/src/services/next-image.ts
index cf0b0b9d..b99fd0ee 100644
--- a/src/services/next-image.ts
+++ b/src/services/next-image.ts
@@ -1,7 +1,8 @@
 import { BASE_URL } from '@/site/config';
 
 // Explicity defined next.config.js `imageSizes`
-type NextCustomSize = 200;
+type NextCustomSize = 200 | 1080;
+
 type NextImageDeviceSize = 640 | 750 | 828 | 1080 | 1200 | 1920 | 2048 | 3840;
 
 export type NextImageSize = NextCustomSize | NextImageDeviceSize;

From 42b0ead70a30a512bd640366e09eeec83ff82eac Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 23 Feb 2024 21:48:54 -0600
Subject: [PATCH 2/3] Make next/images responsive

---
 next.config.js                       | 2 +-
 src/components/ImageBlurFallback.tsx | 3 ++-
 src/services/next-image.ts           | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/next.config.js b/next.config.js
index 28ff2187..f0ff1b30 100644
--- a/next.config.js
+++ b/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))
diff --git a/src/components/ImageBlurFallback.tsx b/src/components/ImageBlurFallback.tsx
index 64d1c4ef..e807d84c 100644
--- a/src/components/ImageBlurFallback.tsx
+++ b/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),
diff --git a/src/services/next-image.ts b/src/services/next-image.ts
index b99fd0ee..9b8cc116 100644
--- a/src/services/next-image.ts
+++ b/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;
 

From 08b1401ce431c0fd3eb981be6b5dc9b255cc193e Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 24 Feb 2024 01:10:17 -0600
Subject: [PATCH 3/3] Restrict responsive behavior to large images

---
 src/components/ImageBlurFallback.tsx | 1 -
 src/components/ImageLarge.tsx        | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ImageBlurFallback.tsx b/src/components/ImageBlurFallback.tsx
index e807d84c..1fd44dee 100644
--- a/src/components/ImageBlurFallback.tsx
+++ b/src/components/ImageBlurFallback.tsx
@@ -78,7 +78,6 @@ export default function ImageBlurFallback(props: ImageProps) {
         ...rest,
         ref: imgRef,
         priority,
-        layout: 'responsive',
         className: imageClassName,
         onLoad: () => setIsLoading(false),
         onError: () => setDidError(true),
diff --git a/src/components/ImageLarge.tsx b/src/components/ImageLarge.tsx
index 927fb64e..44a82bce 100644
--- a/src/components/ImageLarge.tsx
+++ b/src/components/ImageLarge.tsx
@@ -28,6 +28,7 @@ export default function ImageLarge({
         className,
         src,
         alt,
+        layout: 'responsive',
         priority,
         blurDataURL: blurData,
         width: IMAGE_LARGE_WIDTH,