diff --git a/website/public/css/hcard.css b/website/public/css/hcard.css
index 4f1713d..414eed9 100644
--- a/website/public/css/hcard.css
+++ b/website/public/css/hcard.css
@@ -1,8 +1,34 @@
 .h-card {
-	img {
+	div:has(img) {
 		width: 6rem;
 		height: 6rem;
-		border-radius: 1rem;
+		margin-inline: auto;
+
+		img {
+			width: 6rem;
+			height: 6rem;
+			border-radius: 1rem;
+			filter: contrast(1.25);
+		}
+
+		&::after {
+			/* Colour overlay */
+			background-color: var(--colour-primary-80);
+			opacity: 0.3;
+
+			/* Same size and shape as the img */
+			border-radius: 1rem;
+			width: 6rem;
+			height: 6rem;
+
+			/* Positioned on top of the img */
+			display: block;
+			position: relative;
+			top: -6rem;
+
+			/* A content value is needed to get the ::after to render */
+			content: '';
+		}
 	}
 }
 
@@ -16,7 +42,7 @@
 			"empty heading"
 			"photo text";
 
-		img {
+		div:has(img) {
 			grid-area: photo;
 			margin-block-start: var(--spacing-block-sm);
 		}
diff --git a/website/public/images/headshot.jpg b/website/public/images/headshot.jpg
deleted file mode 100644
index 2ca13cf..0000000
Binary files a/website/public/images/headshot.jpg and /dev/null differ
diff --git a/website/public/images/headshot.webp b/website/public/images/headshot.webp
new file mode 100644
index 0000000..0c2a15b
Binary files /dev/null and b/website/public/images/headshot.webp differ
diff --git a/website/src/components/Me.astro b/website/src/components/Me.astro
index 1a2140b..a77efc0 100644
--- a/website/src/components/Me.astro
+++ b/website/src/components/Me.astro
@@ -2,7 +2,9 @@
 ---
 
 <section class="h-card">
-    <img class="u-photo" src="/images/headshot.jpg" height="256" width="256" />
+    <div>
+        <img class="u-photo" src="/images/headshot.webp" height="96" width="96" />
+    </div>
 
     <header>
         <h1>