diff --git a/next.config.js b/next.config.js
index 1ec195877..ec41739bd 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,7 +2,8 @@ module.exports = {
   output: 'standalone',
   images: {
     loader: 'custom',
-    loaderFile: './src/image-loader.js'
+    loaderFile: './src/media/image-loader.js',
+    unoptimized: true
   },
   typescript: {
     ignoreBuildErrors: false
diff --git a/src/app/(default)/components/RecentMediaCard.tsx b/src/app/(default)/components/RecentMediaCard.tsx
index ce18da532..407b13ac4 100644
--- a/src/app/(default)/components/RecentMediaCard.tsx
+++ b/src/app/(default)/components/RecentMediaCard.tsx
@@ -9,7 +9,7 @@ import { getUploadDateSummary } from '../../../js/utils'
 import { PostHeader } from './Post'
 import { resolver as urlResolver } from '../../../components/media/Tag'
 import { ATagWrapper } from '../../../components/Utils'
-
+import imageLoader from '@/js/media/image-loader'
 const MOBILE_IMAGE_MAX_WIDITH = 600
 
 interface RecentImageCardProps {
@@ -42,6 +42,7 @@ export const RecentImageCard = ({
               height={MOBILE_IMAGE_MAX_WIDITH / imageRatio}
               sizes={`${MOBILE_IMAGE_MAX_WIDITH}px`}
               onLoad={() => setLoaded(true)}
+              loader={imageLoader}
               alt=''
             />
             <div
diff --git a/src/image-loader.js b/src/image-loader.js
deleted file mode 100644
index 9f46be99e..000000000
--- a/src/image-loader.js
+++ /dev/null
@@ -1,10 +0,0 @@
-'use client'
-const dev = process.env.NODE_ENV !== 'production'
-const imageLoader = ({ src, width, quality }) => {
-  if (dev && src.startsWith('/_next')) {
-    return src
-  }
-  return `${process.env.NEXT_PUBLIC_CDN_URL}${src}?w=${width}&q=${quality || 75}`
-}
-
-export default imageLoader