From 6691aaa02a34b9297ce7db1549bca4c896340189 Mon Sep 17 00:00:00 2001
From: Djeex <djeex@djeex.fr>
Date: Thu, 10 Sep 2026 13:53:28 +0200
Subject: [PATCH] Cap and convert markdown images to webp via a custom ProseImg

---
 app/components/content/ProseImg.vue | 36 +++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 app/components/content/ProseImg.vue

diff --git a/app/components/content/ProseImg.vue b/app/components/content/ProseImg.vue
new file mode 100644
index 0000000..89a5fef
--- /dev/null
+++ b/app/components/content/ProseImg.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Overrides Nuxt Content's default ProseImg (which renders every markdown
+// image as a plain <img>, or through NuxtImg only if it happens to detect
+// one registered): every raster image gets capped at 1280px wide (IPX
+// never upscales past its native size by default) and re-encoded to WebP,
+// which alone cuts most screenshots down substantially. SVGs are already
+// tiny vector files and would gain nothing from either step, so they're
+// left untouched.
+const props = defineProps<{
+  src?: string
+  alt?: string
+  width?: string | number
+  height?: string | number
+}>()
+
+const isSvg = computed(() => props.src?.toLowerCase().endsWith('.svg'))
+</script>
+
+<template>
+  <img
+    v-if="isSvg"
+    :src="src"
+    :alt="alt"
+    :width="width"
+    :height="height"
+  >
+  <NuxtImg
+    v-else
+    :src="src"
+    :alt="alt"
+    :width="width ?? 1280"
+    :height="height"
+    format="webp"
+    quality="100"
+  />
+</template>