diff --git a/__tests__/compilers/compatability.test.tsx b/__tests__/compilers/compatability.test.tsx
index 7ce595f3b..a7b3fc899 100644
--- a/__tests__/compilers/compatability.test.tsx
+++ b/__tests__/compilers/compatability.test.tsx
@@ -75,7 +75,7 @@ describe('compatability with RDMD', () => {
     };
 
     expect(mdx(ast).trim()).toMatchInlineSnapshot(`
-      "<Image align="center" width="300px" src="https://drastik.ch/wp-content/uploads/2023/06/blackcat.gif" alt="" title="">
+      "<Image align="center" width="300px" src="https://drastik.ch/wp-content/uploads/2023/06/blackcat.gif">
         hello **cat**
       </Image>"
     `);
@@ -205,7 +205,7 @@ This is an image: <img src="http://example.com/#\\>" >
   });
 
   describe('<HTMLBlock> wrapping', () => {
-  // configure({ defaultIgnore: undefined });
+    // configure({ defaultIgnore: undefined });
 
     const rawStyle = `<style data-testid="style-tag">
     p {
@@ -267,4 +267,28 @@ This is an image: <img src="http://example.com/#\\>" >
       expect(spy).toHaveBeenCalledTimes(0);
     });
   });
+
+  it('can parse and transform magic image block AST to MDX', () => {
+    const md = `
+[block:image]
+{
+  "images": [
+    {
+      "image": [
+        "https://files.readme.io/4a1c7a0-Iphone.jpeg",
+        null,
+        ""
+      ],
+      "align": "center",
+      "sizing": "250px"
+    }
+  ]
+}
+[/block]
+`;
+
+    const rmdx = mdx(rdmd.mdast(md));
+
+    expect(rmdx).toMatch('<Image align="center" width="250px" src="https://files.readme.io/4a1c7a0-Iphone.jpeg" />');
+  });
 });
diff --git a/__tests__/compilers/images.test.ts b/__tests__/compilers/images.test.ts
index 99aac1620..3cf7d8172 100644
--- a/__tests__/compilers/images.test.ts
+++ b/__tests__/compilers/images.test.ts
@@ -19,10 +19,20 @@ describe('image compiler', () => {
     expect(mdx(mdast(doc))).toMatch(doc);
   });
 
+  it('ignores empty (undefined, null, or "") attributes', () => {
+    const doc = '<Image src="/path/to/image.png" border={true} alt="" title={null} align={undefined} />';
+
+    expect(mdx(mdast(doc))).toMatch('<Image border={true} src="/path/to/image.png" />');
+  });
+
   it('correctly serializes an Image component with expression attributes back to MDX', () => {
     const doc = '<Image src="/path/to/image.png" border={false} />';
 
-    expect(mdx(mdast(doc))).toMatch(doc);
+    expect(mdx(mdast(doc))).toMatch('![](/path/to/image.png)');
+
+    const doc2 = '<Image src="/path/to/image.png" border={true} />';
+
+    expect(mdx(mdast(doc2))).toMatch('<Image border={true} src="/path/to/image.png" />');
   });
 
   it('correctly serializes an Image component with an undefined expression attributes back to MDX', () => {
diff --git a/__tests__/fixtures/image-block-no-attrs.mdx b/__tests__/fixtures/image-block-no-attrs.mdx
index e15041eac..6e74126bb 100644
--- a/__tests__/fixtures/image-block-no-attrs.mdx
+++ b/__tests__/fixtures/image-block-no-attrs.mdx
@@ -1,6 +1,6 @@
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus magni delectus dolorum velit sit laboriosam a quos? Animi ut quam impedit inventore ratione. Delectus quaerat similique natus optio, magnam quam deleniti, iste fugiat ipsam sapiente modi hic cupiditate sint. Quod dolor, inventore facere laudantium facilis molestias reprehenderit. Consectetur, inventore doloremque.
 
-<Image align="left" className="" width="50% " src="https://files.readme.io/327e65d-image.png" />
+<Image align="left" width="50% " src="https://files.readme.io/327e65d-image.png" />
 
 # Hello world
 
diff --git a/__tests__/helpers.ts b/__tests__/helpers.ts
index 02a330e50..e47788abe 100644
--- a/__tests__/helpers.ts
+++ b/__tests__/helpers.ts
@@ -16,6 +16,7 @@ export const silenceConsole =
   };
 
 export const execute = async (doc: string, compileOpts = {}, runOpts = {}) => {
-  const module = await run(compile(doc, compileOpts), runOpts);
+  const code = compile(doc, compileOpts);
+  const module = await run(code, runOpts);
   return module.default;
 };
diff --git a/__tests__/index.test.js b/__tests__/index.test.js
index 5a5efd653..695401174 100644
--- a/__tests__/index.test.js
+++ b/__tests__/index.test.js
@@ -39,6 +39,7 @@ test('image', async () => {
   const md = '![Image](http://example.com/image.png)';
   const component = await execute(md);
   const { container } = render(React.createElement(component));
+
   expect(container.innerHTML).toMatchSnapshot();
 });
 
diff --git a/__tests__/lib/mdast/null-attributes/in.mdx b/__tests__/lib/mdast/null-attributes/in.mdx
new file mode 100644
index 000000000..fb73dc7f3
--- /dev/null
+++ b/__tests__/lib/mdast/null-attributes/in.mdx
@@ -0,0 +1 @@
+<Image src="..." border />
diff --git a/__tests__/lib/mdast/null-attributes/out.json b/__tests__/lib/mdast/null-attributes/out.json
new file mode 100644
index 000000000..bc956b161
--- /dev/null
+++ b/__tests__/lib/mdast/null-attributes/out.json
@@ -0,0 +1,23 @@
+{
+  "type": "root",
+  "children": [
+    {
+      "type": "image-block",
+      "src": "...",
+      "border": true,
+      "alt": "",
+      "children": [],
+      "title": null,
+      "data": {
+        "hName": "img",
+        "hProperties": {
+          "alt": "",
+          "border": true,
+          "children": [],
+          "src": "...",
+          "title": null
+        }
+      }
+    }
+  ]
+}
diff --git a/__tests__/transformers/images.test.ts b/__tests__/transformers/images.test.ts
index 72d7bca04..f3cdc66cd 100644
--- a/__tests__/transformers/images.test.ts
+++ b/__tests__/transformers/images.test.ts
@@ -10,7 +10,7 @@ describe('images transformer', () => {
     const tree = mdast(md);
 
     expect(tree.children[0].type).toBe('image-block');
-    expect(tree.children[0].data.hProperties.src).toBe('https://example.com/image.jpg');
+    expect(tree.children[0].src).toBe('https://example.com/image.jpg');
   });
 
   it('can parse the caption markdown to children', () => {
@@ -23,29 +23,21 @@ describe('images transformer', () => {
     expect(tree.children[0].children[0].children[2].type).toBe('emphasis');
   });
 
-  it('can parse and transform magic image block AST to MDX', () => {
-    const rdmd = `
-[block:image]
-{
-  "images": [
-    {
-      "image": [
-        "https://files.readme.io/4a1c7a0-Iphone.jpeg",
-        null,
-        ""
-      ],
-      "align": "center",
-      "sizing": "250px"
-    }
-  ]
-}
-[/block]
+  it('can parse attributes', () => {
+    const md = `
+<Image
+  align="left"
+  alt="Some helpful text"
+  src="https://example.com/image.jpg"
+  title="Testing"
+  width="100px"
+/>
 `;
+    const tree = mdast(md);
 
-    const rmdx = mdx(mdastLegacy(rdmd));
-
-    expect(rmdx).toMatch(
-      '<Image align="center" className="" width="250px" src="https://files.readme.io/4a1c7a0-Iphone.jpeg" />',
-    );
+    expect(tree.children[0].align).toBe('left');
+    expect(tree.children[0].alt).toBe('Some helpful text');
+    expect(tree.children[0].title).toBe('Testing');
+    expect(tree.children[0].width).toBe('100px');
   });
 });
