From afe4baeca0ce87ba89907da05bd3ea4edc2b1e3f Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 30 Jan 2025 23:14:08 -0600
Subject: [PATCH 1/2] Expose configuration for next/image quality

---
 README.md                           |  1 +
 src/components/image/ImageLarge.tsx |  2 ++
 src/site/SiteChecklistClient.tsx    | 11 +++++++++++
 src/site/config.ts                  |  6 ++++++
 4 files changed, 20 insertions(+)

diff --git a/README.md b/README.md
index a74065f7..02de618f 100644
--- a/README.md
+++ b/README.md
@@ -108,6 +108,7 @@ Application behavior can be changed by configuring the following environment var
 - `NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORIES = 1` enables static optimization for photo categories (`tag/[tag]`, `shot-on/[make]/[model]`, etc.), i.e., renders pages at build time
 - `NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORY_OG_IMAGES = 1` enables static optimization for photo category (`tag/[tag]`, `shot-on/[make]/[model]`, etc.) OG images, i.e., renders images at build time
 - `NEXT_PUBLIC_PRESERVE_ORIGINAL_UPLOADS = 1` prevents photo uploads being compressed before storing
+- `NEXT_PUBLIC_IMAGE_QUALITY = 1-100` controls the quality of large photos
 - `NEXT_PUBLIC_BLUR_DISABLED = 1` prevents image blur data being stored and displayed (potentially useful for limiting Postgres usage)
 
 #### Visual
diff --git a/src/components/image/ImageLarge.tsx b/src/components/image/ImageLarge.tsx
index 18569d92..3b14025e 100644
--- a/src/components/image/ImageLarge.tsx
+++ b/src/components/image/ImageLarge.tsx
@@ -1,3 +1,4 @@
+import { IMAGE_QUALITY } from '@/site/config';
 import { IMAGE_WIDTH_LARGE, ImageProps } from '.';
 import ImageWithFallback from './ImageWithFallback';
 
@@ -13,6 +14,7 @@ export default function ImageLarge(props: ImageProps) {
       blurCompatibilityLevel: blurCompatibilityMode ? 'high' : 'none',
       width: IMAGE_WIDTH_LARGE,
       height: Math.round(IMAGE_WIDTH_LARGE / aspectRatio),
+      quality: IMAGE_QUALITY,
     }} />
   );
 };
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index 96533fa0..7f800d45 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -60,6 +60,8 @@ export default function SiteChecklistClient({
   arePhotoCategoriesStaticallyOptimized,
   arePhotoCategoryOgImagesStaticallyOptimized,
   areOriginalUploadsPreserved,
+  imageQuality,
+  hasImageQuality,
   isBlurEnabled,
   // Visual
   hasDefaultTheme,
@@ -460,6 +462,15 @@ export default function SiteChecklistClient({
               image uploads being compressed before storing:
               {renderEnvVars(['NEXT_PUBLIC_PRESERVE_ORIGINAL_UPLOADS'])}
             </ChecklistRow>
+            <ChecklistRow
+              title={`Image quality: ${imageQuality}`}
+              status={hasImageQuality}
+              optional
+            >
+              Set environment variable up to {'"1-100"'} to control the quality
+              of large photos:
+              {renderEnvVars(['NEXT_PUBLIC_IMAGE_QUALITY'])}
+            </ChecklistRow>
             <ChecklistRow
               title="Image blur"
               status={isBlurEnabled}
diff --git a/src/site/config.ts b/src/site/config.ts
index 14caa427..09e8d98b 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -160,6 +160,10 @@ export const PRESERVE_ORIGINAL_UPLOADS =
   process.env.NEXT_PUBLIC_PRESERVE_ORIGINAL_UPLOADS === '1' ||
   // Legacy environment variable name
   process.env.NEXT_PUBLIC_PRO_MODE === '1';
+export const IMAGE_QUALITY =
+  process.env.NEXT_PUBLIC_IMAGE_QUALITY
+    ? parseInt(process.env.NEXT_PUBLIC_IMAGE_QUALITY)
+    : 75;
 export const BLUR_ENABLED =
   process.env.NEXT_PUBLIC_BLUR_DISABLED !== '1';
 
@@ -271,6 +275,8 @@ export const CONFIG_CHECKLIST_STATUS = {
   // eslint-disable-next-line max-len
   arePhotoCategoryOgImagesStaticallyOptimized: STATICALLY_OPTIMIZED_PHOTO_CATEGORY_OG_IMAGES,
   areOriginalUploadsPreserved: PRESERVE_ORIGINAL_UPLOADS,
+  imageQuality: IMAGE_QUALITY,
+  hasImageQuality: Boolean(process.env.NEXT_PUBLIC_IMAGE_QUALITY),
   isBlurEnabled: BLUR_ENABLED,
   // Visual
   hasDefaultTheme: Boolean(process.env.NEXT_PUBLIC_DEFAULT_THEME),

From e61b89eb6346c0e8b4707ad6705c07f72fae476d Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 31 Jan 2025 08:34:14 -0600
Subject: [PATCH 2/2] Update image quality config text

---
 src/site/SiteChecklistClient.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index 7f800d45..9ed5a71d 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -467,8 +467,10 @@ export default function SiteChecklistClient({
               status={hasImageQuality}
               optional
             >
-              Set environment variable up to {'"1-100"'} to control the quality
-              of large photos:
+              Set environment variable from {'"1-100"'}
+              {' '}
+              to control the quality of large photos
+              ({'"100"'} represents highest quality/largest size):
               {renderEnvVars(['NEXT_PUBLIC_IMAGE_QUALITY'])}
             </ChecklistRow>
             <ChecklistRow