Fixed custom OG image using old extension

quartz/plugins/emitters/ogImage.tsx

@@ -12,6 +12,8 @@ import { BuildCtx } from "../../util/ctx"
 import { QuartzPluginData } from "../vfile"
 import fs from "node:fs/promises"
 import chalk from "chalk"
+import { getExtFromUrl } from "../../util/url"
+import { imageExtsToOptimize, targetOptimizedImageExt } from "./assets"
 
 const defaultOptions: SocialImageOptions = {
   colorScheme: "lightMode",
@@ -151,6 +153,17 @@ export const CustomOgImages: QuartzEmitterPlugin<Partial<SocialImageOptions>> =
               userDefinedOgImagePath = isAbsoluteURL(userDefinedOgImagePath)
                 ? userDefinedOgImagePath
                 : `https://${baseUrl}/static/${userDefinedOgImagePath}`
+
+              // Replace extension of eligible image files with target extension if image optimization is enabled.
+              if (ctx.cfg.configuration.optimizeImages) {
+                const ext = getExtFromUrl(userDefinedOgImagePath)?.toLowerCase()
+                if (ext && imageExtsToOptimize.has(ext)) {
+                  userDefinedOgImagePath = userDefinedOgImagePath.replace(
+                    ext,
+                    targetOptimizedImageExt,
+                  )
+                }
+              }
             }
 
             const generatedOgImagePath = isRealFile

quartz/util/url.ts

@@ -0,0 +1,13 @@
+/**
+ * Extracts file extension from a file resource URL.
+ *
+ * @param url - URL to extract the file extension from
+ * @returns The file extension (with a preceding dot) or undefined if none found
+ */
+export function getExtFromUrl(url: string): string | undefined {
+  const urlObj = new URL(url)
+  const pathname = urlObj.pathname
+  // Remove any query parameters or hash first
+  const ext = pathname.split(/[#?]/)[0].split(".").pop()?.trim()
+  return ext === pathname ? undefined : "." + ext
+}