diff --git a/website/src/components/embed.js b/website/src/components/embed.js
index 9e34d5e2a..cc94c9738 100644
--- a/website/src/components/embed.js
+++ b/website/src/components/embed.js
@@ -88,10 +88,16 @@ const Image = ({ src, alt, title, href, ...props }) => {
     const markdownComponents = { code: InlineCode, p: Fragment, a: Link }
     return (
         <figure className="gatsby-resp-image-figure">
-            <Link className={linkClassNames} href={href ?? src} noLinkLayout forceExternal>
-                {/* eslint-disable-next-line @next/next/no-img-element */}
+            {href ? (
+                <Link className={linkClassNames} href={href} noLinkLayout forceExternal>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img className={classes.image} src={src} alt={alt} width={650} height="auto" />
+                </Link>
+            ) : (
+                /* eslint-disable-next-line @next/next/no-img-element */
                 <img className={classes.image} src={src} alt={alt} width={650} height="auto" />
-            </Link>
+            )}
+
             {title && (
                 <figcaption className="gatsby-resp-image-figcaption">
                     <MarkdownToReact markdown={title} />
@@ -104,7 +110,7 @@ const Image = ({ src, alt, title, href, ...props }) => {
 const ImageFill = ({ image, ...props }) => {
     return (
         <span
-            class={classes['figure-fill']}
+            className={classes['figure-fill']}
             style={{ paddingBottom: `${(image.height / image.width) * 100}%` }}
         >
             <ImageNext src={image.src} {...props} fill />