feat(image): add defaultImageQuality config to website mod.ts (#1585)

* feat(image): add defaultImageQuality config to website mod.ts

Allow sites to configure a default image quality (low/medium/high/original)
from the website app settings, applied as fallback when components don't
set an explicit quality prop.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat(image): remove "original" from defaultImageQuality and fallback quality from src URL

- Add DefaultQualityOptions type excluding "original" for the default config
- Extract quality param from originalSrc URL as fallback when not set via prop

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(image): prevent URL crash on relative paths and remove unused FeatureFlags field

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Update website/components/Image.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update Image.tsx

* docs(image): clarify quality types and context purpose

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Dex <fernandofrizzatti@gmail.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: 4 people

website/components/Image.tsx

@@ -1,6 +1,8 @@
 import { Head, IS_BROWSER } from "$fresh/runtime.ts";
 import type { JSX } from "preact";
+import { createContext } from "preact";
 import { forwardRef } from "preact/compat";
+import { useContext } from "preact/hooks";
 
 const DEFAULT_CDN_HOST = "https://decoims.com";
 
@@ -72,8 +74,19 @@ const bypassDecoImageOptimization = () =>
     ? (globalThis as any).DECO?.featureFlags?.bypassDecoImageOptimization
     : Deno.env.get("BYPASS_DECO_IMAGE_OPTIMIZATION") === "true";
 
+/** Quality options available per component (includes "original" = 100%). */
 export type QualityOptions = "low" | "medium" | "high" | "original"; // 60% - 70% - 80% - 100%
 
+/** Quality options for the site-wide default in mod.ts — "original" is excluded
+ *  because a global 100% quality default would hurt performance. */
+export type DefaultQualityOptions = "low" | "medium" | "high";
+
+/** Provides the site-wide default quality to Image/Picture components.
+ *  Typed as QualityOptions because components may override with "original". */
+export const DefaultImageQualityContext = createContext<
+  QualityOptions | undefined
+>(undefined);
+
 interface OptimizationOptions {
   originalSrc: string;
   width: number;
@@ -222,7 +235,9 @@ export const getOptimizedMediaUrl = (opts: OptimizationOptions) => {
   params.set("fit", fit);
   params.set("width", `${width}`);
   height && params.set("height", `${height}`);
-  quality && params.set("quality", quality);
+  const srcQuality = quality ||
+    new URL(originalSrc, "https://a.com").searchParams.get("quality");
+  srcQuality && params.set("quality", srcQuality);
 
   // Strip known CDN prefixes so the worker can hit GCS directly instead of
   // doing an absolute-URL hop. Anything left (path + any query string —
@@ -302,6 +317,8 @@ export const getEarlyHintFromSrcProps = (srcProps: {
 
 const Image = forwardRef<HTMLImageElement, Props>((props, ref) => {
   const { preload, loading = "lazy" } = props;
+  const defaultQuality = useContext(DefaultImageQualityContext);
+  const quality = props.quality ?? defaultQuality;
 
   const shouldSetEarlyHint = !!props.setEarlyHint && preload;
   const srcSet = props.srcSet ??
@@ -311,7 +328,7 @@ const Image = forwardRef<HTMLImageElement, Props>((props, ref) => {
       props.height,
       props.fit,
       shouldSetEarlyHint ? FACTORS.slice(-1) : FACTORS,
-      props.quality,
+      quality,
     );
 
   const linkProps = srcSet &&
@@ -337,7 +354,7 @@ const Image = forwardRef<HTMLImageElement, Props>((props, ref) => {
         height: props.height,
         fetchpriority: props.fetchPriority,
         src: props.src,
-        quality: props.quality,
+        quality,
       }),
     );
   }

website/components/Picture.tsx

@@ -4,6 +4,7 @@ import { ComponentChildren, createContext, JSX } from "preact";
 import { Head, IS_BROWSER } from "$fresh/runtime.ts";
 
 import {
+  DefaultImageQualityContext,
   FACTORS,
   getEarlyHintFromSrcProps,
   getSrcSet,
@@ -39,6 +40,8 @@ type SourceProps =
 export const Source = forwardRef<HTMLSourceElement, SourceProps>(
   (props, ref) => {
     const { preload } = useContext(Context);
+    const defaultQuality = useContext(DefaultImageQualityContext);
+    const quality = props.quality ?? defaultQuality;
 
     const shouldSetEarlyHint = !!props.setEarlyHint && preload;
     const srcSet = getSrcSet(
@@ -47,7 +50,7 @@ export const Source = forwardRef<HTMLSourceElement, SourceProps>(
       props.height,
       undefined,
       shouldSetEarlyHint ? FACTORS.slice(-1) : FACTORS,
-      props.quality,
+      quality,
     );
     const linkProps = {
       imagesrcset: srcSet,
@@ -68,7 +71,7 @@ export const Source = forwardRef<HTMLSourceElement, SourceProps>(
           height: props.height,
           fetchpriority: props.fetchPriority,
           src: props.src,
-          quality: props.quality,
+          quality,
         }),
       );
     }

website/mod.ts

@@ -1,5 +1,6 @@
 import "./utils/unhandledRejection.ts";
 import type { Props as Seo } from "./components/Seo.tsx";
+import type { DefaultQualityOptions } from "./components/Image.tsx";
 import { Routes } from "./flags/audience.ts";
 import { TextReplace } from "./handlers/proxy.ts";
 import manifest, { Manifest } from "./manifest.gen.ts";
@@ -143,6 +144,12 @@ export interface Props {
    */
   sendToClickHouse?: boolean;
 
+  /**
+   * @title Default Image Quality
+   * @description The default quality for images when not explicitly set per component
+   */
+  defaultImageQuality?: DefaultQualityOptions;
+
   /**
    * @title Disable image/asset proxy for this site
    * @description Disable image/asset proxy for this site

website/pages/Page.tsx

@@ -16,6 +16,7 @@ import {
 import { logger } from "@deco/deco/o11y";
 import { Component, JSX } from "preact";
 import ErrorPageComponent from "../../utils/defaultErrorPage.tsx";
+import { DefaultImageQualityContext } from "../components/Image.tsx";
 import OneDollarStats from "../components/OneDollarStats.tsx";
 import Events from "../components/Events.tsx";
 import { SEOSection } from "../components/Seo.tsx";
@@ -106,13 +107,14 @@ function Page(
     seo,
     unindexedDomain,
     avoidRedirectingToEditor,
+    defaultImageQuality,
   }: SectionProps<typeof loader>,
 ): JSX.Element {
   const context = Context.active();
   const site = { id: context.siteId, name: context.site };
   const deco = useDeco();
   return (
-    <>
+    <DefaultImageQualityContext.Provider value={defaultImageQuality}>
       {unindexedDomain && (
         <Head>
           <meta name="robots" content="noindex, nofollow" />
@@ -148,7 +150,7 @@ function Page(
         )}
         {sections?.map(renderSection)}
       </ErrorBoundary>
-    </>
+    </DefaultImageQualityContext.Provider>
   );
 }
 
@@ -183,21 +185,22 @@ export const loader = async (
     devMode,
     unindexedDomain,
     avoidRedirectingToEditor: ctx.avoidRedirectingToEditor,
+    defaultImageQuality: ctx.defaultImageQuality,
   };
 };
 export function Preview(props: SectionProps<typeof loader>) {
-  const { sections, seo } = props;
+  const { sections, seo, defaultImageQuality } = props;
   const deco = useDeco();
   return (
-    <>
+    <DefaultImageQualityContext.Provider value={defaultImageQuality}>
       <Head>
         <meta name="robots" content="noindex, nofollow" />
       </Head>
 
       {seo && renderSection(seo)}
       <Events deco={deco} />
       {sections?.map(renderSection)}
-    </>
+    </DefaultImageQualityContext.Provider>
   );
 }
 const PAGE_NOT_FOUND = -1;