diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index bb79c92..546a4bc 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -33,7 +33,6 @@ const { gradient, background, logo: showLogo } = Astro.props.frontmatter
             loading="eager"
             alt="Nordlys logo"
             src={logo}
-            data-zoomable="false"
             class="h-[48px] max-w-fit object-scale-down sm:h-24"
           />
         )
diff --git a/src/content/posts/color-schemes.mdx b/src/content/posts/color-schemes.mdx
index c07b410..eb30cd2 100644
--- a/src/content/posts/color-schemes.mdx
+++ b/src/content/posts/color-schemes.mdx
@@ -24,12 +24,12 @@ import monoLightProjects from 'src/assets/screenshots/mono-light-projects.png';
 
 <div class="flex flex-col gap-4">
   <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 border rounded w-[48%]" src={monoDarkLanding} alt="Nordlys landing page in dark mode with mono color scheme" />
-    <Image class="my-0 border rounded w-[48%]" src={monoLightLanding} alt="Nordlys landing page in light mode with mono color scheme" />
+    <Image class="my-0 w-[48%]" src={monoDarkLanding} alt="Nordlys landing page in dark mode with mono color scheme" data-img-embed />
+    <Image class="my-0 w-[48%]" src={monoLightLanding} alt="Nordlys landing page in light mode with mono color scheme" data-img-embed />
   </div>
   <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 border rounded w-[48%]" src={monoDarkProjects} alt="Nordlys projects page in dark mode with mono color scheme" />
-    <Image class="my-0 border rounded w-[48%]" src={monoLightProjects} alt="Nordlys projects page in light mode with mono color scheme" />
+    <Image class="my-0 w-[48%]" src={monoDarkProjects} alt="Nordlys projects page in dark mode with mono color scheme" />
+    <Image class="my-0 w-[48%]" src={monoLightProjects} alt="Nordlys projects page in light mode with mono color scheme" data-img-embed />
   </div>
 </div>
 
@@ -44,12 +44,12 @@ import nordLightProjects from 'src/assets/screenshots/nord-light-projects.png';
 
 <div class="flex flex-col gap-4">
   <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 border rounded w-[48%]" src={nordDarkLanding} alt="Nordlys landing page in dark mode with nord color scheme" />
-    <Image class="my-0 border rounded w-[48%]" src={nordLightLanding} alt="Nordlys landing page in light mode with nord color scheme" />
+    <Image class="my-0 w-[48%]" src={nordDarkLanding} alt="Nordlys landing page in dark mode with nord color scheme" data-img-embed />
+    <Image class="my-0 w-[48%]" src={nordLightLanding} alt="Nordlys landing page in light mode with nord color scheme" data-img-embed />
   </div>
   <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 border rounded w-[48%]" src={nordDarkProjects} alt="Nordlys projects page in dark mode with nord color scheme" />
-    <Image class="my-0 border rounded w-[48%]" src={nordLightProjects} alt="Nordlys projects page in light mode with nord color scheme" />
+    <Image class="my-0 w-[48%]" src={nordDarkProjects} alt="Nordlys projects page in dark mode with nord color scheme" data-img-embed />
+    <Image class="my-0 w-[48%]" src={nordLightProjects} alt="Nordlys projects page in light mode with nord color scheme" data-img-embed />
   </div>
 </div>
 
@@ -64,12 +64,12 @@ import auroraLightProjects from 'src/assets/screenshots/aurora-light-projects.pn
 
 <div class="flex flex-col gap-4">
   <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 border rounded w-[48%]" src={auroraDarkLanding} alt="Nordlys landing page in dark mode with aurora color scheme" />
-    <Image class="my-0 border rounded w-[48%]" src={auroraLightLanding} alt="Nordlys landing page in light mode with aurora color scheme" />
+    <Image class="my-0 w-[48%]" src={auroraDarkLanding} alt="Nordlys landing page in dark mode with aurora color scheme" data-img-embed />
+    <Image class="my-0 w-[48%]" src={auroraLightLanding} alt="Nordlys landing page in light mode with aurora color scheme" data-img-embed />
   </div>
   <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 border rounded w-[48%]" src={auroraDarkProjects} alt="Nordlys projects page in dark mode with aurora color scheme" />
-    <Image class="my-0 border rounded w-[48%]" src={auroraLightProjects} alt="Nordlys projects page in light mode with aurora color scheme" />
+    <Image class="my-0 w-[48%]" src={auroraDarkProjects} alt="Nordlys projects page in dark mode with aurora color scheme" data-img-embed />
+    <Image class="my-0 w-[48%]" src={auroraLightProjects} alt="Nordlys projects page in light mode with aurora color scheme" data-img-embed />
   </div>
 </div>
 
