diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index 43cfaf9..ee750ab 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -109,7 +109,9 @@ export default async function Post({ params }: { params: Promise<{ slug: string
             for SEO.
           </span>
         )}
-        {meta.coverImage && <ImageWrapper src={meta.coverImage} alt={meta.coverImageAlt} />}
+        {meta.coverImage && (
+          <ImageWrapper src={meta.coverImage} alt={meta.coverImageAlt} priority />
+        )}
         <div className="prose">{content}</div>
 
         {meta.tags && (
diff --git a/components/content/CodeWrapper.tsx b/components/content/CodeWrapper.tsx
index 1f75cc8..6235291 100644
--- a/components/content/CodeWrapper.tsx
+++ b/components/content/CodeWrapper.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import { CopyButton } from '@/components/ui/CopyButton'
 import { getTextContent } from '@/lib/react-node-text'
 
@@ -13,12 +11,9 @@ export function CodeWrapper({ language, children }: CodeWrapperProps) {
   const lineCount = text.length === 0 ? 1 : text.split('\n').length
 
   return (
-    <div className="bg-foreground/10 rounded-md overflow-x-auto border border-border bg-fg/10">
-      <div
-        className="flex items-center gap-2 px-2 h-6 border-b border-border w-full"
-        aria-hidden="true"
-      >
-        <div className="space-x-1">
+    <div className="rounded-md overflow-x-auto border border-border bg-fg/10">
+      <div className="flex items-center gap-2 px-2 h-6 border-b border-border w-full">
+        <div className="space-x-1" aria-hidden="true">
           <span className="w-2 h-2 bg-border rounded-full inline-block"></span>
           <span className="w-2 h-2 bg-border rounded-full inline-block"></span>
           <span className="w-2 h-2 bg-border rounded-full inline-block"></span>
@@ -28,7 +23,10 @@ export function CodeWrapper({ language, children }: CodeWrapperProps) {
       </div>
 
       <div className="flex">
-        <div className="select-none text-right py-2 px-3 border-r border-border text-white font-mono text-sm leading-6 min-w-6">
+        <div
+          className="select-none text-right py-2 px-3 border-r border-border font-mono text-sm leading-6 min-w-6"
+          aria-hidden="true"
+        >
           {Array.from({ length: lineCount }, (_, i) => (
             <span className="block text-fg-dim" key={i}>
               {i + 1}
diff --git a/components/content/ImageWrapper.tsx b/components/content/ImageWrapper.tsx
index bd67d4f..36df458 100644
--- a/components/content/ImageWrapper.tsx
+++ b/components/content/ImageWrapper.tsx
@@ -4,10 +4,19 @@ import Image from 'next/image'
 type ImageWrapperProps = {
   src: string
   alt?: string
+  /** Visible caption. Falls back to the alt text when omitted. */
+  caption?: string
   isListing?: boolean
+  /** Preload the image. Only set this for above-the-fold images (covers, latest post). */
+  priority?: boolean
 }
 
-export function ImageWrapper({ src, alt, isListing }: ImageWrapperProps) {
+export function ImageWrapper({ src, alt, caption, isListing, priority }: ImageWrapperProps) {
+  const captionText = caption ?? alt
+  // When the caption just repeats the alt text, hide it from screen readers so it isn't
+  // announced twice
+  const captionIsAlt = caption === undefined
+
   return (
     <figure className={cn('flex flex-col items-center gap-1 mb-4 w-full', isListing && 'h-full')}>
       <div className="border border-border rounded-xl w-full overflow-hidden flex-1">
@@ -27,13 +36,19 @@ export function ImageWrapper({ src, alt, isListing }: ImageWrapperProps) {
           alt={alt ?? ''}
           width={isListing ? 400 : 900}
           height={isListing ? 240 : 600}
-          quality={isListing ? 75 : 100}
-          priority={true}
+          sizes={isListing ? '(min-width: 768px) 400px, 100vw' : '(min-width: 896px) 900px, 100vw'}
+          quality={isListing ? 75 : 90}
+          priority={priority}
           className="w-full mx-auto object-contain h-full max-h-150"
         />
       </div>
-      {!isListing && alt && (
-        <figcaption className="block text-xs text-fg-dim font-mono text-center">{alt}</figcaption>
+      {!isListing && captionText && (
+        <figcaption
+          className="block text-xs text-fg-dim font-mono text-center"
+          aria-hidden={captionIsAlt || undefined}
+        >
+          {captionText}
+        </figcaption>
       )}
     </figure>
   )
diff --git a/components/post/Post.tsx b/components/post/Post.tsx
index 9b1f53d..b578207 100644
--- a/components/post/Post.tsx
+++ b/components/post/Post.tsx
@@ -29,7 +29,14 @@ export function Post({ post, isLatest, showImageSlot }: PostProps) {
             !coverImage && 'hidden md:block',
           )}
         >
-          {coverImage && <ImageWrapper src={coverImage} alt={coverImageAlt ?? title} isListing />}
+          {coverImage && (
+            <ImageWrapper
+              src={coverImage}
+              alt={coverImageAlt ?? title}
+              isListing
+              priority={isLatest}
+            />
+          )}
         </div>
       )}
       <div className={cn('flex flex-col gap-1 w-full', isLatest && 'flex-1')}>
diff --git a/content/pages/projects.md b/content/pages/projects.md
index 61a5f6f..5401701 100644
--- a/content/pages/projects.md
+++ b/content/pages/projects.md
@@ -54,7 +54,7 @@ The new version has focus on ease of use for not tech-savvy users, with a simple
 **Status:** Active / Maintained
 
 **Screenshots:**
-![Linkboard UI (Old Version)](linkboard-old.png)
+![Linkboard UI (Old Version)](linkboard-old.webp)
 ![Linkboard UI (New Version)](linkboard-new.png)
 ![Linkboard Editor](linkboard-editor.png)
 
diff --git a/lib/mermaid-render.ts b/lib/mermaid-render.ts
index 162dab7..d587786 100644
--- a/lib/mermaid-render.ts
+++ b/lib/mermaid-render.ts
@@ -43,7 +43,7 @@ export async function renderMermaidToSvg(chart: string): Promise<string> {
       <html><body><div id="target"></div></body></html>
     `)
     await page.addScriptTag({
-      url: 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js',
+      url: 'https://cdn.jsdelivr.net/npm/mermaid@11.17.2/dist/mermaid.min.js',
     })
 
     const svg = await page.evaluate(async (source) => {
diff --git a/lib/posts.tsx b/lib/posts.tsx
index 37079d0..6727732 100644
--- a/lib/posts.tsx
+++ b/lib/posts.tsx
@@ -96,7 +96,9 @@ export async function getPostBySlug(slug: string, postDirectory: string = postsD
           typeof props['data-language'] === 'string' ? props['data-language'] : undefined
         return <CodeWrapper language={language}>{children}</CodeWrapper>
       },
-      img: ({ src, alt }: { src: string; alt: string }) => <ImageWrapper src={src} alt={alt} />,
+      img: ({ src, alt, title }: { src: string; alt: string; title?: string }) => (
+        <ImageWrapper src={src} alt={alt} caption={title} />
+      ),
       a: ({ href, children, ...props }: { href?: string; children: ReactNode }) => {
         if (href?.startsWith('http')) return <ExternalLink href={href}>{children}</ExternalLink>
         // Only internal routes go through next/link; anchors, mailto:, footnotes etc. stay plain
diff --git a/next.config.ts b/next.config.ts
index 19e8448..8feeddc 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,7 +2,7 @@ import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
   images: {
-    qualities: [75, 100],
+    qualities: [75, 90],
   },
   env: {
     GIT_COMMIT_HASH: process.env.SOURCE_COMMIT,
diff --git a/public/posts/bitez-dashboard.png b/public/posts/bitez-dashboard.png
index 4d92a5c..399c005 100644
Binary files a/public/posts/bitez-dashboard.png and b/public/posts/bitez-dashboard.png differ
diff --git a/public/posts/linkboard-editor.png b/public/posts/linkboard-editor.png
index a230361..9a5d7cb 100644
Binary files a/public/posts/linkboard-editor.png and b/public/posts/linkboard-editor.png differ
diff --git a/public/posts/linkboard-new.png b/public/posts/linkboard-new.png
index 526c35e..71135e0 100644
Binary files a/public/posts/linkboard-new.png and b/public/posts/linkboard-new.png differ
diff --git a/public/posts/linkboard-old.png b/public/posts/linkboard-old.png
deleted file mode 100644
index 52f0cd2..0000000
Binary files a/public/posts/linkboard-old.png and /dev/null differ
diff --git a/public/posts/linkboard-old.webp b/public/posts/linkboard-old.webp
new file mode 100644
index 0000000..5106537
Binary files /dev/null and b/public/posts/linkboard-old.webp differ