diff --git a/src/components/ui/ImageOptimizer.astro b/src/components/ui/ImageOptimizer.astro
index a98e625..5c29c9b 100644
--- a/src/components/ui/ImageOptimizer.astro
+++ b/src/components/ui/ImageOptimizer.astro
@@ -1,100 +1,20 @@
----
-import { Image } from 'astro:assets'
-import type { ImageOptimizerProps } from '../../types/component.types'
-
-const {
-  src,
-  alt,
-  width,
-  height,
-  quality = 85,
-  format = 'webp',
-  loading = 'lazy',
-  decoding = 'async',
-  class: className,
-  caption,
-  priority = false
-} = Astro.props as ImageOptimizerProps
-
-// Use eager loading for priority images
-const actualLoading = priority ? 'eager' : loading
-
-// Generate responsive image sizes
-const sizes = '(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw'
----
-
-<figure class={`optimized-image ${className || ''}`}>
-  {
-    typeof src === 'string' ? (
-      <img
-        src={src}
-        alt={alt}
-        width={width}
-        height={height}
-        loading={actualLoading}
-        decoding={decoding}
-        fetchpriority={priority ? 'high' : 'auto'}
-        sizes={sizes}
-        class="responsive-image"
-      />
-    ) : (
-      <Image
-        src={src}
-        alt={alt}
-        width={width}
-        height={height}
-        quality={quality}
-        format={format}
-        loading={actualLoading}
-        decoding={decoding}
-        fetchpriority={priority ? 'high' : 'auto'}
-        sizes={sizes}
-        class="responsive-image"
-      />
-    )
+<script is:inline>
+  // Global handler: Automatically remove the img-placeholder class after images are loaded
+  function removeImgPlaceholder() {
+    document.querySelectorAll('img.img-placeholder').forEach(function (img) {
+      if (img.complete) {
+        img.classList.remove('img-placeholder')
+      } else {
+        img.addEventListener('load', function () {
+          img.classList.remove('img-placeholder')
+        })
+      }
+    })
   }
-  {caption && <figcaption>{caption}</figcaption>}
-</figure>
-
-<style>
-  .optimized-image {
-    margin: 1.25em 0;
-    text-align: center;
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', removeImgPlaceholder)
+  } else {
+    removeImgPlaceholder()
   }
-
-  .optimized-image .responsive-image {
-    max-width: 100%;
-    height: auto;
-    border-radius: 4px;
-    transition: opacity 0.3s ease;
-    background-color: var(--bg-secondary);
-  }
-
-  .optimized-image figcaption {
-    color: var(--text-secondary);
-    font-size: var(--font-size-s);
-    margin-top: 0.75em;
-    text-align: center;
-  }
-
-  /* Loading state */
-  .optimized-image .responsive-image[loading='lazy'] {
-    opacity: 0;
-    animation: fadeIn 0.3s ease forwards;
-  }
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  /* Hover effect for interactive images */
-  .optimized-image .responsive-image:hover {
-    transform: scale(1.02);
-    transition: transform 0.3s ease;
-  }
-</style>
+  document.addEventListener('astro:page-load', removeImgPlaceholder)
+</script>
diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro
index 7851259..301ba97 100644
--- a/src/layouts/PostLayout.astro
+++ b/src/layouts/PostLayout.astro
@@ -10,6 +10,7 @@ import TableOfContents from '@/components/ui/TableOfContents.astro'
 import GradientMask from '@/components/ui/GradientMask.astro'
 import ImageViewer from '@/components/ui/ImageViewer.astro'
 import GitHubCard from '@/components/ui/GitHubCard.astro'
+import ImageOptimizer from '@/components/ui/ImageOptimizer.astro'
 import XPOST from '@/components/ui/XPOST.astro'
 import CopyCode from '@/components/ui/CopyCode.astro'
 import BaseLayout from '@/layouts/BaseLayout.astro'
@@ -60,6 +61,7 @@ const ogImage = `/open-graph/${postSlug}.png`
     <CopyCode />
     <GitHubCard />
     <XPOST />
+    <ImageOptimizer />
     {themeConfig.post.imageViewer && <ImageViewer />}
     {themeConfig.general.footer && <Footer />}
   </div>
diff --git a/src/plugins/rehype-image-processor.mjs b/src/plugins/rehype-image-processor.mjs
index 178a91e..fe3bd71 100644
--- a/src/plugins/rehype-image-processor.mjs
+++ b/src/plugins/rehype-image-processor.mjs
@@ -47,7 +47,8 @@ export default function rehypeImageProcessor() {
           // Add decoding hint for better performance
           decoding: 'async',
           // Add fetchpriority for critical images (first image gets high priority)
-          fetchpriority: newNodes.length === 0 ? 'high' : 'auto'
+          fetchpriority: newNodes.length === 0 ? 'high' : 'auto',
+          class: [...(imgNode.properties.class || []), 'img-placeholder']
         }
 
         if (!alt || alt.includes('_')) {
diff --git a/src/styles/global.css b/src/styles/global.css
index 5fa59b2..b7d2cb5 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -30,7 +30,7 @@
   --text-tertiary: rgba(0, 0, 0, 0.24);
   --border: rgba(0, 0, 0, 0.1);
   --selection: rgba(0, 0, 0, 0.08);
-  --code-bg: rgba(0, 0, 0, 0.06);
+  --code-bg: rgba(0, 0, 0, 0.04);
   --mark: #f3ffc4;
 
   /* Syntax Theme  */
@@ -55,7 +55,7 @@ html.light {
   --text-tertiary: rgba(0, 0, 0, 0.24);
   --border: rgba(0, 0, 0, 0.1);
   --selection: rgba(0, 0, 0, 0.08);
-  --code-bg: rgba(0, 0, 0, 0.06);
+  --code-bg: rgba(0, 0, 0, 0.04);
   --mark: #f3ffc4;
 
   /* Syntax Theme  */
@@ -80,7 +80,7 @@ html.dark {
   --text-tertiary: rgba(255, 255, 255, 0.24);
   --border: rgba(255, 255, 255, 0.1);
   --selection: rgba(255, 255, 255, 0.08);
-  --code-bg: rgba(255, 255, 255, 0.06);
+  --code-bg: rgba(255, 255, 255, 0.04);
   --mark: #545b37;
 
   /* Syntax Theme  */
diff --git a/src/styles/post.css b/src/styles/post.css
index bb83f50..2bb822d 100644
--- a/src/styles/post.css
+++ b/src/styles/post.css
@@ -100,20 +100,23 @@
   font-weight: var(--font-weight-bold);
 }
 
-/* Images with performance optimizations */
+/* Images */
 .prose img {
   max-width: 100%;
   height: auto;
   display: block;
   margin: 1.25em 0;
-  background-color: var(--astro-code-background);
-  transition: opacity 0.3s ease-in-out;
+}
+
+.img-placeholder {
+  background: var(--code-bg);
+  display: block;
 }
 
 /* Loading state for images */
 .prose img[loading='lazy'] {
   opacity: 0;
-  animation: fadeIn 0.3s ease-in-out forwards;
+  animation: fadeIn 0.3s ease-out forwards;
 }
 
 @keyframes fadeIn {
@@ -125,32 +128,6 @@
   }
 }
 
-/* Ensure images don't cause layout shifts */
-.prose img:not([width]):not([height]) {
-  aspect-ratio: attr(width) / attr(height);
-}
-
-/* Add skeleton loading effect */
-.prose img[loading='lazy']:not([src]) {
-  background: linear-gradient(
-    90deg,
-    var(--bg-secondary) 25%,
-    var(--bg-tertiary) 50%,
-    var(--bg-secondary) 75%
-  );
-  background-size: 200% 100%;
-  animation: loading 1.5s infinite;
-}
-
-@keyframes loading {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
 .prose figure {
   margin-bottom: 1.25em;
   text-align: center;
@@ -193,9 +170,10 @@
 
 /* Inline code */
 .prose code {
-  padding: 3px 4px;
-  border-radius: 5px;
+  padding: 3px 5px;
+  border-radius: 6px;
   background-color: var(--code-bg);
+  border: 0.5px solid var(--border);
   font-family: var(--font-mono);
   font-size: 0.9em;
   font-feature-settings: