diff --git a/src/app/[locale]/blog/[slug]/page.tsx b/src/app/[locale]/blog/[slug]/page.tsx
index 80024bd..25fa1f1 100644
--- a/src/app/[locale]/blog/[slug]/page.tsx
+++ b/src/app/[locale]/blog/[slug]/page.tsx
@@ -2,7 +2,7 @@ import Footer from "@/components/page-sections/footer"
 import { generateSeoMetadata } from "@/components/seo"
 import Back from "@/components/ui/back"
 
-import { urlFor } from "@/lib/imageUrlBuilder"
+import { type SanityImage, urlFor } from "@/lib/imageUrlBuilder"
 import { getBlogPost } from "@/lib/sanity"
 
 import { PortableText, PortableTextComponents } from "@portabletext/react"
@@ -20,11 +20,7 @@ interface BlogPageParams {
   }>
 }
 
-interface ImageValue {
-  asset?: {
-    _id: string
-    url: string
-  }
+type ImageValue = Partial<SanityImage> & {
   alt?: string
   caption?: string
 }
@@ -67,7 +63,10 @@ export async function generateMetadata({
     path: `/blog/${slug}`,
     title: data.title,
     description: data.excerpt,
-    imageURL: data.mainImage?.asset?.url,
+    // Cropped around the hotspot to the size link previews expect
+    imageURL: data.mainImage?.asset
+      ? urlFor(data.mainImage).width(1200).height(630).url()
+      : undefined,
     author: data.author?.name,
     publishedTime: data._createdAt,
   })
@@ -80,10 +79,13 @@ const components: PortableTextComponents = {
       return (
         <div className={styles.imageContainer}>
           <Image
-            src={urlFor(value).url()}
+            // Only a width, so the image keeps its shape and just the crop
+            // applies. fit("max") avoids upscaling small images
+            src={urlFor(value).width(1200).fit("max").url()}
             alt={value.alt || "Blog image"}
             width={800}
             height={400}
+            sizes="(max-width: 640px) 100vw, 640px"
             style={{ width: "100%", height: "auto" }}
           />
           {value.caption && (
@@ -144,10 +146,11 @@ const BlogPost = async ({ params }: BlogPageParams) => {
           <header className={styles.header}>
             {data.mainImage && (
               <Image
-                src={urlFor(data.mainImage).url()}
+                src={urlFor(data.mainImage).width(1600).fit("max").url()}
                 alt={data.title}
                 width={800}
                 height={400}
+                sizes="(max-width: 850px) 100vw, 850px"
                 className={styles.headerImage}
               />
             )}
@@ -158,7 +161,7 @@ const BlogPost = async ({ params }: BlogPageParams) => {
                 <Image
                   className="circular"
                   alt={data.author.name}
-                  src={urlFor(data.author.image).width(50).height(50).url()}
+                  src={urlFor(data.author.image).width(100).height(100).url()}
                   width={50}
                   height={50}
                 />
diff --git a/src/components/page-sections/boardMembers.tsx b/src/components/page-sections/boardMembers.tsx
index 851df97..242da5f 100644
--- a/src/components/page-sections/boardMembers.tsx
+++ b/src/components/page-sections/boardMembers.tsx
@@ -1,4 +1,4 @@
-import { urlFor } from "@/lib/imageUrlBuilder"
+import { type SanityImage, urlFor } from "@/lib/imageUrlBuilder"
 import { getBoardMembers } from "@/lib/sanity"
 
 import { getLocale, getTranslations } from "next-intl/server"
@@ -14,12 +14,7 @@ interface BoardMember {
     no: string
     en: string
   }
-  image?: {
-    asset?: {
-      _id: string
-      url: string
-    }
-  }
+  image: SanityImage | null
   bio?: {
     no: string
     en: string
@@ -44,11 +39,9 @@ const BoardMembers = async () => {
               >
                 <Image
                   src={
-                    member.image?.asset?.url
-                      ? urlFor(member.image.asset.url)
-                          .width(512)
-                          .height(512)
-                          .url()
+                    member.image?.asset
+                      ? // Cropped to a square around the hotspot
+                        urlFor(member.image).width(512).height(512).url()
                       : "/person.png"
                   }
                   width={256}
diff --git a/src/lib/imageUrlBuilder.ts b/src/lib/imageUrlBuilder.ts
index a800bc8..6bf1a7d 100644
--- a/src/lib/imageUrlBuilder.ts
+++ b/src/lib/imageUrlBuilder.ts
@@ -1,5 +1,6 @@
 import {
   createImageUrlBuilder,
+  type SanityImageObject,
   type SanityImageSource,
 } from "@sanity/image-url"
 
@@ -7,6 +8,11 @@ import { sanityClient } from "./sanity"
 
 const builder = createImageUrlBuilder(sanityClient)
 
+// An image field as stored in Sanity: an asset reference plus the crop and
+// hotspot chosen in the Studio. Pass the whole object to urlFor, not the
+// asset URL, or the crop and hotspot are ignored
+export type SanityImage = SanityImageObject
+
 export function urlFor(source: SanityImageSource) {
   return builder.image(source)
 }
diff --git a/src/lib/sanity.ts b/src/lib/sanity.ts
index 06429be..499d5f9 100644
--- a/src/lib/sanity.ts
+++ b/src/lib/sanity.ts
@@ -17,19 +17,9 @@ export async function getBlogPost(slug: string) {
       title,
       author-> {
         name,
-        image {
-          asset-> {
-            _id,
-            url
-          }
-        }
-      },
-      mainImage {
-        asset-> {
-          _id,
-          url
-        }
+        image
       },
+      mainImage,
       excerpt,
       body
     }
@@ -119,12 +109,7 @@ export async function getBoardMembers() {
         no,
         en
       },
-      image {
-        asset->{
-          _id,
-          url
-        }
-      },
+      image,
       bio {
         no,
         en