diff --git a/.github/styles/vocab.txt b/.github/styles/vocab.txt
index a0841fe7d0..7f889392ac 100644
--- a/.github/styles/vocab.txt
+++ b/.github/styles/vocab.txt
@@ -230,3 +230,4 @@ yaml
 Zalando
 Zhou
 Zolotusky
+zoomable
diff --git a/docs/features/techdocs/architecture.md b/docs/features/techdocs/architecture.md
index 01497b31bc..f502b3836e 100644
--- a/docs/features/techdocs/architecture.md
+++ b/docs/features/techdocs/architecture.md
@@ -9,7 +9,7 @@ description: Documentation on TechDocs Architecture
 When you deploy Backstage (with TechDocs enabled by default), you get a basic
 out-of-the box experience.
 
-![TechDocs Architecture diagram](../../assets/techdocs/architecture-basic.drawio.svg)
+<img data-zoomable src="../../assets/techdocs/architecture-basic.drawio.svg" alt="TechDocs Architecture diagram" />
 
 > Note: See below for our recommended deployment architecture which takes care
 > of stability, scalability and speed.
@@ -43,7 +43,7 @@ channel to talk about it.
 
 This is how we recommend deploying TechDocs in production environment.
 
-![TechDocs Architecture diagram](../../assets/techdocs/architecture-recommended.drawio.svg)
+<img data-zoomable src="../../assets/techdocs/architecture-recommended.drawio.svg" alt="TechDocs Architecture diagram" />
 
 The key difference in the recommended deployment approach is where the docs are
 built.
diff --git a/microsite/README.md b/microsite/README.md
index d244caa22a..9589def3e3 100644
--- a/microsite/README.md
+++ b/microsite/README.md
@@ -204,3 +204,8 @@ For more information about custom pages, click [here](https://docusaurus.io/docs
 # Full Documentation
 
 Full documentation can be found on the [website](https://docusaurus.io/).
+
+## Additional notes
+
+- If you want to make images zoomable on click, add the `data-zoomable` attribute to your `img` element.
+  - In a docs or blog `.md` file, convert `![This is image](/microsite/static/img/code.png)` syntax to `<img data-zoomable src="/microsite/static/img/code.png" alt="This is image" />`
diff --git a/microsite/siteConfig.js b/microsite/siteConfig.js
index 6e8f8edddf..517cac2496 100644
--- a/microsite/siteConfig.js
+++ b/microsite/siteConfig.js
@@ -86,7 +86,11 @@ const siteConfig = {
   },
 
   // Add custom scripts here that would be placed in <script> tags.
-  scripts: ['https://buttons.github.io/buttons.js'],
+  scripts: [
+    'https://buttons.github.io/buttons.js',
+    'https://unpkg.com/medium-zoom@1.0.6/dist/medium-zoom.min.js',
+    '/js/medium-zoom.js',
+  ],
 
   // On page navigation for the current documentation page.
   onPageNav: 'separate',
diff --git a/microsite/static/css/custom.css b/microsite/static/css/custom.css
index 22855a2b4d..c07285ed8c 100644
--- a/microsite/static/css/custom.css
+++ b/microsite/static/css/custom.css
@@ -1094,3 +1094,8 @@ code {
     margin: 0 1.5em;
   }
 }
+
+/* Zoomed images using the medium-zoom library should be on top of screen. */
+.medium-zoom-image {
+  z-index: 10000;
+}
diff --git a/microsite/static/js/medium-zoom.js b/microsite/static/js/medium-zoom.js
new file mode 100644
index 0000000000..497db9af2a
--- /dev/null
+++ b/microsite/static/js/medium-zoom.js
@@ -0,0 +1,11 @@
+// Ref: https://github.com/francoischalifour/medium-zoom#options
+window.addEventListener(
+  'load',
+  () => {
+    mediumZoom('[data-zoomable]', {
+      margin: 20,
+      background: '#000',
+    });
+  },
+  false,
+);