diff --git a/Dockerfile b/Dockerfile
index 60856bd0..2a0ce691 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -14,6 +14,7 @@ ADD client/package.json client/package-lock.json ./
 RUN npm install
 
 ADD client /app/
+RUN cp .env.docker .env
 RUN npm run build
 
 # syntax=docker/dockerfile:1.3-labs
diff --git a/client/.env.docker b/client/.env.docker
index 55fad125..fe76e57e 100644
--- a/client/.env.docker
+++ b/client/.env.docker
@@ -10,4 +10,5 @@ NUXT_PUBLIC_GOOGLE_ANALYTICS_CODE=
 NUXT_PUBLIC_H_CAPTCHA_SITE_KEY=
 NUXT_PUBLIC_PAID_PLANS_ENABLED=false
 NUXT_PUBLIC_S3_ENABLED=false
+NUXT_PUBLIC_IMAGE_OPTIMIZATION_DISABLED=true
 NUXT_API_SECRET=
diff --git a/client/components/pages/templates/SingleTemplate.vue b/client/components/pages/templates/SingleTemplate.vue
index 8b403da2..422586cd 100644
--- a/client/components/pages/templates/SingleTemplate.vue
+++ b/client/components/pages/templates/SingleTemplate.vue
@@ -17,8 +17,8 @@
     </div>
 
     <div class="aspect-[4/3] rounded-lg shadow-sm overflow-hidden">
-      <img class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full"
-           :src="template.image_url" alt=""
+      <NuxtImg class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full" v-if="template.image_url"
+           :src="template.image_url" alt="" width="450px"
       />
     </div>
     <p
diff --git a/client/lib/images/dummy-image-provider.js b/client/lib/images/dummy-image-provider.js
new file mode 100644
index 00000000..86d5dd56
--- /dev/null
+++ b/client/lib/images/dummy-image-provider.js
@@ -0,0 +1,21 @@
+import { joinURL } from 'ufo'
+import { createOperationsGenerator } from '#image'
+
+const operationsGenerator = createOperationsGenerator()
+
+export const getImage = (
+  src,
+  { modifiers = {}, baseURL } = {}
+) => {
+
+  if (!baseURL) {
+    // also support runtime config
+    baseURL = useRuntimeConfig().public.siteUrl
+  }
+
+  const operations = operationsGenerator(modifiers)
+
+  return {
+    url: joinURL(baseURL, src + (operations ? '?' + operations : '')),
+  }
+}
diff --git a/client/nuxt.config.ts b/client/nuxt.config.ts
index 1c1ec526..d048dbec 100644
--- a/client/nuxt.config.ts
+++ b/client/nuxt.config.ts
@@ -64,8 +64,17 @@ export default defineNuxtConfig({
             }
         }
     },
-    image: {
+    image: runtimeConfig.public.useDummyImageProvider ? {
+        provider: 'dummy',
+        providers: {
+            dummy: {
+                provider: '~/lib/dummy-image-provider.js',
+            }
+        }
+    } :{
         quality: 95,
+        format: 'webp',
+        domains: ['images.unsplash.com']
     },
     sourcemap: true,
     vite: {
diff --git a/client/pages/templates/[slug].vue b/client/pages/templates/[slug].vue
index 37e85d96..b44d590d 100644
--- a/client/pages/templates/[slug].vue
+++ b/client/pages/templates/[slug].vue
@@ -32,9 +32,9 @@
       <section class="pt-12 bg-gray-50 sm:pt-16 border-b pb-[250px] relative">
         <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
           <div class="flex flex-col items-center justify-center max-w-4xl gap-8 mx-auto md:gap-12 md:flex-row">
-            <div class="aspect-[4/3] shrink-0 rounded-lg shadow-sm overflow-hidden group max-w-xs">
-              <img class="object-cover w-full h-full transition-all duration-200 group-hover:scale-110"
-                   :src="template.image_url" alt="Template cover image"
+            <div class="aspect-[4/3] shrink-0 rounded-lg shadow-sm overflow-hidden group max-w-sm">
+              <NuxtImg class="object-cover w-full transition-all duration-200 group-hover:scale-110 h-[240px]"
+                   :src="template.image_url" alt="Template cover image" width="500px" height="380px"
               />
             </div>
 
diff --git a/client/runtimeConfig.js b/client/runtimeConfig.js
index fcf808e2..8c91c58b 100644
--- a/client/runtimeConfig.js
+++ b/client/runtimeConfig.js
@@ -12,6 +12,7 @@ export default {
     s3Enabled: process.env.NUXT_PUBLIC_S3_ENABLED || false,
     paidPlansEnabled: process.env.NUXT_PUBLIC_PAID_PLANS_ENABLED || false,
     customDomainsEnabled: process.env.NUXT_PUBLIC_CUSTOM_DOMAINS_ENABLED || false,
+    useDummyImageProvider: process.env.NUXT_PUBLIC_IMAGE_OPTIMIZATION_DISABLED || false,
 
     // Config within public will be also exposed to the client
     SENTRY_DSN_PUBLIC: process.env.SENTRY_DSN_PUBLIC,
diff --git a/docker/nuxt-wrapper.sh b/docker/nuxt-wrapper.sh
index 9ed0b1d8..e205ac6d 100644
--- a/docker/nuxt-wrapper.sh
+++ b/docker/nuxt-wrapper.sh
@@ -7,10 +7,9 @@ nvm use 20
 cd /app/nuxt/server/
 
 . /app/client/.env
+
 [ "x$NUXT_API_SECRET" != "x" ] || generate-api-secret.sh
 
-sed 's/^/export /' < /app/.nuxt.env > env.sh
-
-. env.sh
+eval $(sed 's/^/export /' < /app/client/.env)
 
 node index.mjs