img loading

nuxt.config.ts

@@ -29,8 +29,8 @@ export default defineNuxtConfig({
     }
   },
   modules: [
-    '@nuxt/eslint',
     '@nuxt/image',
+    '@nuxt/eslint',
     '@nuxt/scripts',
     '@nuxt/ui',
     '@pinia/nuxt',
@@ -43,6 +43,11 @@ export default defineNuxtConfig({
       ]
     }],
   ],
+  image: {
+    strapi: {
+      baseURL: 'https://strapi.digimedialoop.de'
+    }
+  },
   runtimeConfig: {
     public: {
       cmsBaseUrl: process.env.CMS_URL, 

pages/index.vue

@@ -1,6 +1,18 @@
 <template>
   <div class="homePage">
     <section class="heroBox" aria-labelledby="hero-heading">
+      <NuxtImg
+        provider="strapi"
+        src="/uploads/DML_Home_hero_f0916b5608.png"              
+        class="hero-bg"
+        format="webp"
+        sizes="100vw"
+        alt=""                  
+        aria-hidden="true"    
+        loading="eager"
+        preload
+        priority  
+      />
       <div class="container-10">
         <h1 id="hero-heading">{{ $t('home.heroBox.h1') }}</h1>
         <h2>{{ $t('home.heroBox.h2') }}</h2>
@@ -14,11 +26,13 @@
     <section aria-labelledby="solution-title">
       <div class="container-10 webStrategy">
         <NuxtImg
+          provider="strapi"
           class="imgFloatLeft"
-          src="https://strapi.digimedialoop.de/uploads/web_wireframe_Strategie_0bae802a68.png"
+          src="/uploads/web_wireframe_Strategie_0bae802a68.png"
           alt="Wireframe Web Strategie"
           width="300"   
           format="webp"  
+          loading="lazy"
         />
          
             <h2 id="solution-title">{{ $t('home.solution.title') }}</h2>
@@ -182,19 +196,27 @@ const logoItems = computed(() => {
 <style lang="sass">
 .homePage
   .heroBox
-    background-image: url('https://strapi.digimedialoop.de/uploads/DML_Home_hero_f0916b5608.png')
+    position: relative
-    background-repeat: no-repeat
-    background-size: cover
-    background-position: right bottom
     min-height: 35rem
     height: 70vh
-    max-height: 200vw
     display: flex
     align-items: center
     justify-content: center
-    position: relative
+    overflow: hidden           // wichtig: Bild beschneiden
-    @media (max-width: $breakPointMD)
+
-      background-position: center bottom
+    .hero-bg
+      position: absolute
+      inset: 0                 // füllt Section komplett
+      width: 100%
+      height: 100%
+      object-fit: cover
+      object-position: right bottom
+      z-index: 0               // liegt unter Content
+
+    .container-10, h1, h2, h3
+      position: relative
+      z-index: 1               // über dem Bild
+
     h1
       margin-top: 3rem
       z-index: 2