Use next/image for hero/sidebar/markdown images

app/blog/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
 import { allPosts } from 'contentlayer/generated';
@@ -85,15 +86,15 @@ export default function BlogPostPage({ params }: Props) {
           <SectionDivider>
             <ScrollReveal>
               <article className="prose prose-lg prose-slate max-w-none dark:prose-dark">
-                {post.feature_image && (
-                  // feature_image is stored as "../assets/xyz", serve from "/assets/xyz"
-                  // eslint-disable-next-line @next/next/no-img-element
-                  <img
-                    src={post.feature_image.replace('../assets', '/assets')}
-                    alt={post.title}
-                    className="my-4 rounded"
-                  />
-                )}
+              {post.feature_image && (
+                <Image
+                  src={post.feature_image.replace('../assets', '/assets')}
+                  alt={post.title}
+                  width={1200}
+                  height={600}
+                  className="my-4 rounded"
+                />
+              )}
                 <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
               </article>
             </ScrollReveal>

app/pages/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
 import { allPages } from 'contentlayer/generated';
@@ -70,15 +71,15 @@ export default function StaticPage({ params }: Props) {
             )}
           </header>
           <article className="prose prose-lg prose-slate max-w-none dark:prose-dark">
-            {page.feature_image && (
-              // feature_image is stored as "../assets/xyz", serve from "/assets/xyz"
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                src={page.feature_image.replace('../assets', '/assets')}
-                alt={page.title}
-                className="my-4 rounded"
-              />
-            )}
+              {page.feature_image && (
+                <Image
+                  src={page.feature_image.replace('../assets', '/assets')}
+                  alt={page.title}
+                  width={1200}
+                  height={600}
+                  className="my-4 rounded"
+                />
+              )}
             <div dangerouslySetInnerHTML={{ __html: page.body.html }} />
           </article>
         </div>

components/right-sidebar.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import Image from 'next/image';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGithub, faMastodon, faLinkedin } from '@fortawesome/free-brands-svg-icons';
 import { faFire, faArrowRight } from '@fortawesome/free-solid-svg-icons';
@@ -50,10 +51,12 @@ export function RightSidebar() {
               className="mb-2 inline-block transition-transform duration-300 ease-out group-hover:-translate-y-0.5"
             >
               {avatarSrc ? (
-                // eslint-disable-next-line @next/next/no-img-element
-                <img
+                <Image
                   src={avatarSrc}
                   alt={siteConfig.name}
+                  width={96}
+                  height={96}
+                  unoptimized
                   className="h-24 w-24 rounded-full border border-slate-200 object-cover shadow-sm transition-transform duration-300 ease-out group-hover:scale-105 dark:border-slate-700"
                 />
               ) : (