diff --git a/src/content/posts/configuring-nordlys.md b/src/content/posts/configuring-nordlys.md
index 6d495a1..cf68bf4 100644
--- a/src/content/posts/configuring-nordlys.md
+++ b/src/content/posts/configuring-nordlys.md
@@ -82,7 +82,6 @@ export default defineThemeConfig({
   projectsPerPage: 3,
   scrollProgress: false,
   scrollToTop: true,
-  zoomableImages: true,
   tagIcons: {
     tailwindcss: 'tabler--brand-tailwind',
     astro: 'tabler--brand-astro',
@@ -129,10 +128,6 @@ When `scrollProgress` is enabled (it’s automatically on for blog posts), a sti
 
 When `scrollToTop` is enabled (automatically on blog posts), an arrow button will appear in the bottom right corner of the screen after scrolling, allowing users to quickly return to the top of the page.
 
-### Zoomable Images
-
-When `zoomableImages` is enabled, images can be zoomed by clicking them, powered by [medium-zoom](https://github.com/francoischalifour/medium-zoom). To opt out of zooming for specific images, use `<img src="..." data-zoomable="false"/>`
-
 ### Tag Icons
 
 When defining tags for posts and projects, a default icon will be used. With `tagIcons` you can map specific tags to icons - for instance, map the tag `astro` to `tabler--brand-astro`.
diff --git a/src/content/posts/using-images.mdx b/src/content/posts/using-images.mdx
index 05935a9..27c6773 100644
--- a/src/content/posts/using-images.mdx
+++ b/src/content/posts/using-images.mdx
@@ -56,6 +56,25 @@ From the web:
 
 <Image alt="Nordlys favicon" src="/favicon.svg" loading="lazy" width={136} height={141}/>
 
+## data-img-embed
+
+For a nice embedding of images into the content, you can use the `data-img-embed` attribute. This will give the image a bordered, rounded appearance and users can zoom it on click.
+
+```markdown src/pages/my-page.md
+// embedded image
+<img src="/preview.png" data-img-embed/>
+<img src="/preview.png" data-img-embed="true"/>
+
+// normal apperance
+<img src="/preview.png"/>
+<img src="/preview.png" data-img-embed="false"/>
+
+```
+
+<div align="center">
+<Image alt="Nordlys preview" src="/preview.png" loading="lazy" height={252} width={480} data-img-embed/>
+</div>
+
 ## Open Graph Images
 
 Images and image URLs can be used in frontmatter, for instance as `openGraphImage`. To use a local asset, use:
@@ -79,11 +98,11 @@ openGraphImage: "https://nordlys.fjelloverflow.dev/favicon.svg"
 Note that supplying `openGraphImage` is entirely optional. If a post (any file in `src/content/posts`) does not have an `openGraphImage` provided, Nordlys will automatically generate and use a basic template, displaying the post `title`, `description`, `author`, and website `title`, which looks like this:
 
 <div align="center">
-<Image class="border rounded" alt="Example post OG" src="/posts/using-images.png" loading="lazy" height={252} width={480}/>
+<Image alt="Example post OG" src="/posts/using-images.png" loading="lazy" height={252} width={480} data-img-embed/>
 </div>
 
 Similarly, when there is no global `openGraphImage` configured in `theme.config.ts`, Nordlys generates and uses a generic image that displays the site `title` and `description` on every page where none has been defined, looking like this:
 
 <div align="center">
-<Image class="border rounded" alt="Example site OG" src="/ogImage.png" loading="lazy" height={252} width={480}/>
+<Image alt="Example site OG" src="/ogImage.png" loading="lazy" height={252} width={480} data-img-embed/>
 </div>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index acd6f61..958c263 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -113,6 +113,6 @@ const openGraphImageUrl = new URL(
   <body>
     <slot />
     <CopyCodeButtonsPlugin />
-    {config.zoomableImages && <MediumZoomPlugin />}
+    <MediumZoomPlugin />
   </body>
 </html>
diff --git a/src/plugins/MediumZoomPlugin.astro b/src/plugins/MediumZoomPlugin.astro
index 8e77b4c..96c1a2d 100644
--- a/src/plugins/MediumZoomPlugin.astro
+++ b/src/plugins/MediumZoomPlugin.astro
@@ -6,19 +6,9 @@
   import mediumZoom from 'medium-zoom/dist/pure'
 
   document.addEventListener('astro:page-load', () => {
-    mediumZoom('[data-zoomable]', {
+    mediumZoom('[data-img-embed]', {
       margin: 48,
       background: '#000000BF'
     })
   })
 </script>
-
-<script is:inline>
-  document.addEventListener('astro:page-load', () => {
-    document.querySelectorAll('main img').forEach((img) => {
-      if (!Object.hasOwn(img.dataset, 'zoomable')) img.dataset.zoomable = ''
-      else if (img.dataset.zoomable === 'false')
-        img.removeAttribute('data-zoomable')
-    })
-  })
-</script>
diff --git a/src/style/main.css b/src/style/main.css
index 0663d91..f7826ef 100644
--- a/src/style/main.css
+++ b/src/style/main.css
@@ -52,4 +52,9 @@
       }
     }
   }
+
+  img[data-img-embed=''],
+  img[data-img-embed='true'] {
+    @apply rounded border border-accent;
+  }
 }
diff --git a/src/theme.config.ts b/src/theme.config.ts
index 47f7fa5..955a8f2 100644
--- a/src/theme.config.ts
+++ b/src/theme.config.ts
@@ -43,7 +43,6 @@ export default defineThemeConfig({
   projectsPerPage: 3,
   scrollProgress: false,
   scrollToTop: true,
-  zoomableImages: true,
   tagIcons: {
     tailwindcss: 'tabler--brand-tailwind',
     astro: 'tabler--brand-astro',
diff --git a/src/types.ts b/src/types.ts
index 1828d7a..7eac499 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -51,7 +51,6 @@ export interface ThemeConfig {
   projectsPerPage: number
   scrollProgress: boolean
   scrollToTop: boolean
-  zoomableImages: boolean
   tagIcons: Record<string, Icon>
   shikiThemes: ShikiConfig['themes']
 }
@@ -66,7 +65,6 @@ const defaults = {
   projectsPerPage: 3,
   scrollProgress: false,
   scrollToTop: true,
-  zoomableImages: true,
   tagIcons: {},
   shikiThemes: {
     light: 'vitesse-light',