Add openimg for image optimization

.gitignore

@@ -15,6 +15,7 @@ node_modules
 /playwright/.cache/
 /tests/fixtures/email/
 /tests/fixtures/uploaded/
+/tests/fixtures/openimg/
 /coverage
 
 /other/cache.db

app/components/user-dropdown.tsx

@@ -11,6 +11,7 @@ import {
 	DropdownMenuItem,
 } from './ui/dropdown-menu'
 import { Icon } from './ui/icon'
+import { Img } from 'openimg/react'
 
 export function UserDropdown() {
 	const user = useUser()
@@ -25,10 +26,12 @@ export function UserDropdown() {
 						onClick={(e) => e.preventDefault()}
 						className="flex items-center gap-2"
 					>
-						<img
+						<Img
 							className="h-8 w-8 rounded-full object-cover"
 							alt={user.name ?? user.username}
 							src={getUserImgSrc(user.image?.id)}
+							width={256}
+							height={256}
 						/>
 						<span className="text-body-sm font-bold">
 							{user.name ?? user.username}

app/root.tsx

@@ -10,6 +10,7 @@ import {
 	useMatches,
 } from 'react-router'
 import { HoneypotProvider } from 'remix-utils/honeypot/react'
+import { OpenImgContextProvider } from 'openimg/react'
 import { type Route } from './+types/root.ts'
 import appleTouchIconAssetUrl from './assets/favicons/apple-touch-icon.png'
 import faviconAssetUrl from './assets/favicons/favicon.svg'
@@ -194,7 +195,7 @@ function App() {
 	useToast(data.toast)
 
 	return (
-		<>
+		<OpenImgContextProvider optimizerEndpoint="/resources/images">
 			<div className="flex min-h-screen flex-col justify-between">
 				<header className="container py-6">
 					<nav className="flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
@@ -226,7 +227,7 @@ function App() {
 			</div>
 			<EpicToaster closeButton position="top-center" theme={theme} />
 			<EpicProgress />
-		</>
+		</OpenImgContextProvider>
 	)
 }
 

app/routes/resources+/images.tsx

@@ -0,0 +1,91 @@
+import { invariantResponse } from '@epic-web/invariant'
+import { getImgResponse } from 'openimg/node'
+import { prisma } from '#app/utils/db.server.ts'
+import { getDomainUrl } from '#app/utils/misc.tsx'
+import { getSignedGetRequestInfo } from '#app/utils/storage.server.ts'
+import { type Route } from './+types/images.ts'
+
+export async function loader({ request }: Route.LoaderArgs) {
+	const domain = getDomainUrl(request)
+	const headers = new Headers()
+	headers.set('Cache-Control', 'public, max-age=31536000, immutable')
+	return getImgResponse(request, {
+		headers,
+		allowlistedOrigins: [domain, process.env.AWS_ENDPOINT_URL_S3].filter(
+			Boolean,
+		),
+		cacheFolder:
+			process.env.NODE_ENV === 'production'
+				? '/data/images'
+				: './tests/fixtures/openimg',
+		getImgSource: ({ params }) => {
+			if (params.src.startsWith('/resources')) {
+				const searchParams = new URLSearchParams(params.src.split('?')[1])
+				const userImageId = searchParams.get('userImageId')
+				if (userImageId) {
+					return handleUserImage(userImageId)
+				}
+				const noteImageId = searchParams.get('noteImageId')
+				if (noteImageId) {
+					return handleNoteImage(noteImageId)
+				}
+
+				// Fetch image from resource endpoint
+				return {
+					type: 'fetch',
+					url: domain + params.src,
+				}
+			}
+			if (URL.canParse(params.src)) {
+				// Fetch image from external URL; will be matched against allowlist
+				return {
+					type: 'fetch',
+					url: params.src,
+				}
+			}
+			// Retrieve image from filesystem (public folder)
+			if (params.src.startsWith('/assets')) {
+				// Files managed by Vite
+				return {
+					type: 'fs',
+					path: '.' + params.src,
+				}
+			}
+			// Fallback to files in public folder
+			return {
+				type: 'fs',
+				path: './public' + params.src,
+			}
+		},
+	})
+}
+
+async function handleUserImage(userImageId: string) {
+	const userImage = await prisma.userImage.findUnique({
+		where: { id: userImageId },
+		select: { objectKey: true },
+	})
+	invariantResponse(userImage, 'User image not found', { status: 404 })
+
+	const { url, headers } = getSignedGetRequestInfo(userImage.objectKey)
+	return {
+		type: 'fetch',
+		url,
+		headers,
+	}
+}
+
+async function handleNoteImage(noteImageId: string) {
+	const noteImage = await prisma.noteImage.findUnique({
+		where: { id: noteImageId },
+		select: { objectKey: true },
+	})
+	invariantResponse(noteImage, 'Note image not found', { status: 404 })
+
+	const { url, headers } = getSignedGetRequestInfo(noteImage.objectKey)
+	return {
+		type: 'fetch',
+		url,
+		headers,
+	}
+}

app/routes/settings+/profile.index.tsx

@@ -2,6 +2,7 @@ import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { invariantResponse } from '@epic-web/invariant'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import { Img } from 'openimg/react'
 import { data, Link, useFetcher } from 'react-router'
 import { z } from 'zod'
 import { ErrorList, Field } from '#app/components/forms.tsx'
@@ -101,10 +102,13 @@ export default function EditUserProfile({ loaderData }: Route.ComponentProps) {
 		<div className="flex flex-col gap-12">
 			<div className="flex justify-center">
 				<div className="relative h-52 w-52">
-					<img
+					<Img
 						src={getUserImgSrc(loaderData.user.image?.id)}
 						alt={loaderData.user.username}
 						className="h-full w-full rounded-full object-cover"
+						width={832}
+						height={832}
+						isAboveFold
 					/>
 					<Button
 						asChild

app/routes/users+/$username.tsx

@@ -5,6 +5,7 @@ import {
 	Link,
 	useLoaderData,
 } from 'react-router'
+import { Img } from 'openimg/react'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { Spacer } from '#app/components/spacer.tsx'
 import { Button } from '#app/components/ui/button.tsx'
@@ -48,10 +49,12 @@ export default function ProfileRoute() {
 				<div className="relative w-52">
 					<div className="absolute -top-40">
 						<div className="relative">
-							<img
+							<Img
 								src={getUserImgSrc(data.user.image?.id)}
 								alt={userDisplayName}
 								className="h-52 w-52 rounded-full object-cover"
+								width={832}
+								height={832}
 							/>
 						</div>
 					</div>

app/routes/users+/$username_+/__note-editor.tsx

@@ -21,6 +21,7 @@ import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { Textarea } from '#app/components/ui/textarea.tsx'
 import { cn, getNoteImgSrc, useIsPending } from '#app/utils/misc.tsx'
 import { type Info } from './+types/notes.$noteId_.edit.ts'
+import { Img } from 'openimg/react'
 
 const titleMinLength = 1
 const titleMaxLength = 100
@@ -188,10 +189,12 @@ function ImageChooser({ meta }: { meta: FieldMetadata<ImageFieldset> }) {
 						>
 							{previewImage ? (
 								<div className="relative">
-									<img
+									<Img
 										src={previewImage}
 										alt={altText ?? ''}
 										className="h-32 w-32 rounded-lg object-cover"
+										width={512}
+										height={512}
 									/>
 									{existingImage ? null : (
 										<div className="pointer-events-none absolute -right-0.5 -top-0.5 rotate-12 rounded-sm bg-secondary px-2 py-1 text-xs text-secondary-foreground shadow-md">

app/routes/users+/$username_+/notes.$noteId.tsx

@@ -18,6 +18,7 @@ import { redirectWithToast } from '#app/utils/toast.server.ts'
 import { userHasPermission, useOptionalUser } from '#app/utils/user.ts'
 import { type Route, type Info } from './+types/notes.$noteId.ts'
 import { type Info as notesInfo } from './+types/notes.ts'
+import { Img } from 'openimg/react'
 
 export async function loader({ params }: Route.LoaderArgs) {
 	const note = await prisma.note.findUnique({
@@ -106,10 +107,12 @@ export default function NoteRoute({
 					{loaderData.note.images.map((image) => (
 						<li key={image.id}>
 							<a href={getNoteImgSrc(image.id)}>
-								<img
+								<Img
 									src={getNoteImgSrc(image.id)}
 									alt={image.altText ?? ''}
 									className="h-32 w-32 rounded-lg object-cover"
+									width={512}
+									height={512}
 								/>
 							</a>
 						</li>

app/routes/users+/$username_+/notes.tsx

@@ -1,5 +1,6 @@
 import { invariantResponse } from '@epic-web/invariant'
 import { Link, NavLink, Outlet } from 'react-router'
+import { Img } from 'openimg/react'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { prisma } from '#app/utils/db.server.ts'
@@ -39,10 +40,12 @@ export default function NotesRoute({ loaderData }: Route.ComponentProps) {
 							to={`/users/${loaderData.owner.username}`}
 							className="flex flex-col items-center justify-center gap-2 bg-muted pb-4 pl-8 pr-4 pt-12 lg:flex-row lg:justify-start lg:gap-4"
 						>
-							<img
+							<Img
 								src={getUserImgSrc(loaderData.owner.image?.id)}
 								alt={ownerDisplayName}
 								className="h-16 w-16 rounded-full object-cover lg:h-24 lg:w-24"
+								width={256}
+								height={256}
 							/>
 							<h1 className="text-center text-base font-bold md:text-lg lg:text-left lg:text-2xl">
 								{ownerDisplayName}'s Notes

app/routes/users+/index.tsx

@@ -1,5 +1,6 @@
 import { data, redirect, Link } from 'react-router'
 import { z } from 'zod'
+import { Img } from 'openimg/react'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ErrorList } from '#app/components/forms.tsx'
 import { SearchBar } from '#app/components/search-bar.tsx'
@@ -79,10 +80,12 @@ export default function UsersRoute({ loaderData }: Route.ComponentProps) {
 										to={user.username}
 										className="flex h-36 w-44 flex-col items-center justify-center rounded-lg bg-muted px-5 py-3"
 									>
-										<img
+										<Img
 											alt={user.name ?? user.username}
 											src={getUserImgSrc(user.imageId)}
 											className="h-16 w-16 rounded-full"
+											width={256}
+											height={256}
 										/>
 										{user.name ? (
 											<span className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-center text-body-md">

app/utils/misc.tsx

@@ -6,11 +6,11 @@ import { extendTailwindMerge } from 'tailwind-merge'
 import { extendedTheme } from './extended-theme.ts'
 
 export function getUserImgSrc(imageId?: string | null) {
-	return imageId ? `/resources/user-images/${imageId}` : '/img/user.png'
+	return imageId ? `/resources/images?userImageId=${imageId}` : '/img/user.png'
 }
 
 export function getNoteImgSrc(imageId: string) {
-	return `/resources/note-images/${imageId}`
+	return `/resources/images?noteImageId=${imageId}`
 }
 
 export function getErrorMessage(error: unknown) {

docs/decisions/041-image-optimization.md

@@ -0,0 +1,42 @@
+# Introduce Image Optimization
+
+Date: 2025-02-19
+
+Status: accepted
+
+## Context
+
+As documented in [018-images.md](./018-images.md), the Epic Stack previously
+didn't implement image optimization. Both static app images and dynamic user
+images were served as is. However, optimizing images significantly improves web
+performance by reducing both the browser load time and the byte size of each
+image. On the other hand, one of the guiding principles of the Epic Stack is to
+limit services (including the self-managed variety). A great middle ground is to
+integrate a simple image optimization solution directly into the web server.
+This allows each Epic Stack app to immediately utilize image optimization and
+serve better web experiences without prescribing a service.
+
+On-demand image optimization with a image optimization endpoint should be
+sufficient for most applications and provide value right out of the gate.
+However, it is also important that upgrading to a dedicated service shouldn't be
+overly complicated and require a ton of changes.
+
+### Using openimg
+
+The goal of openimg is to be easy to use but also highly configurable, so you
+can reconfigure it (or replace it) as your app grows. We can start simple by
+introducing a new image optimization endpoint and replace `img` elements with
+the `Img` component.
+
+## Decision
+
+Introduce an image optimization endpoint using the
+[openimg package](https://github.com/andrelandgraf/openimg). We can then use the
+`Img` component to query for optimized images and iterate from there.
+
+## Consequences
+
+Serving newly added images will now lead to an image optimization step whenever
+a cache miss happens. This increases the image laod time but greatly reduces the
+images sizes. On further requests, the load time should also be improved due to
+the decreased image sizes.