diff --git a/docs/getting-started/authoring.mdx b/docs/getting-started/authoring.mdx
index e1d1cde6..3a5a7f3f 100644
--- a/docs/getting-started/authoring.mdx
+++ b/docs/getting-started/authoring.mdx
@@ -45,21 +45,20 @@ Relative images are supported. Eg, inside your [`MDX`](introduction#configuratio
 title: Authoring
 ---
 
-<img src="gutenberg.jpg" />
+![](gutenberg.jpg)
 ```
 
 <details>
   <summary>Result</summary>
 
-<img src="gutenberg.jpg" />
+![](gutenberg.jpg)
 
 </details>
 
-> [!IMPORTANT]
-> To avoid layout-shifts, always provides `[width]`/`[height]` img's attributes:
-> ```md
-> <img src='gutenberg.jpg' width="1100" height="685" />
-> ```
+> [!TIP]
+> You are encouraged to use relative images, since dimensions are automatically added as `img[width][height]` attributes.
+>
+> For others, think about adding them to **prevent layout shift**.
 
 > [!NOTE]
 > See [`MDX_BASEURL`](introduction#configuration:~:text=MDX_BASEURL) to understand how it is converted to a full URL.
diff --git a/docs/getting-started/introduction.mdx b/docs/getting-started/introduction.mdx
index 8ecda2b5..99ed05b9 100644
--- a/docs/getting-started/introduction.mdx
+++ b/docs/getting-started/introduction.mdx
@@ -4,7 +4,7 @@ description: Documentation generator for `pmndrs/*` projects.
 nav: 0
 ---
 
-<img src="gutenberg.jpg" width="1100" height="685" alt="Gutenberg lithography" />
+![Gutenberg lithography](gutenberg.jpg)
 
 ## INSTALL
 
@@ -70,9 +70,7 @@ becomes (for a `MDX_BASEURL=http://localhost:60141` value):
 
 We implement [m3 design system](https://m3.material.io/styles/color/system/overview), using [Tailwind Material Colors](https://tailwind-material-colors-docs.vercel.app).
 
-<a href="https://tailwind-material-colors-docs.vercel.app#palette">
-  <img src="color-scheme.png" width="1506" height="864" alt="" />
-</a>
+[![color scheme](color-scheme.png)](https://tailwind-material-colors-docs.vercel.app#palette)
 
 > [!NOTE]
 > - [Material Color](https://www.youtube.com/playlist?list=PLsoLz-E4Os4WWkrvRuQ7BJuVF-WfOyfWT) for more information
diff --git a/package-lock.json b/package-lock.json
index 9d7ff54b..bbd1dd94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@tailwindcss/typography": "^0.5.14",
         "clsx": "^2.1.1",
         "gray-matter": "^4.0.3",
+        "image-size": "^1.1.1",
         "match-sorter": "^6.3.4",
         "next": "^14.2.5",
         "next-mdx-remote": "^5.0.0",
@@ -5547,6 +5548,21 @@
         "node": ">= 4"
       }
     },
+    "node_modules/image-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.1.1.tgz",
+      "integrity": "sha512-541xKlUw6jr/6gGuk92F+mYM5zaFAc5ahphvkqvNe2bQ6gVBkd6bfrmVJ2t4KDAfikAYZyIqTnktX3i6/aQDrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "queue": "6.0.2"
+      },
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -5641,7 +5657,6 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/ini": {
@@ -12032,6 +12047,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
diff --git a/package.json b/package.json
index 9b019c91..a6145643 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@tailwindcss/typography": "^0.5.14",
     "clsx": "^2.1.1",
     "gray-matter": "^4.0.3",
+    "image-size": "^1.1.1",
     "match-sorter": "^6.3.4",
     "next": "^14.2.5",
     "next-mdx-remote": "^5.0.0",
diff --git a/src/components/mdx/Img/Img.tsx b/src/components/mdx/Img/Img.tsx
index c7ee20f3..a467f130 100644
--- a/src/components/mdx/Img/Img.tsx
+++ b/src/components/mdx/Img/Img.tsx
@@ -1,7 +1,21 @@
 import cn from '@/lib/cn'
 import { ComponentProps } from 'react'
 
-export function Img({ src, alt = '', className, ...props }: ComponentProps<'img'>) {
+import sizeOf from 'image-size'
+import { resolve } from 'path'
+
+export async function Img({ src, alt = '', className, ...props }: ComponentProps<'img'>) {
+  const dims: Partial<Pick<ComponentProps<'img'>, 'width' | 'height'>> = {
+    width: undefined,
+    height: undefined,
+  }
+  if (process.env.MDX_BASEURL && src?.startsWith(process.env.MDX_BASEURL)) {
+    const path = resolve(src.replace(process.env.MDX_BASEURL, process.env.MDX!))
+    const { width, height } = sizeOf(path)
+    dims.width = width
+    dims.height = height
+  }
+
   return (
     // eslint-disable-next-line @next/next/no-img-element
     <img
@@ -10,6 +24,7 @@ export function Img({ src, alt = '', className, ...props }: ComponentProps<'img'
       loading="lazy"
       alt={alt}
       className={cn('bg-surface-container inline-block rounded-lg', className)}
+      {...dims}
       {...props}
     />
   )