Image Size: Definition, Web-Optimierung, Best Practices

Was ist Image Size?

"Image Size" im Web ist ein verwirrender Term, weil es drei verschiedene Dinge bedeutet:

• Dimensions (Intrinsic Size) — Width × Height in Pixeln.
• File Size (Byte Size) — wie viele KB/MB.
• Display Size (Rendered Size) — wie groß das Image im Browser-Viewport erscheint.

Jedes davon ist unabhängig optimierbar.

Warum Image Size matters

Empfohlene File-Sizes

Image-Format-Vergleich

Responsive Images

<picture>
  <source srcset="hero-800.avif 800w, hero-1200.avif 1200w"
          type="image/avif">
  <source srcset="hero-800.webp 800w, hero-1200.webp 1200w"
          type="image/webp">
  <img src="hero-1200.jpg"
       width="1200" height="675"
       loading="lazy">
</picture>

Image-Size Best Practices

• Width + Height-Attrs spezifizieren.
• Aggressiv komprimieren.
• Moderne Formate nutzen.
• Auf Display-Size resizen.
• srcset für Responsive.
• Below-Fold lazy-loaden.
• Hero-Image preloaden.
• CDN mit Image-Optimization.
• Metadata strippen.
• SVG für Icons + Logos.

Häufige Fallstricke

• Full-Resolution an Mobile servieren.
• Kein srcset.
• Width/Height fehlen.
• PNG für Photos.
• JPEG für Transparency.
• Unoptimierte Formate.
• Decoded-Memory-Bloat.

Tools zur Optimierung

FAQ: Image Size

Was ist das beste Image-Format?

Für Photos: AVIF mit WebP und JPEG-Fallbacks.

Wie klein sollte mein Hero-Image sein?

Unter 200KB ideal.

Sollte ich alle Images lazy-loaden?

Nein — nur Below-the-Fold.

Unterschied zwischen Intrinsic-Size und Display-Size?

Intrinsic = aktuelle Pixel-Dimensions. Display = wie groß im CSS.

Warum produziert PNG riesige Files für Photos?

PNG ist lossless.

Wie funktioniert srcset?

Browser pickt das beste Image basierend auf Viewport.

Maximale akzeptable Image-File-Size?

1MB ist hoch; 2MB+ ist wasteful.

Image-Performance mit LoadFocus testen

LoadFocus läuft Lighthouse-Audits aus 25+ Regionen, um oversized Images zu flaggen. Registrieren bei loadfocus.com/signup.