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'])}
+
+ Set environment variable up to {'"1-100"'} to control the quality
+ of large photos:
+ {renderEnvVars(['NEXT_PUBLIC_IMAGE_QUALITY'])}
+