Checkliste zur Bildoptimierung: Jeder Schritt für schnelle Web-Bilder

Zuletzt aktualisiert: June 28, 2026. Führen Sie diese Checkliste vor jedem Veröffentlichen erneut aus, um konsistente Ergebnisse zu erzielen.

Image optimization ist eine Sequenz, kein einzelner Schritt. Überspringen Sie einen Abschnitt, und das Ergebnis ist entweder langsam oder unscharf. Diese Checkliste führt durch jeden einzelnen Schritt – Formatwahl, Skalierung, Komprimierung, responsive Bereitstellung, Lazy Loading und CDN-Einrichtung – in der Reihenfolge, in der Sie sie tatsächlich durchführen, damit Sie sie vor jedem Veröffentlichen durchgehen können und wissen, dass die Bilder schnell laden und scharf aussehen werden.

Kurze Antwort: Was beinhaltet ein vollständiger Image-Optimierungsdurchlauf?

Ein vollständiger Durchlauf bedeutet, das richtige Format zu wählen (WebP für Fotos, SVG für Vektoren, PNG für Transparenz), auf die Anzeigegröße zu skalieren, auf die Zielgröße zu komprimieren, responsive Varianten mit srcset bereitzustellen, Bilder unterhalb des sichtbaren Bereichs (below-the-fold) lazy-loading und über ein CDN zu liefern. Das Überspringen eines Schrittes lässt Leistung liegen – ein unkomprimiertes Bild ist langsam, ein zu großes Bild verschwendet Bytes und ein Bild ohne Lazy Loading verzögert das initiale Rendering. Führen Sie die gesamte Checkliste durch, anstatt einzelne Schritte auszuwählen.

Warum eine Checkliste verwenden statt ad hoc zu optimieren?

Die Image-Optimierung besteht aus vielen kleinen Schritten, und das Vergessen eines einzigen macht die Arbeit der anderen zunichte. Eine Checkliste verwandelt einen leicht vergesslichen mehrstufigen Prozess in eine wiederholbare Routine, die konsistente Ergebnisse liefert.

• Jeder Schritt behandelt einen unterschiedlichen Leistungsfaktor.
• Das Überspringen eines Schrittes lässt diesen Faktor unadressiert.
• Die Schritte sind unabhängig genug, um sie zuverlässig zu überprüfen.

Stage 1: Wählen Sie das richtige Format

Das Format ist die erste Entscheidung, da es alles danach einschränkt. Passen Sie das Format an den Bildinhalt an.

• WebP — Standard für Fotos in modernen Browsern. Kleiner als JPEG bei gleicher Qualität.
• AVIF — noch kleiner als WebP, mit wachsender Unterstützung. Verwenden Sie es mit einem Fallback auf WebP oder JPEG.
• SVG — für Logos, Icons und Vektorgrafiken. Skaliert unendlich, winzige Datei.
• PNG — für Bilder, die Transparenz und verlustfreie Qualität benötigen.
• JPEG — der universelle Fallback für Fotos, wenn moderne Formate nicht unterstützt werden.

Der format comparison guide und der AVIF vs WebP guide behandeln die Kompromisse im Detail. Wählen Sie das Format, das für den Inhalt bei akzeptabler Qualität die kleinste Datei liefert.

Stage 2: Skalieren auf die Anzeigegröße

Stellen Sie niemals ein Bild bereit, das größer ist, als es angezeigt wird. Ein 4000-Pixel-Foto in einem 600-Pixel-Slot verschwendet Bandbreite und verlangsamt die Seite. Resize Sie auf die größte Größe, in der das Bild angezeigt werden soll, und berücksichtigen Sie dabei Retina (2x).

Das Skalieren vor der Komprimierung ist wichtig, da die Komprimierung auf der Pixelanzahl basiert – weniger Pixel komprimieren zu weniger Bytes. Der resize guide behandelt, wie dies ohne Qualitätsverlust geschieht.

Stage 3: Komprimieren auf die Zielgröße

Nach dem Skalieren compress, um Bytes zu reduzieren. Streben Sie die kleinste Datei an, ohne sichtbaren Qualitätsverlust.

