Bilder fürs Web optimieren: Formate, responsive Größen und Ladeprioritäten

Optimieren Sie Bilder mit einem geeigneten Format, sinnvollen Größenvarianten und einer Auswahl, die zum Seitenlayout passt. Reservieren Sie den Bildplatz vor dem Laden, verzögern Sie tatsächlich außerhalb des Sichtbereichs liegende Bilder und laden Sie das wahrscheinliche LCP-Bild früh. Komprimierung ist nur ein Teil: Eine übergroße Variante oder ein verspäteter Abruf kann den Vorteil eines besseren Encoders aufzehren.

Beginnen Sie mit der tatsächlich geladenen Datei

Prüfen Sie vor Änderungen am Export eine repräsentative Seite im Network-Panel. Laden Sie sie mit Mobil- und Desktop-Viewport neu. Notieren Sie angeforderte URL, Übertragungsgröße, dargestellte und intrinsische Abmessungen sowie Anfragebeginn. Eine kleine Vorschau kann das Original laden, obwohl das CMS passende Varianten erzeugt hat.

Bestimmen Sie das LCP-Bild je Layout. Auf einer Bildschirmgröße kann es das Titelbild, auf einer anderen das Produktbild sein. Der LCP-Optimierungsleitfaden trennt Entdeckungsverzögerung, Übertragung und Darstellung, damit nicht jedes langsame Bild als Komprimierungsproblem behandelt wird.

Bewahren Sie Originale getrennt von ausgelieferten Dateien auf. So lassen sich Varianten ohne wiederholte verlustbehaftete Komprimierung erzeugen. Prüfen Sie Fotografien, Screenshots, Illustrationen, Transparenzen und Bilder mit Text. Ein für Landschaften brauchbares Profil kann Produktbeschriftungen oder Diagramme beschädigen.

Unterscheiden Sie informative Bilder und Dekoration. Inhaltlich wichtige Bilder benötigen zweckbezogene Alternativtexte; dekorative Bilder können einen leeren Alternativtext erhalten. Ersetzen Sie ein semantisches Bild nicht allein wegen eines Audits durch einen CSS-Hintergrund. Hintergründe eignen sich für Dekoration, verändern aber Entdeckung und Barrierefreiheit. Bei allein verlinkten Bildern muss der zugängliche Name das Ziel erklären. Prüfen Sie das gemeinsam mit Größe und Ladeverhalten.

Dokumentieren Sie vor einer flächendeckenden Umstellung den Ausgangszustand mit Screenshots und frühen Bildanfragen. Dieses Vorgehen ist eine Inspektion, kein Benchmark: Ein anderer Dateisuffix garantiert keine pauschale Einsparung.

Wählen Sie das Format passend zum Inhalt

Entscheiden Sie nach Bildinhalt und Auslieferungsanforderungen. AVIF und WebP sind nützliche moderne Optionen; das Ergebnis hängt jedoch von Bild, Encoder, Einstellungen und unterstützten Browsern ab. JPEG und PNG bleiben für bestimmte Abläufe sinnvoll. SVG löst ein anderes Problem als Rasterkomprimierung.

Diese Tabelle ist ein Ausgangspunkt für den Vergleich tatsächlicher Dateien.

Ein Foto in einer SVG-Hülle wird keine kompakte Vektorgrafik. Auch ein verlustfreies Format beseitigt keine übergroßen Abmessungen. Untersuchen Sie das Bild, bevor Sie seine Erweiterung zum Hauptproblem erklären.

Qualitätswerte sind encoderabhängig. 70 ist nicht objektiv gleich 70 in einem anderen Werkzeug. Keine Einstellung garantiert bei jedem Motiv unsichtbare Verluste. Vergleichen Sie in vorgesehener Anzeigegröße und bei höherer Pixeldichte. Achten Sie auf Haare, Text, Kanten, Verläufe und Produktdetails. Legen Sie eine nachvollziehbare Qualitätsgrenze fest, bevor Sie Bytes minimieren.

Entfernen Sie gegebenenfalls unnötige Metadaten aus öffentlichen Ableitungen, erhalten Sie aber erforderliche Attribution und Farbverarbeitung. Bewahren Sie die farbverwaltete Quelle auf. Prüfen Sie das ausgelieferte Ergebnis in Zielbrowsern, denn Editoransicht und Produktionspipeline können abweichen.

Beschreiben Sie verfügbare Breiten mit srcset

CSS-Breite und benötigte physische Pixelzahl sind nicht identisch. Auf einem hochauflösenden Display kann der Browser für 600 CSS-Pixel ein breiteres Bild sinnvoll auswählen. Verbieten Sie deshalb nicht grundsätzlich intrinsische Breiten oberhalb der dargestellten CSS-Breite.

Bei Breitenangaben nennt srcset die vorhandenen Dateien und ihre tatsächlichen Pixelbreiten. sizes beschreibt die erwartete Darstellungsbreite unter den jeweiligen Medienbedingungen. Der Browser verbindet diese Angaben mit Geräte- und Nutzungskontext und trifft die endgültige Auswahl. Das Markup erzwingt nicht bei jedem Breakpoint eine bestimmte Datei.

