diff --git a/package.json b/package.json
index 33186bd1c5..c4d94250b6 100644
--- a/package.json
+++ b/package.json
@@ -96,7 +96,7 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "glob": "^7.1.6",
     "husky": "^7.0.4",
-    "image-size": "^1.0.0",
+    "image-size": "^1.0.1",
     "jest": "^26.6.3",
     "lerna": "^4.0.0",
     "lerna-changelog": "^1.0.1",
diff --git a/packages/docusaurus-mdx-loader/package.json b/packages/docusaurus-mdx-loader/package.json
index 77eed27755..d38d281f6a 100644
--- a/packages/docusaurus-mdx-loader/package.json
+++ b/packages/docusaurus-mdx-loader/package.json
@@ -28,6 +28,7 @@
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
     "gray-matter": "^4.0.3",
+    "image-size": "^1.0.1",
     "mdast-util-to-string": "^2.0.0",
     "remark-emoji": "^2.1.0",
     "stringify-object": "^3.3.0",
diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts b/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts
index 526a026920..efffbeb76f 100644
--- a/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts
+++ b/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts
@@ -17,8 +17,11 @@ import path from 'path';
 import url from 'url';
 import fs from 'fs-extra';
 import escapeHtml from 'escape-html';
+import sizeOf from 'image-size';
+import {promisify} from 'util';
 import type {Plugin, Transformer} from 'unified';
 import type {Image, Literal} from 'mdast';
+import logger from '@docusaurus/logger';
 
 const {
   loaders: {inlineMarkdownImageFileLoader},
@@ -30,7 +33,11 @@ interface PluginOptions {
   siteDir: string;
 }
 
-function toImageRequireNode(node: Image, imagePath: string, filePath: string) {
+async function toImageRequireNode(
+  node: Image,
+  imagePath: string,
+  filePath: string,
+) {
   const jsxNode = node as Literal & Partial<Image>;
   let relativeImagePath = posixPath(
     path.relative(path.dirname(filePath), imagePath),
@@ -46,13 +53,27 @@ function toImageRequireNode(node: Image, imagePath: string, filePath: string) {
     escapePath(relativeImagePath) + search
   }").default${hash ? ` + '${hash}'` : ''}`;
   const title = node.title ? ` title="${escapeHtml(node.title)}"` : '';
+  let width = '';
+  let height = '';
+  try {
+    const size = (await promisify(sizeOf)(imagePath))!;
+    if (size.width) {
+      width = ` width="${size.width}"`;
+    }
+    if (size.height) {
+      height = ` height="${size.height}"`;
+    }
+  } catch (e) {
+    logger.error`The image at path=${imagePath} can't be read correctly. Please ensure it's a valid image.
+${(e as Error).message}`;
+  }
 
   Object.keys(jsxNode).forEach(
     (key) => delete jsxNode[key as keyof typeof jsxNode],
   );
 
   (jsxNode as Literal).type = 'jsx';
-  jsxNode.value = `<img ${alt}src={${src}}${title} />`;
+  jsxNode.value = `<img ${alt}src={${src}}${title}${width}${height} />`;
 }
 
 async function ensureImageFileExist(imagePath: string, sourceFilePath: string) {
@@ -124,7 +145,7 @@ async function processImageNode(node: Image, options: PluginOptions) {
   }
 
   const imagePath = await getImageAbsolutePath(parsedUrl.pathname, options);
-  toImageRequireNode(node, imagePath, options.filePath);
+  await toImageRequireNode(node, imagePath, options.filePath);
 }
 
 const plugin: Plugin<[PluginOptions]> = (options) => {
diff --git a/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/__snapshots__/index.test.ts.snap b/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/__snapshots__/index.test.ts.snap
index 034abe2526..fcf9a94faf 100644
--- a/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/__snapshots__/index.test.ts.snap
@@ -44,7 +44,7 @@ exports[`transformAsset plugin transform md links to <a /> 1`] = `
 
 <a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default}>Just staticAsset.pdf</a>, and <a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default}><strong>awesome</strong> staticAsset 2.pdf &#39;It is really &quot;AWESOME&quot;&#39;</a>, but also <a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default}>coded <code>staticAsset 3.pdf</code></a>
 
-<a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAssetImage.png').default}><img alt={\\"Clickable Docusaurus logo\\"} src={require(\\"![CWD]/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=[CWD]/node_modules/file-loader/dist/cjs.js!./static/staticAssetImage.png\\").default} /></a>
+<a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAssetImage.png').default}><img alt={\\"Clickable Docusaurus logo\\"} src={require(\\"![CWD]/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=[CWD]/node_modules/file-loader/dist/cjs.js!./static/staticAssetImage.png\\").default} width=\\"200\\" height=\\"200\\" /></a>
 
 <a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./asset.pdf').default}><span style={{color: \\"red\\"}}>Stylized link to asset file</span></a>
 "
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/styles.css b/packages/docusaurus-theme-classic/src/theme/MDXComponents/styles.css
index a5b6023c01..3c263a2334 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXComponents/styles.css
+++ b/packages/docusaurus-theme-classic/src/theme/MDXComponents/styles.css
@@ -9,3 +9,7 @@ ul.contains-task-list {
   padding-left: 0;
   list-style: none;
 }
+
+img {
+  height: auto;
+}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 20933f4de9..9198eca45a 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -181,6 +181,3 @@ html[data-theme='dark'] img[src$='#gh-light-mode-only'] {
 .test-marker-site-custom-css-unique-rule {
   content: 'site-custom-css-unique-rule';
 }
-.test-marker-site-custom-css-shared-rule {
-  max-width: 100%;
-}
diff --git a/website/testCSSOrder.mjs b/website/testCSSOrder.mjs
index 3e54d6929f..49df2a327d 100644
--- a/website/testCSSOrder.mjs
+++ b/website/testCSSOrder.mjs
@@ -35,7 +35,6 @@ const EXPECTED_CSS_MARKERS = [
   '.DocSearch-Hit-content-wrapper',
   '.navbar__title',
   '--ifm-color-scheme:light',
-  '.test-marker-site-custom-css-shared-rule',
   '.col[class*=col--]',
   '.padding-vert--xl',
   '.footer__link-item',
diff --git a/yarn.lock b/yarn.lock
index 5aae9960d8..49eea30ca2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10194,7 +10194,7 @@ image-q@^1.1.1:
   resolved "https://registry.yarnpkg.com/image-q/-/image-q-1.1.1.tgz#fc84099664460b90ca862d9300b6bfbbbfbf8056"
   integrity sha1-/IQJlmRGC5DKhi2TALa/u7+/gFY=
 
-image-size@^1.0.0:
+image-size@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-1.0.1.tgz#86d6cfc2b1d19eab5d2b368d4b9194d9e48541c5"
   integrity sha512-VAwkvNSNGClRw9mDHhc5Efax8PLlsOGcUTh0T/LIriC8vPA3U5PdqXWqkz406MoYHMKW8Uf9gWr05T/rYB44kQ==