diff --git a/processor/transform/images.ts b/processor/transform/images.ts
index ddee4f143..8302e24b7 100644
--- a/processor/transform/images.ts
+++ b/processor/transform/images.ts
@@ -14,22 +14,26 @@ const imageTransformer = () => (tree: Node) => {
 
     const [{ alt, url, title }] = node.children as any;
 
-    const newNode = {
-      type: NodeTypes.imageBlock,
+    const attrs = {
       alt,
       title,
-      url,
       children: [],
+      src: url,
+    };
+
+    const newNode: ImageBlock = {
+      type: NodeTypes.imageBlock,
+      ...attrs,
+      /*
+       * @note: Using data.hName here means that we don't have to transform
+       * this to an MdxJsxFlowElement, and rehype will transform it correctly
+       */
       data: {
         hName: 'img',
-        hProperties: {
-          ...(alt && { alt }),
-          src: url,
-          ...(title && { title }),
-        },
+        hProperties: attrs,
       },
       position: node.position,
-    } as ImageBlock;
+    };
 
     parent.children.splice(i, 1, newNode);
   });
@@ -37,7 +41,7 @@ const imageTransformer = () => (tree: Node) => {
   const isImage = (node: MdxJsxFlowElement) => node.name === 'Image';
 
   visit(tree, isImage, (node: MdxJsxFlowElement) => {
-    const attrs = getAttrs<ImageBlock['data']['hProperties']>(node);
+    const attrs = getAttrs<ImageBlock>(node);
 
     if (attrs.caption) {
       node.children = mdast(attrs.caption).children;
@@ -48,4 +52,3 @@ const imageTransformer = () => (tree: Node) => {
 };
 
 export default imageTransformer;
-
diff --git a/processor/transform/readme-components.ts b/processor/transform/readme-components.ts
index 9ef063803..c3063cfc2 100644
--- a/processor/transform/readme-components.ts
+++ b/processor/transform/readme-components.ts
@@ -69,16 +69,30 @@ const coerceJsxToMd =
       parent.children[index] = mdNode;
     } else if (node.name === 'Image') {
       const { position } = node;
-      const { alt = '', url, title = null } = getAttrs<Pick<ImageBlock, 'alt' | 'title' | 'url'>>(node);
-      const attrs = getAttrs<ImageBlock['data']['hProperties']>(node);
+      const {
+        alt = '',
+        align,
+        border,
+        caption,
+        title = null,
+        width,
+        src,
+      } = getAttrs<Pick<ImageBlock, 'alt' | 'align' | 'border' | 'title' | 'width' | 'src' | 'caption'>>(node);
+
+      const attrs = {
+        ...(align && { align }),
+        ...(border && { border }),
+        ...(src && { src }),
+        ...(width && { width }),
+        alt,
+        children: caption ? mdast(caption).children : (node.children as any),
+        title,
+      };
 
       const mdNode: ImageBlock = {
-        alt,
+        ...attrs,
         position,
-        children: attrs.caption ? mdast(attrs.caption).children : (node.children as any),
-        title,
         type: NodeTypes.imageBlock,
-        url: url || attrs.src,
         data: {
           hName: 'img',
           hProperties: attrs,
diff --git a/processor/transform/readme-to-mdx.ts b/processor/transform/readme-to-mdx.ts
index 31c098227..7b7ca2d7a 100644
--- a/processor/transform/readme-to-mdx.ts
+++ b/processor/transform/readme-to-mdx.ts
@@ -69,9 +69,9 @@ const readmeToMdx = (): Transform => tree => {
       parent.children.splice(index, 1, {
         type: 'image',
         children: [],
-        url: image.url,
-        title: image.title,
-        alt: image.alt,
+        ...(image.src && { url: image.src }),
+        ...(image.title && { title: image.title }),
+        ...(image.alt && { alt: image.alt }),
       } as Image);
     }
   });
diff --git a/processor/utils.ts b/processor/utils.ts
index 57470d993..54c9e3e99 100644
--- a/processor/utils.ts
+++ b/processor/utils.ts
@@ -68,6 +68,8 @@ export const getAttrs = <T>(jsx: MdxJsxFlowElement | MdxJsxTextElement): any =>
     if ('name' in attr) {
       if (typeof attr.value === 'string') {
         memo[attr.name] = attr.value;
+      } else if (attr.value === null) {
+        memo[attr.name] = true;
       } else if (attr.value.value !== 'undefined') {
         memo[attr.name] = JSON.parse(attr.value.value);
       }
@@ -155,14 +157,14 @@ export const reformatHTML = (html: string, indent: number = 2): string => {
 export const toAttributes = (object: Record<string, any>, keys: string[] = []): MdxJsxAttribute[] => {
   let attributes: MdxJsxAttribute[] = [];
   Object.entries(object).forEach(([name, v]) => {
-    if ((keys.length > 0 && !keys.includes(name)) || typeof v === 'undefined') return;
+    if (keys.length > 0 && !keys.includes(name)) return;
 
     let value: MdxJsxAttributeValueExpression | string;
 
-    if (typeof v === 'string') {
-      value = v;
-    } else if (typeof v === 'undefined') {
+    if (typeof v === 'undefined' || v === null || v === '') {
       return;
+    } else if (typeof v === 'string') {
+      value = v;
     } else {
       /* values can be null, undefined, string, or a expression, eg:
        *
diff --git a/types.d.ts b/types.d.ts
index b94343cff..9149fa017 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -72,24 +72,23 @@ interface HTMLBlock extends Node {
   };
 }
 
-interface ImageBlock extends Parent {
-  type: NodeTypes.imageBlock;
-  url: string;
+interface ImageBlockAttrs {
+  align?: string;
   alt: string;
+  border?: string;
+  caption?: string;
+  className?: string;
+  lazy?: boolean;
+  src: string;
   title: string;
+  width?: string;
+}
+
+interface ImageBlock extends ImageBlockAttrs, Parent {
+  type: NodeTypes.imageBlock;
   data: Data & {
     hName: 'img';
-    hProperties: {
-      align?: string;
-      alt?: string;
-      caption?: string;
-      border?: string;
-      src: string;
-      title?: string;
-      width?: string;
-      lazy?: boolean;
-      className?: string;
-    };
+    hProperties: ImageBlockAttrs;
   };
 }