Das Beispiel verwendet unter 992 Pixeln jeweils 16 Pixel Seitenabstand und darüber höchstens 960 Pixel Bildbreite. Dateien und deklarierte Breiten müssen übereinstimmen.

<style>
  .article-image {
    display: block;
    width: min(100%, 960px);
    height: auto;
  }
  .article-content {
    width: calc(100% - 32px);
    max-width: 960px;
    margin-inline: auto;
  }
</style>
<div class="article-content">
  <img class="article-image"
       src="/images/coast-960.webp"
       srcset="/images/coast-480.webp 480w,
               /images/coast-960.webp 960w,
               /images/coast-1920.webp 1920w"
       sizes="(max-width: 991px) calc(100vw - 32px), 960px"
       width="1920" height="1080"
       alt="Rocky coastline beside a calm blue sea">
</div>

Der Breakpoint folgt der Geometrie: 992 minus 32 ergibt 960. Halten Sie CSS und sizes bei Designänderungen synchron. Ein unpassendes sizes="100vw" in einer schmalen Karte kann eine unnötig große Datei auslösen.

Prüfen Sie mit currentSrc die Auswahl. Verwenden Sie eine neue Navigation, da der Browser beim Verkleinern ein größeres gecachtes Bild weiterverwenden kann. Testen Sie realistische Pixeldichten statt nur ein Desktopfenster zu verschieben.

Verwenden Sie picture für Formate und Bildausschnitte

picture ergänzt ausdrückliche Auswahlregeln. Das hilft bei Formaten und Art Direction, wenn ein mobiler Ausschnitt die Komposition statt nur die Pixelzahl verändert. Das erforderliche img trägt weiterhin Alternativtext und Rückfallquelle.

Das Beispiel bietet zwei moderne Kodierungen und JPEG für dieselbe Komposition. Alle Varianten haben dasselbe Seitenverhältnis.

<picture>
  <source type="image/avif"
          srcset="/images/garden-800.avif 800w,
                  /images/garden-1600.avif 1600w"
          sizes="(max-width: 800px) 100vw, 800px">
  <source type="image/webp"
          srcset="/images/garden-800.webp 800w,
                  /images/garden-1600.webp 1600w"
          sizes="(max-width: 800px) 100vw, 800px">
  <img src="/images/garden-800.jpg"
       srcset="/images/garden-800.jpg 800w,
               /images/garden-1600.jpg 1600w"
       sizes="(max-width: 800px) 100vw, 800px"
       width="1600" height="1000"
       style="display:block;width:min(100%,800px);height:auto"
       alt="Raised garden beds arranged along a stone path">
</picture>

Der Browser prüft die Quellen der Reihe nach und wählt die erste passende unterstützte Option. Zusätzliche Formate sollten durch Bilder und Zielgruppe gerechtfertigt sein: Erzeugung, Speicherung und Invalidierung verursachen Betriebsaufwand.

Für Art Direction ergänzen Sie media und den passenden Ausschnitt. Ändert sich das Seitenverhältnis, reservieren Sie am Breakpoint die richtige Form durch Quelldimensionen oder CSS. Ein Desktopverhältnis für einen hochformatigen Mobilausschnitt kann Bewegung oder Leerraum erzeugen. Kontrollieren Sie Motivposition, Text und Produktdetails in jedem Ausschnitt.

Reservieren Sie Platz und starten Sie LCP-Anfragen früh

width und height geben dem Browser vor dem Download ein Seitenverhältnis. Responsives CSS kann das Bild weiterhin skalieren. Die Attribute erzwingen nicht die tatsächliche Anzeigegröße, sondern liefern früh Layoutinformationen.

Fehlende Abmessungen können beim Eintreffen des Bilds nachfolgenden Inhalt verschieben. Der Leitfaden zu Layoutverschiebungen erklärt den Fehler. Prüfen Sie auch Container, Karussells und Platzhalter: Ein korrekt dimensioniertes img kann sich bewegen, wenn sein Elterncontainer nach JavaScript-Initialisierung die Höhe ändert.

Nutzen Sie loading="lazy" für Bilder ausreichend unterhalb des ersten Viewports. Natives Lazy Loading arbeitet mit Browserheuristiken und bedeutet nicht exakt „erst laden, wenn sichtbar“. Der Browser kann vorzeitig laden, um beim Scrollen Leerstellen zu vermeiden.

Das Beispiel für ein weiter unten liegendes Bild reserviert Platz und erlaubt asynchrone Dekodierung.

<img src="/images/workshop-960.webp"
     width="960" height="640"
     loading="lazy" decoding="async"
     style="max-width:100%;height:auto"
     alt="Hand tools organized on a workshop wall">

Laden Sie das wahrscheinliche LCP-Bild nicht verzögert. Seine echte URL sollte möglichst im ersten HTML stehen, nicht nur in einem JavaScript-Datenattribut. fetchpriority="high" signalisiert Wichtigkeit, kann aber ein noch unentdecktes Bild nicht reparieren.

