Image Size: Definition, Web-Optimierung, Best Practices

Was ist Image Size?

"Image Size" (Bildgröße) meint im Web drei verschiedene Dinge: die Abmessungen in Pixeln (zum Beispiel 1920 x 1080), die Dateigröße in KB oder MB, die über das Netzwerk geht, und die Anzeigegröße, also wie groß das Bild auf der Seite in CSS-Pixeln gezeichnet wird. Jede kann für sich falsch sein und wird anders behoben.

Ein 4000 x 3000 Pixel großes Foto mit 8 MB, das als Vorschaubild mit 200 x 150 erscheint, verschwendet Bandbreite (die ganze Datei wird geladen) und CPU (der Browser skaliert herunter). Gute Bildoptimierung bringt alle drei in Ordnung.

Warum die Bildgröße wichtig ist

Ein Bild ist häufig das Largest-Contentful-Paint-Element, und laut web.dev gilt ein LCP von höchstens 2,5 Sekunden als gut. Fehlende Abmessungen sind eine häufige Ursache für Layout-Verschiebungen.

Das richtige Format wählen

Laut web.dev komprimieren WebP und AVIF in der Regel besser als ältere Formate und sollten wo möglich eingesetzt werden. Liefern Sie sie mit JPEG-Fallback über <picture> aus. Den Unterschied zwischen verlustbehafteter und verlustfreier Kompression erklärt ein eigener Eintrag.

Die passende Größe ausliefern

Mit srcset und sizes wählt der Browser den Kandidaten, der zum Anzeigeplatz und zur Bildschirmdichte passt, damit ein Smartphone nicht die Desktop-Datei lädt. Setzen Sie immer width und height: So kann der Browser Platz reservieren, bevor das Bild geladen ist.

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1200.avif 1200w"
          sizes="(max-width: 600px) 100vw, 1200px">
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1200.webp 1200w"
          sizes="(max-width: 600px) 100vw, 1200px">
  <img src="hero-1200.jpg" alt="Produkt-Dashboard"
       width="1200" height="675" decoding="async">
</picture>

Richtwerte für die Dateigröße

Das sind Arbeitsbudgets, keine Standards. Bewerten Sie sie an Ihrem gemessenen LCP, nicht an der Zahl.

Best Practices

• Auf die größte tatsächlich angezeigte Größe verkleinern und eine 2x-Version nur dort vorhalten, wo Bildschirme sie brauchen.
• Komprimieren: Eine verlustbehaftete Qualität von etwa 75 bis 85 ist oft kaum vom Original zu unterscheiden, prüfen Sie das aber an Ihren eigenen Bildern.
• loading="lazy" für Bilder unterhalb des sichtbaren Bereichs, aber nicht für das LCP-Bild. Lazy Loading verschiebt die Anfrage.
• Dem LCP-Bild fetchpriority="high" geben und es vorladen, wenn der Browser es spät entdeckt.
• Nicht benötigte Metadaten wie EXIF entfernen.
• Über ein CDN ausliefern, am besten mit Umwandlung und Skalierung auf Anfrage.

Häufige Fehler bei der Bildgröße

• Das volle Kamera-Original an jedes Gerät ausliefern.
• Kein srcset, sodass Smartphones Desktop-Dateien laden.
• PNG für Fotos: sehr große Dateien ohne sichtbaren Vorteil.
• JPEG für Logos oder alles, was Transparenz braucht.
• Das Hero-Bild per Lazy Loading laden, was den LCP verzögert.
• width und height weglassen.

Bildgewicht messen

Lighthouse meldet zu große Bilder mit dem Audit "Properly size images", das ein Bild beanstandet, wenn die dargestellte Größe mindestens 4 KiB kleiner ist als die tatsächliche. Das Page-Speed-Monitoring von LoadFocus führt Lighthouse-Audits planmäßig aus 25 Cloud-Regionen aus und verfolgt die Core Web Vitals, sodass ein schweres neues Hero-Bild als LCP-Rückschritt auffällt statt als Überraschung. Für Felddaten echter Nutzer gibt es den kostenlosen Core-Web-Vitals-Checker. Weiterlesen: warum Sie die Bilder Ihrer Website verbessern sollten und 10 Schritte für eine schnellere Website.

Häufige Fragen: Image Size

Welches Bildformat ist im Web am besten?

Für Fotos AVIF oder WebP mit JPEG-Fallback. Für Logos und Icons SVG. PNG, wenn Sie verlustfreie Details brauchen und eine größere Datei in Kauf nehmen.

Wie groß sollte ein Hero-Bild sein?

Es gibt keine feste Grenze. Unter etwa 200 KB ist ein gängiges Startbudget. Prüfen Sie es an Ihrem gemessenen LCP und passen Sie es an.

Soll ich jedes Bild per Lazy Loading laden?

Nein. Nur Bilder unterhalb des sichtbaren Bereichs. Das LCP-Bild sofort laden und dafür fetchpriority="high" erwägen.

Was ist der Unterschied zwischen intrinsischer Größe und Anzeigegröße?

Die intrinsische Größe sind die echten Pixelmaße des Bildes. Die Anzeigegröße ist, wie groß es in CSS-Pixeln gezeichnet wird. Der Browser skaliert, lädt aber trotzdem das ganze Originalbild.

Warum sind PNG-Fotos so groß?

PNG ist verlustfrei und behält jedes Pixel. Fotos haben viele Farbabstufungen, die verlustfreie Kompression kaum verkleinern kann, während JPEG, WebP und AVIF Details verwerfen, die das Auge kaum bemerkt.

Wie funktioniert srcset?

Sie listen dasselbe Bild in mehreren Breiten auf. Der Browser kombiniert die Anzeigebreite aus sizes mit der Bildschirmdichte und lädt den besten Kandidaten.