• Fotos: WebP oder JPEG mit Qualität 80.
• Grafiken mit flacher Farbe: PNG oder verlustfreies WebP.
• Testen Sie bei 100 % Zoom, um zu bestätigen, dass keine sichtbaren Artefakte vorliegen.
• Streben Sie für Hero-Bilder unter 200 KB und für Inhaltsbilder unter 100 KB an.

Der compression guide behandelt die Techniken und Qualitätseinstellungen.

Stage 4: Responsive Varianten bereitstellen

Verschiedene Bildschirme benötigen unterschiedliche Bildgrößen. Stellen Sie diese mit srcset bereit, damit jedes Gerät die richtige Datei herunterlädt und nicht eine Einheitsgröße.

• Generieren Sie 1x-, 2x- und 3x-Varianten für Retina-Bildschirme.
• Verwenden Sie Breitenbeschreibungen (400w, 800w) zusammen mit sizes für responsive Layouts.
• Lassen Sie den Browser die richtige Datei auswählen.
• Der responsive images guide behandelt das Markup.

Stage 5: Bilder unterhalb des sichtbaren Bereichs lazy-loaden

Bilder unterhalb des sichtbaren Bereichs sollten nicht geladen werden, bis der Benutzer zu ihnen scrollt. Dies gibt Bandbreite für das initiale Rendering frei und verbessert die Metrik Largest Contentful Paint.

• Fügen Sie loading="lazy" zu Bildern unterhalb des sichtbaren Bereichs hinzu.
• Lassen Sie das Hero-Bild eager-loaded, damit das LCP-Element schnell lädt.
• Der lazy loading guide behandelt die Implementierung.

Stage 6: Über ein CDN liefern

Stellen Sie Bilder von einem Content Delivery Network bereit, damit sie von einem Edge-Standort nahe jedem Benutzer geladen werden. Ein CDN reduziert die Latenz und entlastet den Ursprungsserver (Origin Server), was für Seiten mit einer geografisch verteilten Zielgruppe am wichtigsten ist – sonst wartet ein Benutzer auf einem anderen Kontinent darauf, dass jedes Bild diese Distanz überquert. Der CDN guide behandelt die Einrichtung, einschließlich der Transformationsfunktionen, mit denen ein CDN Bilder "on the fly" skalieren und neu formatieren kann, und der Core Web Vitals guide verknüpft die schnelle Bildbereitstellung mit den Metriken, die das Ranking beeinflussen.

Ein CDN absorbiert auch Traffic-Spitzen. Wenn eine Seite viral geht oder eine Kampagne einen Ansturm von Besuchern sendet, liefern die Edge Caches die Bilder anstatt des Ursprungsservers, sodass die Seite unter einer Last, die sonst einen einzelnen Server überfordern würde, schnell bleibt. Für Seiten, bei denen die Verfügbarkeit unter hohem Traffic genauso wichtig ist wie die durchschnittliche Ladezeit, ist diese Widerstandsfähigkeit so wertvoll wie die Reduzierung der Latenz.

Häufige Optimierungsfehler

Selbst mit einer Checkliste wiederholen sich einige Fehler und machen die Arbeit zunichte. Sie zu kennen, beschleunigt den Verifizierungsschritt.

• Komprimieren vor dem Skalieren — verschwendet Mühe an Pixeln, die verworfen werden. Immer zuerst skalieren.
• Eine Größe für alle Geräte bereitstellen — Handys laden Desktop-Größen herunter. Verwenden Sie srcset.
• Das Hero-Bild lazy-loaden — verzögert das LCP-Element. Das Bild oberhalb des sichtbaren Bereichs sollte eager sein.
• Breiten- und Höhenattribute vergessen — verursachen Layout Shift beim Laden der Bilder. Immer einfügen.
• PNG für Fotos verwenden — bläht die Datei auf. Verwenden Sie WebP oder JPEG für fotografische Inhalte.

Verifizierung: Hat die Optimierung funktioniert?

