Wie man Bilder für das Web skaliert: Größen, Retina und srcset

Zuletzt aktualisiert: June 28, 2026

Ich habe dasselbe Hero-Foto auf vier Arten skaliert und den Unterschied gemessen: Ein 4.2MB Kamera-JPEG, der unverändert in einem 800px Anzeigefenster angezeigt wurde, wurde zu einem WebP von 94KB ohne sichtbaren Qualitätsverlust. Das Skalieren von Bildern für das Web ist der größte Gewinner bei der Seitenlast und hängt meistens von vier Entscheidungen ab: Anzeigegröße, Retina-Faktor, Format und Kompression. Dies ist der Workflow, den ich auf jeder Website anwende, die ich veröffentliche.

Kurzantwort: Wie sollte man Bilder für das Web skalieren?

Skalieren Sie jedes Bild auf ungefähr doppelte Breite des gerenderten Bereichs (der Retina-Faktor), exportieren Sie es als WebP, komprimieren Sie es auf Qualität 80 und liefern Sie eine kurze srcset-Treppe, damit Smartphones und Laptops jeweils eine passende Datei erhalten. Für ein Full-Width Hero, das bei 1920px angezeigt wird, reicht in der Regel ein einziges WebP von 1920 bis 2560px mit Qualität 80 aus. Wenn Sie dies ignorieren, zwingen Sie jedes Gerät zum Herunterladen von Pixeln in Desktop-Auflösung.

Wie groß sollte ein Webbild eigentlich sein?

Die richtige Größe ist die Anzeigegröße, nicht die Quellgröße. Öffnen Sie DevTools, inspizieren Sie das Bild und lesen Sie die größte CSS-Box-Breite ab, die es je über verschiedene Breakpoints hinweg einnimmt, und exportieren Sie dann auf diese Breite multipliziert mit Ihrem Dichteziel.

Für die meisten Artikel- und Produktbilder, die in einem vorhersehbaren Bereich landen: Ich messe jeden Slot, bevor ich exportiere, denn zu raten führt dazu, dass ein 4000px Foto in eine 600px Spalte landet.

Lassen Sie CSS niemals das Downscaling übernehmen. Ein <img>, das auf width: 400px gestylt ist, lädt immer die gesamte Datei herunter – der Browser wirft die zusätzlichen Pixel weg, nachdem die Bytes bereits übertragen wurden. Skalieren Sie zuerst die Quelle und verlassen Sie sich dann bei CSS nur für das Layout.

Schritt-für-Schritt: Mein Skalierungs-Workflow

Dies ist die genaue Abfolge, die ich durchlaufe. Ich habe es gegen ein Lighthouse Image Audit getestet und es besteht durchgehend den Check „korrekt dimensionierte Bilder“.

• Messen Sie die größte gerenderte Breite mit DevTools.
• Multiplizieren Sie mit 2 für Retina (3x nur für dichte Handy-Hero-Aufnahmen).
• Skalieren Sie herunter mit einem hochwertigen Filter (Lanczos).
• Exportieren Sie als WebP bei Qualität 80, reduzieren Sie auf 75, falls die Datei immer noch zu groß ist.
• Generieren Sie eine srcset-Treppe für responsive Slots.
• Komprimieren Sie erneut, wenn die Datei immer noch über 200KB liegt.

from PIL import Image

def resize_for_web(src, out, max_width=1440, quality=80):
    img = Image.open(src)
    if img.width > max_width:
        ratio = max_width / img.width
        img = img.resize((max_width, int(img.height * ratio)),
                         Image.LANCZOS)
    img.save(out, "WEBP", quality=quality)

Als ich dies gemessen habe, wurde ein 4000x2667 Foto (4.2MB JPEG) zu einem 1440x960 WebP von 94KB – eine Reduzierung von 98 Prozent ohne sichtbaren Schärfheitsverlust auf einem Standard-Display. Die tieferen Regeln für die Beibehaltung von Details bei aggressivem Downscaling finden Sie in keep quality while resizing.

Retina und 2x: Braucht man wirklich doppelte Pixel?

Überwiegend ja, für alles, was Benutzer genau betrachten. Ein 2x-Bild packt viermal so viele Pixel in denselben physischen Raum, daher wirkt eine 1x-Datei unscharf. Die sichere Regel: Exportieren Sie für Inhaltsbilder mit dem 2x der CSS-Breite.

