Website-Bilder optimieren: vor dem Veröffentlichen prüfen

Zuerst prüfen

Beginne mit dem, was der Browser lädt

Design-Dateien und Bilderordner zeigen nicht, was Nutzer wirklich bekommen. Der Browser zeigt, welche Bild-URL lädt, wie groß sie angezeigt wird, ob die Seite Platz reserviert und ob eine große Datei dort genutzt wird, wo eine kleine reichen würde.

Bildplan

Plane jedes wichtige Bild vor der Konvertierung

Ein Bildplan trennt diesen Leitfaden von den Konverter-Artikeln. Er fragt, was jeder Bildbereich braucht: Größe, Ladereihenfolge, Fallback, Rolle in den Metadaten und eine letzte Prüfung, ob die Seite die richtige Datei nutzt.

Wenn der Plan zeigt, dass Dateien neue Versionen brauchen, nutze Leitfaden zur Bildkonvertierung für den nächsten Schritt. Nutze JPG-zu-WebP-Leitfaden für normale WebP-Arbeit und den AVIF-Leitfaden nur für große Fotos, die noch kleiner werden müssen.

Bildgrößen

Lege klare Größen für jeden Bildbereich fest

Responsive Bilder funktionieren nur, wenn der HTML-Code zum Layout passt. Miss den Bereich, wähle wenige sinnvolle Breiten, reserviere das Seitenverhältnis und sende kein großes Original, nur weil es schon existiert.

Einfache Prüfung: Wenn eine 360-px-Karte eine 2400-px-Datei lädt, ist Kompression nicht das Hauptproblem. Die Seite braucht eine kleinere Bildversion oder der HTML-Code zeigt auf die falsche Datei.

Ladereihenfolge

Lade das erste Bild bewusst

Das Bild im ersten sichtbaren Bereich braucht andere Regeln als Bilder weiter unten. Finde das wahrscheinliche LCP-Bild, vermeide dort versehentliches Lazy Loading und halte Bilder weiter unten ruhig, bis sie gebraucht werden.

1. 1

   LCP-Bild benennen

   Wenn das erste wichtige Bild wahrscheinlich zum Largest Contentful Paint wird, lade es nicht versehentlich per Lazy Loading.

2. 2

   Bilder weiter unten ruhig halten

   Bilder unterhalb des ersten sichtbaren Bereichs sollten normalerweise Lazy Loading und async decoding nutzen.

3. 3

   CSS-Hintergründe prüfen

   Ein zugeschnittener Hintergrund kann trotzdem eine riesige Datei laden. Nutze eine passend große Datei für den sichtbaren Bereich.

4. 4

   Wiederholte Anfragen prüfen

   Ein kleines Kartenbild wird teuer, wenn dieselbe zu große Datei dutzendfach wiederholt wird.

HTML

Nutze responsives HTML für den gemessenen Bereich

Bei wichtigen Bildern soll klar sein, was der Browser wählen kann. Das Beispiel zeigt Breiten, sizes, feste Maße und einen Fallback. Passe das Ladeverhalten an den Bereich an, nicht an Gewohnheit.

<picture>
  <source
    type="image/avif"
    srcset="/images/article/product-640.avif 640w,
            /images/article/product-960.avif 960w,
            /images/article/product-1280.avif 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <source
    type="image/webp"
    srcset="/images/article/product-640.webp 640w,
            /images/article/product-960.webp 960w,
            /images/article/product-1280.webp 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <img
    src="/images/article/product-960.jpg"
    alt="Dashboard-Screenshot mit dem Upload-Ablauf"
    width="960"
    height="540"
    loading="lazy"
    decoding="async" />
</picture>

Suche und Teilen

Bilder, Alternativtext und Metadaten sollen dieselbe Geschichte erzählen

Bild-SEO bedeutet nicht nur Keywords. Das sichtbare Bild, naher Text, hilfreicher Alternativtext, Open Graph-Tags und JSON-LD-Bildlinks sollen dieselbe Seite klar beschreiben. Dekorative Bilder bleiben dekorativ.

Wenn die Prüfung schwache Vorschauen fürs Teilen findet, arbeite mit Open-Graph-Bilder-Guide weiter. Wenn Schema und Meta-Tags das Problem sind, nutze Leitfaden zu Blazor-Metadaten, damit JSON-LD und Seitendaten zusammenpassen.

Schritte

Eine einfache Bildprüfung für jede Seite

1. 1

   Echte Seite öffnen

   Beginne mit der aktuellen URL, nicht mit dem Bilderordner. Notiere die Bilder, die wirklich geladen werden.

2. 2

   Bildplan erstellen

   Notiere für jedes wichtige Bild Zielbreite, Seitenverhältnis, Ladereihenfolge, Fallback und Rolle in den Metadaten.

3. 3

   Nur geänderte Dateien konvertieren

   Nutze Konvertierungswerkzeuge nur für Dateien, die die Prüfung gefunden hat, statt den ganzen Medienordner neu zu exportieren.

4. 4

   HTML und Metadaten aktualisieren

   Lass srcset, sizes, Maße, Open Graph und JSON-LD-Bildlinks auf die vorbereiteten Dateien zeigen.

5. 5

   Browser-Ergebnis prüfen

   Prüfe die Seite, Netzwerkanfragen, Metadaten fürs Teilen, strukturierte Daten und mobiles Layout.

6. 6

   Regel fürs nächste Mal festhalten

   Dokumentiere die Bildentscheidungen, damit spätere Updates nicht wieder mit Raten beginnen.

Checkliste

Bild-Checkliste vor dem Veröffentlichen

Nutze diese Liste, bevor ein Artikel, eine Landingpage oder eine Produktseite live geht. Sie findet Seitenprobleme, die reine Konvertierung übersieht.