Bilder in passenden Abmessungen ausliefern

Cookbook: Ziel und Ergebnis

Bilder werden ungefähr in der größten tatsächlich benötigten Pixelgröße erzeugt; srcset liefert kleinere Kandidaten für kleinere Viewports. Originale mit 6.000 px werden nicht pauschal ausgeliefert.

Rezept: Schritt für Schritt

1. Maximale CSS-Breite des Bildcontainers je Breakpoint messen.
2. Maximal sinnvolle Device Pixel Ratio festlegen; für die meisten Webinhalte reichen 2×, weil höhere DPR bei großen Bildern kaum sichtbar gewinnt.
3. Benötigte Kandidaten über WordPress-Bildgrößen erzeugen und im Markup srcset/sizes prüfen.
4. Dateigröße und sichtbare Qualität bei realem Zielmaß vergleichen, danach Altbestände bei Bedarf neu generieren.

Rechenweg oder Entscheidungsregel

benötigte Pixelbreite = CSS-Breite × DPR\nBeispiel: 720 CSS-px × 2 = 1.440 Pixel

sizes muss die Layoutrealität beschreiben; ein falsches 100vw kann trotz vieler Varianten zu große Bilder auswählen.

Praxisbeispiel

Hero: Desktopcontainer 1.200 CSS-px, Mobil 358 CSS-px. Sinnvolle Kandidaten etwa 480, 768, 1.200, 1.600 und 2.400 px. Für 1.200 px bei DPR 2 ist 2.400 px die Obergrenze; das 5.500-px-Original bleibt nur als Quelle.

Prüfen, ob es funktioniert

• DevTools zeigt je Viewport einen passenden currentSrc-Kandidaten.
• Keine sichtbare Unschärfe bei Ziel-DPR und Zoom-Normalfall.
• Übertragene Bildbytes und LCP-Ressourcenzeit sinken.

Rollback

Neue Bildgrößenregistrierung zurücksetzen und betroffene Medienvarianten aus Backup bzw. Original neu erzeugen. Originaldateien niemals als ersten Bereinigungsschritt löschen.

Das Problem

Dateigröße hängt stark von Pixelzahl, Inhalt, Qualität und Format ab. WordPress erzeugt Bild-Zwischengrößen und ergänzt bei korrekter Einbindung srcset/sizes, damit der Browser eine passende Variante wählen kann. Direkte URLs zum Original umgehen diesen Vorteil.

Empfehlung

1. Originale schon vor dem Upload auf eine sinnvolle maximale Kantenlänge begrenzen.
2. In Templates wp_get_attachment_image() oder Bildblöcke statt handgebauter Original-URLs nutzen.
3. Nur tatsächlich benötigte Bildgrößen registrieren; nach Änderungen Altbestand kontrolliert regenerieren.
4. Mit DevTools prüfen, welche Ressource der Browser bei mehreren Viewports wirklich lädt.

Abhängigkeiten

Crop-Verhältnis und in CSS gerenderte Größe müssen zu sizes passen. Ein CDN-Bilddienst kann dynamische Varianten liefern, ist aber nicht zwingend. Zu viele generierte Größen erhöhen Speicher- und Backupbedarf.

Erfolgskontrolle

Vergleiche übertragene Bytes und visuelle Qualität auf Mobil- und Retina-Displays. Achte darauf, dass Thumbnails nach einer Regeneration nicht falsch beschnitten sind.

Quellen und Prüfstand

• WordPress: Bilder im Theme-Handbuch
• Google: Responsive Images

Inhalt fachlich geprüft am 17. August 2026. Konkrete Werte sind Ausgangspunkte, keine Universaldosierung.