0Pricing
Frontend Academy · Lektion

Bildoptimierung: Lazy Loading und WebP-Formate

Fügen Sie Bildern loading=lazy hinzu, liefern Sie moderne WebP- und AVIF-Formate aus, verwenden Sie responsive Bilder mit srcset und sizes und legen Sie explizite Breite und Höhe fest, um Layoutverschiebungen zu verhindern.

Bildoptimierung: Lazy Loading und WebP-Formate ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Bilder machen den größten Teil der Seitengröße aus

Eine durchschnittliche Webseite ist etwa 2 MB groß – und Bilder machen ungefähr die Hälfte davon aus. Die Optimierung von Bildern ist daher die einzelne Maßnahme mit der größten Wirkung auf die Performance.

Moderne Formate: WebP und AVIF

WebP ist bei vergleichbarer Qualität 25–35 % kleiner als JPEG und wird von allen modernen Browsern unterstützt. AVIF ist noch kleiner (50 % Reduktion), lässt sich aber langsamer kodieren. Verwenden Sie beide Formate mit einem Fallback.

Das picture-Element

Verwenden Sie <picture>, um AVIF auszuliefern, sofern es unterstützt wird, danach WebP und schließlich JPEG als letzten Fallback.

<picture>
  <source srcset="/photo.avif" type="image/avif">
  <source srcset="/photo.webp" type="image/webp">
  <img src="/photo.jpg" alt="Description" width="800" height="600">
</picture>

Natives Lazy Loading

Fügen Sie Bildern unterhalb des sichtbaren Bereichs loading="lazy" hinzu. Der Browser lädt sie erst, sobald sie sich dem Viewport nähern – ganz ohne JavaScript.

<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">

<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">

Responsive Bilder mit srcset und sizes

Liefern Sie für kleinere Bildschirme kleinere Bilder aus. srcset enthält mögliche Bilder mit ihrer jeweiligen Breite; sizes teilt dem Browser mit, wie breit das Bild an den einzelnen Breakpoints dargestellt wird.

<img
  src="/photo-800.jpg"
  srcset="/photo-400.jpg 400w,
          /photo-800.jpg 800w,
          /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="" width="800" height="600">

Warum width und height explizit festlegen

Der Browser reserviert anhand der Attribute width und height Platz und verhindert so eine Layout-Verschiebung, wenn das Bild eintrifft. Moderne Browser berechnen aus diesen Attributen automatisch das Seitenverhältnis.

decoding="async"

Fügen Sie decoding="async" hinzu, damit der Browser das Bild außerhalb des Hauptthreads dekodieren kann und dieser andere Inhalte rendern kann.

<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">

Image-CDNs

Image-CDNs (Cloudinary, imgix, Vercel Image Optimization, Cloudflare Images) transformieren Bilder während der Auslieferung: Sie ändern die Größe, konvertieren in WebP/AVIF, komprimieren die Bilder und liefern sie aus Edge-Caches aus.

<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">

Next.js Image Component

Die <Image>-Komponente von Next.js übernimmt standardmäßig responsive srcset, die Konvertierung in WebP, Lazy Loading und einen Blur-Platzhalter.

import Image from 'next/image';

<Image
  src="/photo.jpg"
  alt="Description"
  width={800}
  height={600}
  placeholder="blur"
  priority={isHero}
/>

JPEGs und PNGs komprimieren

Wenn Sie nicht auf WebP umsteigen können, komprimieren Sie die Bilder zumindest: Verwenden Sie Squoosh (squoosh.app) für einzelne Bilder, ImageOptim für die Stapelverarbeitung oder sharp in einem Build-Skript.

SVGs für Icons und Logos

Verwenden Sie SVG für Icons, Logos und alle Vektorgrafiken. SVGs lassen sich ohne Qualitätsverlust skalieren, sind sehr klein und können mit CSS gestaltet werden. Binden Sie kleine SVGs inline ein, um einen zusätzlichen HTTP-Request zu vermeiden.

Schnelltest

Welches HTML-Attribut weist den Browser an, das Laden eines Bildes zu verzögern, bis es sich dem Viewport nähert?

Zusammenfassung: Bildoptimierung

Verwenden Sie moderne Formate (AVIF, WebP) über das picture-Element. Fügen Sie Bildern unterhalb des sichtbaren Bereichs loading="lazy“ und dem Hero-Bild fetchpriority="high“ hinzu. Legen Sie width und height explizit fest, um CLS zu verhindern. Verwenden Sie srcset/sizes für responsive Bilder. Image-CDNs automatisieren die Transformation. Next.js Image übernimmt all diese Aufgaben. Verwenden Sie SVG für Icons.

Häufig gestellte Fragen

Ist die Lektion „Bildoptimierung: Lazy Loading und WebP-Formate“ kostenlos?

Ja — der vollständige Text von „Bildoptimierung: Lazy Loading und WebP-Formate“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Bildoptimierung: Lazy Loading und WebP-Formate“?

Fügen Sie Bildern loading=lazy hinzu, liefern Sie moderne WebP- und AVIF-Formate aus, verwenden Sie responsive Bilder mit srcset und sizes und legen Sie explizite Breite und Höhe fest, um Layoutversc… Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Bildoptimierung: Lazy Loading und WebP-Formate“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Core Web Vitals: LCP, FID, CLS
  2. Lighthouse-Audits und Bewertung
  3. Bildoptimierung: Lazy Loading und WebP-Formate
  4. Code Splitting und Lazy Routes
← Zurück zu Frontend Academy