Modul 10: Nuxt Ökosystem

Nuxt Image

Optimierte Bilder mit automatischer Größenanpassung und Format-Konvertierung

Warum Nuxt Image?

Bilder machen oft über 50 % der Seitengröße aus. Nuxt Image optimiert sie automatisch: Größenanpassung, Format-Konvertierung (WebP, AVIF), Lazy Loading und responsive Breakpoints — alles mit minimaler Konfiguration.

Das Modul stellt zwei Komponenten bereit: <NuxtImg> für normale Bilder und <NuxtPicture> für das <picture>-Element mit mehreren Quellen.

Installation

Terminal

npx nuxi module add image

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/image'],

  image: {
    // Standard-Qualität für alle Bilder
    quality: 80,

    // Bildschirmgrößen für responsive Bilder
    screens: {
      xs: 320,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
      xxl: 1536
    },

    // Format-Priorität
    format: ['avif', 'webp', 'png', 'jpg']
  }
})

NuxtImg — das optimierte <img>

<NuxtImg> ist ein Drop-in-Ersatz für das native <img>-Tag mit automatischer Optimierung:

components/ProfilBild.vue

<template>
  <div>
    <!-- Einfachste Verwendung -->
    <NuxtImg src="/images/profil.jpg" alt="Profilbild" />

    <!-- Mit Größenangabe — Bild wird serverseitig skaliert -->
    <NuxtImg
      src="/images/profil.jpg"
      alt="Profilbild"
      width="200"
      height="200"
      fit="cover"
    />

    <!-- Responsive Größen mit sizes -->
    <NuxtImg
      src="/images/hero.jpg"
      alt="Hero-Bild"
      sizes="sm:100vw md:50vw lg:400px"
    />

    <!-- Qualität und Format steuern -->
    <NuxtImg
      src="/images/foto.jpg"
      alt="Foto"
      format="webp"
      :quality="75"
      loading="lazy"
    />

    <!-- Platzhalter während des Ladens -->
    <NuxtImg
      src="/images/grosses-bild.jpg"
      alt="Großes Bild"
      placeholder
      loading="lazy"
    />
  </div>
</template>

ℹ️

Verfügbare Props

src — Bildpfad (lokal oder remote)
width / height — Zielgröße in Pixeln
sizes — Responsive Größen pro Breakpoint
fit — cover, contain, fill, inside, outside
format — webp, avif, png, jpg, gif
quality — 1–100
loading — lazy oder eager
placeholder — Zeigt unscharfen Platzhalter

NuxtPicture — mehrere Formate

<NuxtPicture> erzeugt ein <picture>-Element mit mehreren <source>-Tags. Der Browser wählt automatisch das beste Format:

components/HeroBild.vue

<template>
  <div>
    <!-- Automatisch AVIF, WebP und Fallback -->
    <NuxtPicture
      src="/images/hero.jpg"
      alt="Hero-Bild"
      sizes="sm:100vw md:80vw lg:1200px"
      :quality="85"
    />

    <!--
      Erzeugt ungefähr:
      <picture>
        <source type="image/avif" srcset="..." sizes="..." />
        <source type="image/webp" srcset="..." sizes="..." />
        <img src="hero.jpg" alt="Hero-Bild" />
      </picture>
    -->

    <!-- Art Direction: verschiedene Bilder pro Breakpoint -->
    <NuxtPicture
      src="/images/hero-desktop.jpg"
      alt="Hero"
      :imgAttrs="{ class: 'hero-image' }"
      sizes="sm:100vw lg:1200px"
      format="avif,webp"
    />
  </div>
</template>

<style scoped>
:deep(.hero-image) {
  width: 100%;
  height: auto;
  object-fit: cover;
}
</style>

Image Providers

Nuxt Image unterstützt verschiedene Bild-Provider. Der Standard ist IPX (lokal), aber du kannst auch Cloud-Dienste anbinden:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/image'],

  image: {
    // Lokaler Provider (Standard) — optimiert Bilder auf dem Server
    provider: 'ipx',

    // Cloudinary als Provider
    // provider: 'cloudinary',
    // cloudinary: {
    //   baseURL: 'https://res.cloudinary.com/dein-account/image/upload/'
    // },

    // Mehrere Provider gleichzeitig nutzen
    providers: {
      cloudinary: {
        provider: 'cloudinary',
        options: {
          baseURL: 'https://res.cloudinary.com/dein-account/image/upload/'
        }
      }
    },

    // Externe Domains erlauben
    domains: ['images.unsplash.com', 'avatars.githubusercontent.com']
  }
})

Verschiedene Provider nutzen

<template>
  <div>
    <!-- Lokales Bild (IPX) -->
    <NuxtImg src="/images/lokal.jpg" alt="Lokal" />

    <!-- Cloudinary-Bild -->
    <NuxtImg
      provider="cloudinary"
      src="/v1234/samples/landschaft.jpg"
      alt="Cloudinary-Bild"
      width="800"
    />

    <!-- Externes Bild (Domain muss erlaubt sein) -->
    <NuxtImg
      src="https://images.unsplash.com/photo-123"
      alt="Unsplash"
      width="600"
    />
  </div>
</template>

💡

Verfügbare Provider

Nuxt Image unterstützt unter anderem:

ipx — Lokaler Provider (Standard)
cloudinary — Cloudinary CDN
imgix — Imgix CDN
vercel — Vercel Image Optimization
netlify — Netlify Image CDN
cloudflare — Cloudflare Images

Lazy Loading und Performance

pages/galerie.vue

<template>
  <div class="galerie">
    <!-- Hero-Bild: sofort laden (above the fold) -->
    <NuxtImg
      src="/images/hero.jpg"
      alt="Hero"
      loading="eager"
      :preload="true"
      sizes="100vw"
    />

    <!-- Galerie-Bilder: lazy laden -->
    <div class="grid">
      <NuxtImg
        v-for="bild in bilder"
        :key="bild.id"
        :src="bild.url"
        :alt="bild.beschreibung"
        loading="lazy"
        placeholder
        width="400"
        height="300"
        fit="cover"
        format="webp"
        :quality="80"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
const bilder = ref([
  { id: 1, url: '/images/foto-1.jpg', beschreibung: 'Landschaft' },
  { id: 2, url: '/images/foto-2.jpg', beschreibung: 'Stadt' },
  { id: 3, url: '/images/foto-3.jpg', beschreibung: 'Natur' },
  { id: 4, url: '/images/foto-4.jpg', beschreibung: 'Architektur' },
])
</script>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
</style>

⚠️

Performance-Tipps

Nutze loading="eager" nur für Above-the-Fold-Bilder
Setze immer width und height um Layout Shifts zu vermeiden
Nutze placeholder für große Bilder unterhalb des sichtbaren Bereichs
Bevorzuge format="webp" oder "avif" für kleinere Dateien
Nutze sizes statt fester Breiten für responsive Layouts

Zusammenfassung

💡

Wichtige Konzepte

NuxtImg — Optimiertes <img> mit automatischer Skalierung
NuxtPicture — <picture>-Element mit mehreren Formaten
IPX — Lokaler Bild-Optimierer (Standard-Provider)
sizes — Responsive Bildgrößen pro Breakpoint
placeholder — Unscharfer Platzhalter beim Laden
Provider — Cloudinary, Imgix, Vercel u.v.m.