Wo ich diese Regel bewusst breche:

• Dekorative Hintergründe, die verschwimmen oder verblassen können, bleiben nahe bei 1x.
• Bilder unterhalb des sichtbaren Bereichs (Below-the-fold), bei denen die Schärfe weniger kritisch ist, können 1.5x verwenden.
• Icons und Logos sind besser als SVG, da sie unabhängig von der Auflösung sind.

Googles web.dev image guidance empfiehlt Dichte- oder Breitenbeschreibungen; Breitenbeschreibungen über srcset sind einfacher zu handhaben, daher halte ich mich daran.

Responsive Varianten mit srcset bereitstellen

Eine Datei pro Bild ist selten für jedes Gerät richtig. Ein Handy benötigt keine 1440px-Datei und ein 4K-Monitor sollte sich nicht mit einer 480px-Version zufriedengeben. srcset ermöglicht es Ihnen, mehrere Breiten anzubieten und lässt den Browser wählen.

<img
  src="hero-960.webp"
  srcset="hero-480.webp 480w, hero-720.webp 720w,
          hero-960.webp 960w, hero-1440.webp 1440w"
  sizes="(min-width: 900px) 720px, 92vw"
  alt="Hero-Illustration eines Stadtbildes bei Dämmerung"
  width="960" height="640" loading="lazy">

Das sizes-Attribut muss die Wahrheit über den gerenderten Slot sagen. Wenn Sie es auf den Standardwert 100vw belassen, geht der Browser davon aus, dass das Bild den gesamten Viewport einnimmt und lädt daher die größte Variante herunter. Die Entscheidung, welche Breiten generiert werden sollen, ist eine eigene Sache – die Methode, die ich zur Kürzung der Treppe verwende, finden Sie in responsive image breakpoints.

Dateigröße vs. Abmessungen: Was ist wichtiger?

Beides ist wichtig, aber aus unterschiedlichen Gründen. Die Abmessungen bestimmen die Pixelanzahl; Kompression und Format bestimmen die Bytes pro Pixel. Ein korrekt dimensioniertes Bild mit schlechter Kompression ist immer noch schwer, und ein winziges, aber zu stark komprimiertes Bild sieht kaputt aus.

Mein Ziel ist es, für die meisten Inhaltsbilder unter 200KB und für alles oberhalb des sichtbaren Bereichs (Above the Fold), das Largest Contentful Paint beeinflusst, unter 100KB zu bleiben. Wenn eine Datei diesen Wert überschreitet, ziehe ich zuerst den Hebel der Kompressionsqualität und dann das Format. Die Aufschlüsselung auf Byte-Ebene, wie die Kompression Gewicht reduziert, finden Sie in compress without losing quality.

Lighthouse kennzeichnet zu große Bilder als konkrete Gelegenheit. Führen Sie es über Chrome DevTools aus oder folgen Sie der Lighthouse documentation – das Audit „korrekt dimensionierte Bilder“ meldet genau, wie viele KB Sie verschwenden, indem Sie mehr Pixel liefern, als der Slot benötigt.

Das richtige Format wählen

Das Format ist dort, wo viele Bytes versteckt sind. Ich standardmäßig WebP für fast alles Fotografische und AVIF, wenn ich einen Fallback leisten kann. Die Abstimmung des Formats auf den Inhalt ist genauso wichtig wie die Abmessungen: ein PNG, das für ein Foto verwendet wird, ist schwerer als dieselbe Datei als WebP, ohne Vorteil zu bringen.

Der MDN responsive images guide behandelt das <picture> Element für die Bereitstellung von AVIF mit einem Fallback auf WebP oder JPEG. Ich greife nur zu <picture> zurück, wenn ich eine Formatverhandlung benötige; für einfache responsive Fotos reicht srcset allein aus.

Fehler, die ich bei der Überprüfung von Websites sehe

Wenn ich eine langsame Website überprüfe, wiederholen sich die Image-Probleme. Das sind diejenigen, die ich am häufigsten behebe.

• Hochladen von Kameraauflösungsdateien und deren Skalierung mit CSS herunter.
• Eine riesige Datei für jeden Breakpoint anstelle einer srcset-Treppe.
• Vergessen von width und height, was zu Layout-Verschiebungen führt.
• Das Belassen von sizes auf dem Standardwert, sodass der Browser die größte Datei greift.
• Jedes Bild eifrig laden, anstatt diejenigen unterhalb des sichtbaren Bereichs zu verzögern (deferring).