Nach Durchführen der Checkliste verifizieren Sie das Ergebnis durch Messungen und nicht durch Vermutungen. Tools bestätigen, ob die Bilder tatsächlich schnell laden, und Messungen sind der einzige Weg zu wissen, dass die Optimierung funktioniert hat – eine visuelle Inspektion enthüllt weder die Dateigröße noch die Ladereihenfolge. Führen Sie diese Überprüfungen sowohl bei einer schnellen als auch bei einer langsamen Verbindung durch, da eine Optimierung, die auf Breitband gut aussieht, bei mobilen Daten immer noch Schwierigkeiten haben kann.

1. Führen Sie Google PageSpeed Insights aus und überprüfen Sie die bildbezogenen Möglichkeiten.
2. Bestätigen Sie, dass das LCP-Element innerhalb von 2.5 Sekunden lädt.
3. Überprüfen Sie den Netzwerk-Tab, um zu bestätigen, dass pro Gerät die korrekt dimensionierte Datei geladen wird.
4. Verifizieren Sie, dass lazy-geladene Bilder bis zum Scrollen warten.

Der web.dev performance measurement guide dokumentiert, wie PageSpeed Seiten bewertet, und der Mozilla performance guide behandelt die Metriken im Detail. Eine Seite, die diese Prüfungen nach der Checkliste besteht, hat wirklich schnelle Bilder – nicht nur Bilder, die optimiert aussehen. Für den breiteren SEO-Kontext verknüpft der image SEO guide diese Leistungsgewinne mit dem Suchmaschinenranking.

Häufig gestellte Fragen

Was beinhaltet ein vollständiger Image-Optimierungsdurchlauf?

Die Wahl des richtigen Formats, das Skalieren auf die Anzeigegröße, das Komprimieren auf eine Zielgröße, die Bereitstellung responsiver Varianten mit srcset, das Lazy Loading unterhalb des sichtbaren Bereichs und das Caching über ein CDN. Das Überspringen eines Schrittes lässt Bytes oder Qualität liegen. Die Checkliste existiert, damit kein Schritt vergessen wird.

Warum eine Checkliste verwenden statt ad hoc zu optimieren?

Weil ad hoc Optimierung Schritte versäumt – ein Entwickler komprimiert, vergisst aber das Skalieren, oder fügt srcset hinzu, vergisst aber das Lazy Loading. Eine Checkliste stellt sicher, dass jedes Bild jeden Schritt konsistent über die gesamte Seite hinweg erhält. Konsistenz ist es, was Core Web Vitals im großen Maßstab voranbringt.

Was ist der größte einzelne Gewinn bei der Image-Optimierung?

Das Skalieren auf die Anzeigegröße. Ein 6000px Kamerabild, das bei 800px bereitgestellt wird, ist der größte Einzelverlust auf den meisten Seiten. Zuerst skalieren; alles andere baut auf einer korrekt dimensionierten Basis auf.

Wie stelle ich responsive Varianten bereit?

Generieren Sie jedes Bild in den Größen, die Ihre Breakpoints benötigen, und verwenden Sie dann srcset und sizes, damit der Browser die richtige Datei basierend auf dem Viewport auswählt. Der Browser lädt nur die benötigte Variante herunter und spart Bytes auf kleinen Bildschirmen. Sehen Sie sich den responsive images guide an.

Wie oft sollte ich Bilder neu optimieren?

Immer wenn Sie neue Bilder hinzufügen, und auditieren Sie die bestehende Menge, wenn Core Web Vitals sinken. Alte Bilder, die vor Jahren optimiert wurden, könnten JPEG sein, wo WebP heute kleiner wäre. Ein periodisches Audit fängt Format- und Kompressionsdrift ab.

Wie auditiere ich die Bilder einer bestehenden Website?

Führen Sie einen Crawl durch (Lighthouse oder ein Tool wie Screaming Frog), um jedes Bild mit seiner Größe und Dimension zu auflisten, markieren Sie dann alle, die für ihren Anzeigebereich überdimensioniert sind, als JPEG bereitgestellt wurden, wo WebP kleiner wäre, oder denen Breiten-/Höhenattribute fehlen. Beheben Sie zuerst die größten Übeltäter – einige riesige Bilder machen normalerweise den Großteil des Seitengewichts aus. Führen Sie das Audit nach den Korrekturen erneut durch, um die Verbesserung zu bestätigen.