diff --git a/src/components/cite.tsx b/src/components/cite.tsx
index ca80ce05..a38fd357 100644
--- a/src/components/cite.tsx
+++ b/src/components/cite.tsx
@@ -1,9 +1,11 @@
+import type { HTMLAttributes } from "react";
+
 const Cite = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
-} & React.HTMLAttributes<HTMLElement>) => (
+} & HTMLAttributes<HTMLElement>) => (
   <cite className="root" {...props}>
     {children}
     <style jsx>{`
diff --git a/src/components/code.tsx b/src/components/code.tsx
index 9d353625..57bac8d7 100644
--- a/src/components/code.tsx
+++ b/src/components/code.tsx
@@ -1,9 +1,11 @@
+import type { HTMLAttributes } from "react";
+
 const Code = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
-} & React.HTMLAttributes<HTMLElement>) => (
+} & HTMLAttributes<HTMLElement>) => (
   <code className="root" {...props}>
     {children}
     <style jsx>{`
diff --git a/src/components/em.tsx b/src/components/em.tsx
index a27cbdd6..35587af0 100644
--- a/src/components/em.tsx
+++ b/src/components/em.tsx
@@ -1,9 +1,11 @@
+import type { HTMLAttributes } from "react";
+
 const Emphasis = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
-} & React.HTMLAttributes<HTMLElement>) => (
+} & HTMLAttributes<HTMLElement>) => (
   <em className="root" {...props}>
     {children}
     <style jsx>{`
diff --git a/src/components/gallery.tsx b/src/components/gallery.tsx
index 51283beb..91cce149 100644
--- a/src/components/gallery.tsx
+++ b/src/components/gallery.tsx
@@ -46,6 +46,7 @@ const Gallery = ({ imagesNodes }: { imagesNodes: MarkdownImageNode[] }) => {
           clear: both;
           background: var(--secondary);
           padding: calc(var(--vRythm) / 2) calc(var(--gutter) / 2);
+          margin:  0 0 var(--vRythm) 0;
         }
         p {
           text-align: center;
diff --git a/src/components/h1.tsx b/src/components/h1.tsx
index 218522ce..9cecfcf2 100644
--- a/src/components/h1.tsx
+++ b/src/components/h1.tsx
@@ -1,8 +1,10 @@
+import type { HTMLAttributes } from "react";
+
 const Heading1 = ({
   children,
   className,
   ...props
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
+}: { children: React.ReactNode } & HTMLAttributes<HTMLElement>) => (
   <h1 className={`root${className ? ' ' + className : ""}`} {...props}>
     {children}
     <style jsx>{`
diff --git a/src/components/h2.tsx b/src/components/h2.tsx
index 7ab0d18f..47fb0cec 100644
--- a/src/components/h2.tsx
+++ b/src/components/h2.tsx
@@ -1,8 +1,10 @@
+import type { HTMLAttributes } from "react";
+
 const Heading2 = ({
   children,
   className,
   ...props
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
+}: { children: React.ReactNode } & HTMLAttributes<HTMLElement>) => (
   <h2 className={`root${className ? " " + className : ""}`} {...props}>
     {children}
     <style jsx>{`
diff --git a/src/components/h3.tsx b/src/components/h3.tsx
index 60f0cb7a..7ba0b778 100644
--- a/src/components/h3.tsx
+++ b/src/components/h3.tsx
@@ -1,7 +1,9 @@
+import type { HTMLAttributes } from "react";
+
 const Heading3 = ({
   children,
   ...props
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
+}: { children: React.ReactNode } & HTMLAttributes<HTMLElement>) => (
   <h3 className="root" {...props}>
     {children}
     <style jsx>{`
diff --git a/src/components/h4.tsx b/src/components/h4.tsx
index 6fb835f9..416ba7ca 100644
--- a/src/components/h4.tsx
+++ b/src/components/h4.tsx
@@ -1,7 +1,9 @@
+import type { HTMLAttributes } from "react";
+
 const Heading4 = ({
   children,
   ...props
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
+}: { children: React.ReactNode } & HTMLAttributes<HTMLElement>) => (
   <h4 className="root" {...props}>
     {children}
     <style jsx>{`
diff --git a/src/components/h5.tsx b/src/components/h5.tsx
index 8b5cca39..520820bf 100644
--- a/src/components/h5.tsx
+++ b/src/components/h5.tsx
@@ -1,7 +1,9 @@
+import type { HTMLAttributes } from "react";
+
 const Heading5 = ({
   children,
   ...props
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
+}: { children: React.ReactNode } & HTMLAttributes<HTMLElement>) => (
   <h5 className="root" {...props}>
     {children}
     <style jsx>{`
diff --git a/src/components/h6.tsx b/src/components/h6.tsx
index bcfcb337..24ce4a05 100644
--- a/src/components/h6.tsx
+++ b/src/components/h6.tsx
@@ -1,7 +1,9 @@
+import type { HTMLAttributes } from "react";
+
 const Heading6 = ({
   children,
   ...props
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
+}: { children: React.ReactNode } & HTMLAttributes<HTMLElement>) => (
   <h6 className="root" {...props}>
     {children}
     <style jsx>{`
diff --git a/src/components/hr.tsx b/src/components/hr.tsx
index 26c45cf6..27c36e4c 100644
--- a/src/components/hr.tsx
+++ b/src/components/hr.tsx
@@ -1,4 +1,4 @@
-import { HTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
 
 const HorizontalRule = (props: HTMLAttributes<HTMLHRElement>) => (
   <>
diff --git a/src/components/img.tsx b/src/components/img.tsx
new file mode 100644
index 00000000..6ec54f87
--- /dev/null
+++ b/src/components/img.tsx
@@ -0,0 +1,51 @@
+import {
+  CSS_BREAKPOINT_START_M,
+  CSS_BREAKPOINT_START_L,
+} from "../utils/constants";
+import type { HTMLAttributes } from "react";
+
+const Img = ({
+  float,
+  ...props
+}: {
+  float?: "left" | "right";
+} & HTMLAttributes<HTMLImageElement>) => {
+  return (
+    <>
+      <img
+        className={`${float ? float + " " : ""}${props.className || ""}`}
+        {...props}
+      />
+      <style jsx>{`
+        img {
+          clear: both;
+          display: block;
+          width: 100%;
+          max-width: 100%;
+        }
+        @media screen and (min-width: ${CSS_BREAKPOINT_START_M}) {
+          img.left,
+          img.right {
+            width: var(--block);
+          }
+          img.left {
+            float: left;
+            margin-right: var(--gutter);
+          }
+          img.right {
+            float: right;
+            margin-left: var(--gutter);
+          }
+        }
+        @media screen and (min-width: ${CSS_BREAKPOINT_START_L}) {
+          img.left,
+          img.right {
+            width: calc(calc(var(--column) * 4) + calc(var(--gutter) * 3));
+          }
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default Img;
diff --git a/src/components/p.tsx b/src/components/p.tsx
index d2f2c7e8..320fa63a 100644
--- a/src/components/p.tsx
+++ b/src/components/p.tsx
@@ -1,9 +1,11 @@
+import type { HTMLAttributes } from "react";
+
 const Paragraph = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
-} & React.HTMLAttributes<HTMLParagraphElement>) => (
+} & HTMLAttributes<HTMLParagraphElement>) => (
   <p className="root" {...props}>
     {children}
     <style jsx>{`
diff --git a/src/components/strong.tsx b/src/components/strong.tsx
index b21e26e3..925e3688 100644
--- a/src/components/strong.tsx
+++ b/src/components/strong.tsx
@@ -1,9 +1,11 @@
+import type { HTMLAttributes } from "react";
+
 const Strong = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
-} & React.HTMLAttributes<HTMLElement>) => (
+} & HTMLAttributes<HTMLElement>) => (
   <strong className="root" {...props}>
     {children}
     <style jsx>{`
diff --git a/src/components/ul.tsx b/src/components/ul.tsx
index 315897d2..d3946711 100644
--- a/src/components/ul.tsx
+++ b/src/components/ul.tsx
@@ -1,7 +1,9 @@
+import type { HTMLAttributes } from "react";
+
 const UnorderedList = ({
   children,
   ...props
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLUListElement>) => (
+}: { children: React.ReactNode } & HTMLAttributes<HTMLUListElement>) => (
   <ul className="root" {...props}>
     {children}
     <style jsx>{`
diff --git a/src/utils/markdown.tsx b/src/utils/markdown.tsx
index f5aa03f1..2168b491 100644
--- a/src/utils/markdown.tsx
+++ b/src/utils/markdown.tsx
@@ -18,12 +18,12 @@ import Strong from "../components/strong";
 import Emphasis from "../components/em";
 import Code from "../components/code";
 import Cite from "../components/cite";
+import Img from "../components/img";
 import Gallery from "../components/gallery";
 import { fixText } from "./text";
 import YError from "yerror";
 import { publicRuntimeConfig } from "./config";
 import { toASCIIString } from "./ascii";
-import { CSS_BREAKPOINT_START_L, CSS_BREAKPOINT_START_M } from "./constants";
 import { parseYouTubeURL } from "./youtube";
 import type { ReactNode } from "react";
 
@@ -125,29 +125,50 @@ const rootMap: NodeToElementMapper<MarkdownRootNode> = (
 const paragraphMap: NodeToElementMapper<MarkdownParagraphNode> = (
   context: MappingContext,
   node
-) => (
-  <Paragraph key={context.index}>
-    {node.children.length > 1 &&
-    node.children.every(
-      (childNode) =>
-        childNode.type === "image" ||
-        (childNode.type === "text" &&
-          childNode.value.replace(/[\r\n\s]+/, "") === "")
-    ) ? (
-      <Gallery
-        imagesNodes={
-          node.children.filter(
-            (childNode) => childNode.type === "image"
-          ) as MarkdownImageNode[]
-        }
-      />
-    ) : (
-      node.children.map((node, index) =>
+) => {
+  const { onlyImages, images } = node.children.reduce(
+    (summary, childNode) => {
+      if (childNode.type === "image") {
+        return {
+          ...summary,
+          images: [...summary.images, childNode],
+        };
+      }
+      if (
+        childNode.type === "text" &&
+        childNode.value.replace(/[\r\n\s]+/, "") === ""
+      ) {
+        return summary;
+      }
+      return {
+        ...summary,
+        onlyImages: false,
+      };
+    },
+    {
+      images: [] as MarkdownImageNode[],
+      onlyImages: node.children.length > 0,
+    }
+  );
+
+  if (onlyImages === true) {
+    if (images.length > 1) {
+      return <Gallery key={context.index} imagesNodes={images} />;
+    }
+    return (
+      <div key={context.index}>
+        {imageMap({ ...context, index: 0 }, images[0])}
+      </div>
+    );
+  }
+  return (
+    <Paragraph key={context.index}>
+      {node.children.map((node, index) =>
         renderMarkdown({ ...context, index }, node)
-      )
-    )}
-  </Paragraph>
-);
+      )}
+    </Paragraph>
+  );
+};
 const headingMap: NodeToElementMapper<MarkdownHeadingNode> = (
   context: MappingContext,
   node
@@ -265,60 +286,8 @@ const blockquoteMap: NodeToElementMapper<MarkdownBlockquoteNode> = (
   </Blockquote>
 );
 const imageMap: NodeToElementMapper<MarkdownImageNode> = (context, node) => {
-  const finalTitle = (node.title || "").replace(/^🖼(➡️|⬅️)\s*/u, "");
-
   return (
-    <span key={context.index}>
-      <img
-        src={
-          node.url.startsWith("http")
-            ? node.url
-            : publicRuntimeConfig.baseURL +
-              publicRuntimeConfig.buildPrefix +
-              "/" +
-              node.url
-        }
-        alt={node.alt}
-        className={
-          node?.title?.startsWith("🖼➡️")
-            ? "right"
-            : node?.title?.startsWith("🖼⬅️")
-            ? "left"
-            : ""
-        }
-        {...(finalTitle ? { title: finalTitle } : {})}
-      />
-      <style jsx>{`
-        img {
-          clear: both;
-          display: block;
-          width: 100%;
-          max-width: 100%;
-        }
-
-        @media screen and (min-width: ${CSS_BREAKPOINT_START_M}) {
-          img.left,
-          img.right {
-            width: var(--block);
-          }
-          img.left {
-            float: left;
-            margin-right: var(--gutter);
-          }
-          img.right {
-            float: right;
-            margin-left: var(--gutter);
-          }
-        }
-
-        @media screen and (min-width: ${CSS_BREAKPOINT_START_L}) {
-          img.left,
-          img.right {
-            width: calc(calc(var(--column) * 4) + calc(var(--gutter) * 3));
-          }
-        }
-      `}</style>
-    </span>
+    <Img key={context.index} {...{ ...parseImageProps(node), alt: node.alt }} />
   );
 };
 
@@ -334,7 +303,7 @@ const hyperlinkMap: NodeToElementMapper<MarkdownLinkNode> = (context, node) => {
         "/" +
         node.url
       }
-      title={node.title.replace(/^🎧\s*/u, '').trim()}
+      title={node.title.replace(/^🎧\s*/u, "").trim()}
     />
   ) : youtubeURL && node?.title?.startsWith("📺") ? (
     <span className="root" key={context.index}>
@@ -344,7 +313,7 @@ const hyperlinkMap: NodeToElementMapper<MarkdownLinkNode> = (context, node) => {
         src={`https://www.youtube.com/embed/${youtubeURL.videoId}${
           youtubeURL.startTime ? "?start=" + youtubeURL.startTime : ""
         }`}
-        title={node.title.replace(/^📺\s*/u, '').trim()}
+        title={node.title.replace(/^📺\s*/u, "").trim()}
         frameBorder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
         allowFullScreen
@@ -511,3 +480,28 @@ function eventuallyConvertHTMLNodes(rootNode: MarkdownRootNode): MarkdownNode {
 
   return rootNode;
 }
+
+function parseImageProps(node: MarkdownImageNode): {
+  title: string;
+  float?: "left" | "right";
+  src: string;
+} {
+  const title = (node.title || "").replace(/^🖼(➡️|⬅️)\s*/u, "");
+  const float = node.title?.includes("➡️")
+    ? "right"
+    : node.title?.includes("⬅️")
+    ? "left"
+    : undefined;
+  const src = node.url.startsWith("http")
+    ? node.url
+    : publicRuntimeConfig.baseURL +
+      publicRuntimeConfig.buildPrefix +
+      "/" +
+      node.url.replace(/^(\.\/)?(\.\.\/)*public\//, "");
+
+  return {
+    title,
+    float,
+    src,
+  };
+}