Letzteres ist kostenlose Performance. Das Muster für das Verzögern von Bildern außerhalb des Bildschirms wird in lazy loading images behandelt – fügen Sie loading="lazy" hinzu und der Browser überspringt Bilder, zu denen der Benutzer noch nicht gescrollt hat.

Zusammenfassung

Bevor ich ein Bild veröffentliche, gehe ich diese Liste durch: skaliert auf 2x die größte Anzeigegröße, exportiert als WebP, komprimiert unter 200KB, mit einer srcset-Treppe, einem wahrheitsgemäßen sizes-Attribut, expliziten Breite und Höhe, loading="lazy" unterhalb des sichtbaren Bereichs und beschreibendem Alt-Text.

Ein echter Vorbehalt: Das Skalieren ist der größte Hebel, aber es ist nicht die ganze Arbeit. Ich habe Teams gesehen, die Dimensionen perfektioniert haben und trotzdem langsame Seiten veröffentlicht haben, weil sie Dateien vom Ursprung ohne Caching, ohne CDN und ohne content-hashed Dateinamen geliefert haben. Messen Sie mit Lighthouse und realen Geräteprofilen und vertrauen Sie den Zahlen mehr als der Checkliste. Ein 94KB WebP, das der Browser bei jeder Navigation neu herunterlädt, ist immer noch ein 94KB Fehler.

Häufig gestellte Fragen

Wie groß sollte ein Hero-Bild für das Web sein?

Passen Sie die Anzeigegröße an: ungefähr 1600px breit für ein Full-Width Hero, 800–1200px für ein Inhaltsspaltenbild. Das Exportieren mit dem 2x der Anzeigegröße (für Retina) verdoppelt die Pixel; liefern Sie das richtige Format pro Gerät mit srcset, anstatt eine riesige Datei zu senden.

Brauche ich 2x Bilder für Retina-Bildschirme?

Für scharfe Grafiken und Hero-Fotos: Ja – Retina-Bildschirme zeigen sonst Weichheit. Für Bereiche unterhalb des sichtbaren Bereichs und dekorative Bilder reicht oft eine einzige 1x-Datei. Verwenden Sie srcset, um 1x- und 2x-Varianten zu liefern, damit Nicht-Retina-Geräte nicht die große Datei herunterladen.

Was ist wichtiger: Abmessungen oder Dateigröße?

Beides, aber die Dateigröße beeinflusst Core Web Vitals stärker. Skalieren Sie zuerst auf die Anzeigegrößen (eliminiert verschwendete Pixel), komprimieren Sie dann auf eine Zielqualität (eliminiert verschwendete Bytes). Der web speed guide behandelt die vollständige Reihenfolge.

Wie liefere ich responsive Varianten?

Verwenden Sie srcset mit größenbezogenen Quellen und einem sizes-Attribut, das die Anzeigebreite beschreibt, damit der Browser die richtige Datei pro Viewport auswählen kann. Generieren Sie jede Größe aus dem Master und lassen Sie den Browser wählen. Sehen Sie sich responsive images guide an.

Was ist srcset?

Ein HTML-Attribut, das mehrere Bildquellen in verschiedenen Größen auflistet und es dem Browser ermöglicht, die richtige nach Viewport zu wählen. Es liefert eine kleine Datei für einen kleinen Bildschirm und eine große Datei für einen großen Bildschirm, was Bytes spart. Sehen Sie sich responsive images guide an.

Was ist das sizes-Attribut?

Ein HTML-Attribut, das dem Browser mitteilt, wie breit das Bild bei jedem Breakpoint angezeigt wird, damit der Browser die richtige srcset-Quelle auswählen kann, bevor er herunterlädt. Ohne sizes rät der Browser. Kombinieren Sie srcset (die Quellen) mit sizes (den Anzeigebreiten) für responsive Bilder, die effizient heruntergeladen werden. Sehen Sie sich responsive images guide an.

Bildnachweise

• Ein MacBook auf einem Schreibtisch, das ein gestaltetes Website-Layout anzeigt — Foto von Tranmautritam auf Pexels
• Nahaufnahme eines Computerbildschirms, der Codezeilen anzeigt — Foto von Nemuel Sereti auf Pexels
• Ein Laptop-Bildschirm, der eine Website in einem Browser-Tab lädt — Foto von cottonbro studio auf Pexels