Das Titelbild wird hier unmittelbar und mit erhöhter Priorität angefordert.

<img src="/images/hero-1600.webp"
     srcset="/images/hero-800.webp 800w,
             /images/hero-1600.webp 1600w"
     sizes="100vw"
     width="1600" height="900"
     loading="eager" fetchpriority="high"
     style="display:block;width:100%;height:auto"
     alt="Sunlight falling across a quiet mountain valley">

decoding="async" ist ein Hinweis zur Abstimmung von Dekodierung und Darstellung, keine Komprimierung und keine LCP-Garantie. Prüfen Sie den visuellen Kontext und die Aufzeichnung. Geben Sie nicht jedem Bild hohe Priorität, denn Anfragen teilen weiterhin Bandbreite und Rechenleistung.

Gestalten Sie die Bildverarbeitung wiederholbar

Ein Bild-CDN kann Größen, Ausschnitte und Kodierungen erzeugen und über verteilte Caches liefern. Das hilft nur, wenn Vorlagen geeignete Varianten anfordern. Ein geografisch näher ausgeliefertes Original korrigiert keinen falschen responsiven Bildbedarf.

Definieren Sie eine kleine Gruppe von Breiten für wiederkehrende Layouts. Jede ganzzahlige Breite zu erzeugen erschwert Cache, Verarbeitung und Speicherung. Format und Transformation gehören zur Cacheidentität. Prüfen Sie formatabhängige Antworten für unterschiedliche unterstützte Clients.

Planen Sie einen Rückfall bei fehlgeschlagener Transformation. Testen Sie neue und vorhandene Bilder, Transparenzen, ungewöhnliche Proportionen und geschützte Medien. Private Originale dürfen nicht versehentlich über öffentliche Transformations-URLs zugänglich werden. Nutzen Sie bei Bedarf dokumentierte Ursprungsbeschränkungen und signierte URLs.

CMS-Automatisierung muss Dateien und korrektes Markup erzeugen. Die Mediathek kann Varianten erstellen, während eine individuelle Vorlage nur das Original ausgibt. Umgekehrt kann die Vorlage nach einer Einstellungsänderung noch nicht erzeugte Varianten anfordern. Daraus entstehen versteckte Rückfälle, Bildfehler oder zu große Antworten.

Prüfen Sie für WordPress zunächst den Core-Web-Vitals-Plattformleitfaden, bevor Sie ein weiteres Plugin installieren. Für Shopify nutzen Sie den Leitfaden zur Shopgeschwindigkeit und kontrollieren die Bild-Tags des Themes. Vermeiden Sie mehrere Systeme, die dieselbe Ableitung erneut komprimieren.

Prüfen Sie vorhandene Seiten in sinnvoller Reihenfolge

Dokumentieren Sie Vorlage, Viewport, Pixeldichte, Bild-URL und Verarbeitungseinstellungen neben dem visuellen Vergleich, damit andere die Prüfung wiederholen können. Nehmen Sie ein Beispiel mit langer Bildunterschrift und eines ohne auf, da das Umfeld den Bildplatz verändern kann. Benennen Sie Zuständigkeiten für Originalupload, Ableitungen und Vorlagenausgabe. Ändert das Design die verfügbare Breite, aktualisieren Sie den Datensatz und prüfen Sie das Markup erneut. Bewahren Sie das freigegebene Paar aus Original und Ableitung als Referenz für spätere Profile auf. So werden Verschlechterungen erkennbar, ohne sich auf die Erinnerung an das frühere Aussehen zu verlassen.

Beginnen Sie mit einer repräsentativen häufig besuchten Vorlage und ihrem LCP-Bild. Beheben Sie fehlende echte Quellen, versehentliches Lazy Loading und falsche Größen vor kleinen Komprimierungsunterschieden. Danach folgen wiederkehrende Vorschaubilder und tiefer liegende Galerien, bei denen Vorlagenänderungen viele Seiten verbessern können.

Vergleichen Sie Original und Ableitung im Bildersparnis-Rechner mit tatsächlichen Dateigrößen. Das Ergebnis beschreibt Bytes, keine garantierte Zeitersparnis. Netzwerk, Cache, Dekodierung und Ressourcenkonkurrenz bestimmen die Besuchswirkung.

Prüfen Sie schmale und breite Ansichten, leeren Cache und Wiederholungsbesuche. Scrollen Sie ganz nach unten, um verzögerte Bilder zu sehen. Kontrollieren Sie Alternativtexte, Ausschnitte, Transparenz und Stabilität. Kommt die kleinere Datei später an, untersuchen Sie erneut Entdeckung und Priorität.

Verankern Sie den Ablauf in der Ladezeitoptimierung: Originale erhalten, Ableitungen erzeugen, korrektes Markup ausgeben und ausgewählte Dateien nach Vorlagenänderungen prüfen. Das nächste sinnvolle Ergebnis ist eine überprüfte Bildpipeline für eine Vorlage mit nachvollziehbarer Qualität und dokumentiertem Anfrageverhalten.