Merge pull request #179 from sambecker/next-image-quality

Expose configuration for `next/image` quality

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

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

src/site/SiteChecklistClient.tsx

@@ -60,6 +60,8 @@ export default function SiteChecklistClient({
   arePhotoCategoriesStaticallyOptimized,
   arePhotoCategoryOgImagesStaticallyOptimized,
   areOriginalUploadsPreserved,
+  imageQuality,
+  hasImageQuality,
   isBlurEnabled,
   // Visual
   hasDefaultTheme,
@@ -460,6 +462,17 @@ 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 from {'"1-100"'}
+              {' '}
+              to control the quality of large photos
+              ({'"100"'} represents highest quality/largest size):
+              {renderEnvVars(['NEXT_PUBLIC_IMAGE_QUALITY'])}
+            </ChecklistRow>
             <ChecklistRow
               title="Image blur"
               status={isBlurEnabled}

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),