🔨 bake gdoc images as PNG instead of WebP

baker/GDriveImagesBaker.tsx

@@ -80,17 +80,21 @@ export const bakeDriveImages = async (bakedSiteDir: string) => {
             let buffer = Buffer.from(await response.arrayBuffer())
 
             if (!image.isSvg) {
+                // Save the original image
+                await fs.writeFile(
+                    path.join(imagesDirectory, image.filename),
+                    buffer
+                )
+                // Save resized versions
                 await Promise.all(
                     image.sizes!.map((width) => {
                         const localResizedFilepath = path.join(
                             imagesDirectory,
-                            `${image.filenameWithoutExtension}_${width}.webp`
+                            `${image.filenameWithoutExtension}_${width}.png`
                         )
                         return sharp(buffer)
                             .resize(width)
-                            .webp({
-                                lossless: true,
-                            })
+                            .png()
                             .toFile(localResizedFilepath)
                     })
                 )
@@ -110,12 +114,12 @@ export const bakeDriveImages = async (bakedSiteDir: string) => {
                         `$1<defs><style>@import url(${BAKED_BASE_URL}/fonts.css)</style></defs>`
                     )
                 buffer = Buffer.from(svg)
+                // Save the svg
+                await fs.writeFile(
+                    path.join(imagesDirectory, image.filename),
+                    buffer
+                )
             }
-            // For SVG, and a non-webp fallback copy of the image
-            await fs.writeFile(
-                path.join(imagesDirectory, image.filename),
-                buffer
-            )
 
             // Save the etag to a sidecar
             await fs.writeFile(

db/model/Image.ts

@@ -18,6 +18,7 @@ import {
     GDriveImageMetadata,
     ImageMetadata,
     findDuplicates,
+    getFilenameMIMEType,
 } from "@ourworldindata/utils"
 import { OwidGoogleAuth } from "../OwidGoogleAuth.js"
 import {
@@ -233,18 +234,11 @@ export class Image extends BaseEntity implements ImageMetadata {
         const bucket = IMAGE_HOSTING_BUCKET_PATH.slice(0, indexOfFirstSlash)
         const directory = IMAGE_HOSTING_BUCKET_PATH.slice(indexOfFirstSlash + 1)
 
-        const fileExtension = this.fileExtension
-        const MIMEType = {
-            png: "image/png",
-            svg: "image/svg+xml",
-            jpg: "image/jpg",
-            jpeg: "image/jpeg",
-            webp: "image/webp",
-        }[fileExtension]
+        const MIMEType = getFilenameMIMEType(this.filename)
 
         if (!MIMEType) {
             throw new Error(
-                `Error uploading image: unsupported file extension ${fileExtension}`
+                `Error uploading image "${this.filename}": unsupported file extension`
             )
         }
 

packages/@ourworldindata/utils/src/image.ts

@@ -30,7 +30,7 @@ export function generateSrcSet(
         .map((size) => {
             const path = `/images/published/${getFilenameWithoutExtension(
                 encodeURIComponent(filename)
-            )}_${size}.webp`
+            )}_${size}.png`
             return `${path} ${size}w`
         })
         .join(", ")
@@ -42,10 +42,29 @@ export function getFilenameWithoutExtension(
     return filename.slice(0, filename.indexOf("."))
 }
 
+export function getFilenameExtension(
+    filename: ImageMetadata["filename"]
+): string {
+    return filename.slice(filename.indexOf(".") + 1)
+}
+
 export function getFilenameAsPng(filename: ImageMetadata["filename"]): string {
     return `${getFilenameWithoutExtension(filename)}.png`
 }
 
+export function getFilenameMIMEType(filename: string): string | undefined {
+    const fileExtension = getFilenameExtension(filename)
+    const MIMEType = {
+        png: "image/png",
+        svg: "image/svg+xml",
+        jpg: "image/jpg",
+        jpeg: "image/jpeg",
+        webp: "image/webp",
+    }[fileExtension]
+
+    return MIMEType
+}
+
 export type SourceProps = {
     media: string | undefined
     srcSet: string
@@ -92,11 +111,11 @@ export function getFeaturedImageFilename(gdoc: OwidGdoc): string | undefined {
             },
             (match) => {
                 const featuredImageSlug = match.content["featured-image"]
-                // Social media platforms don't support SVG's for og:image
-                // So no matter what, we use the png fallback that the baker generates
-                return featuredImageSlug
+                if (!featuredImageSlug) return undefined
+                // Social media platforms don't support SVG's for og:image, in which case, use the fallback PNG that the baker generates
+                return getFilenameExtension(featuredImageSlug) === "svg"
                     ? getFilenameAsPng(featuredImageSlug)
-                    : undefined
+                    : featuredImageSlug
             }
         )
         .with({ content: { type: OwidGdocType.DataInsight } }, (gdoc) => {

packages/@ourworldindata/utils/src/index.ts

@@ -363,6 +363,8 @@ export {
     generateSrcSet,
     getFilenameWithoutExtension,
     getFilenameAsPng,
+    getFilenameExtension,
+    getFilenameMIMEType,
     type SourceProps,
     generateSourceProps,
     getFeaturedImageFilename,

site/gdocs/components/Image.tsx

@@ -4,6 +4,7 @@ import {
     IMAGES_DIRECTORY,
     generateSourceProps,
     ImageMetadata,
+    getFilenameMIMEType,
 } from "@ourworldindata/utils"
 import { LIGHTBOX_IMAGE_CLASS } from "../../Lightbox.js"
 import {
@@ -104,7 +105,7 @@ export default function Image(props: {
                 <source
                     srcSet={`${makePreviewUrl(i.filename)} ${i.originalWidth}w`}
                     media={sm ? "(max-width: 768px)" : undefined}
-                    type="image/webp"
+                    type={getFilenameMIMEType(i.filename)}
                     sizes={
                         containerSizes[containerType] ?? containerSizes.default
                     }
@@ -156,7 +157,7 @@ export default function Image(props: {
                 <source
                     key={i}
                     {...props}
-                    type="image/webp"
+                    type="image/png"
                     sizes={
                         containerSizes[containerType] ?? containerSizes.default
                     }