Der Spickzettel zur Medienoptimierung von Websites 2025: Bild-, Video- und Asset-Größen, die tatsächlich funktionieren
Im Jahr 2025 ist die Leistung von Websites kein technischer Nebensache mehr - sie ist ein zentraler Bestandteil des Designs. Suchranking, Konversionsrate und UX hängen alle davon ab, wie schnell Ihre Seiten geladen werden. Wir haben die neuesten Daten und Best Practices überprüft, um einen zukunftssicheren Leitfaden zur Optimierung visueller Ressourcen zu erstellen. Hier erfahren Sie alles über die Größe von Bildern, Videos und Medien - sowohl jetzt als auch in Zukunft.
🖼️ Bildoptimierung
| Anwendungsfall |
Empfohlene Maximalabmessungen |
Ziel-Dateigröße |
Bestes Format |
Hinweise |
| Hero / Banner |
1920 px Breite |
≤ 400 kB |
WebP / AVIF |
Für Retina-Displays können über srcset 2×-Versionen bereitgestellt werden. |
| Inline- / Blogbilder |
1200 px lange Kante |
≤ 200 kB |
WebP / JPEG |
Ausgewogen für responsive Layouts. |
| Thumbnails |
300–600 px |
≤ 100 kB |
WebP / PNG |
Erwägen Sie unscharfe Platzhalter für Lazy Loading. |
| Icons / Logos |
Vektor (SVG) |
Sehr klein |
SVG |
Skaliert unendlich, ideal für hochauflösende Bildschirme. |
💡 Profi-Tipps:
- Benutzen Sie ansprechende Bilder (srcset, sizes), um die kleinste benötigte Version zu liefern.
- Intelligent komprimieren — Tools wie Squoosh, TinyPNG, oder Cloudinär bewirken Wunder.
- EXIF-/-Metadaten entfernen.
- Ziel insgesamt: < 1,5 MB pro Seite für schnelle Leistung.
🎥 Videooptimierung
| Anwendungsfall |
Auflösung |
Maximale Dateigröße |
Hinweise |
| Hero- / Hintergrundvideo |
720p (1280×720) |
≤ 5 MB |
Schleife, stumm, Autoplay, < 10 s Dauer. |
| Eingebettetes / Inhaltsvideo |
1080p (1920×1080) |
Adaptiv |
Nutzen Sie YouTube, Vimeo oder HLS-Streaming. |
| Animation / Mikro-Animation |
Lottie / WebM |
≤ 1 MB |
Vektoranimationen sind leichter und klarer als GIFs. |
Was ist 2025 zu tun?
WebP ist das Bildformat, das Websites leichter und schneller gemacht hat - ohne dass irgendjemand den Qualitätsunterschied bemerkt hat. Es ist effizient, zukunftssicher und wird vollständig unterstützt. Wenn Ihre Website immer noch JPEG oder PNG verwendet, lassen Sie Geschwindigkeits- und SEO-Punkte auf dem Tisch liegen.
Was ist das WebP-Format?
WebP ist ein modernes Bildformat, das von Google entwickelt wurde und im Vergleich zu älteren Formaten wie JPEG und PNG eine überlegene Komprimierung bietet - ohne sichtbar an Qualität zu verlieren. Stellen Sie es sich als das „intelligente Komprimierungsformat“ für das moderne Web vor: kleinere Dateien, schnellere Ladezeiten, gleiche visuelle Qualität.
So funktioniert WebP
WebP unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung, was bedeutet, dass es fast jeden Bildtyp au Ihrer Website verarbeiten kann:
| Funktion |
Beschreibung |
| Verlustbehaftete Kompression |
Ähnlich wie JPEG — verwirft einige Daten, um die Datei zu verkleinern, sieht aber nahezu identisch mit dem Original aus. Ideal für Fotos. |
| Verlustfreie Kompression |
Wie PNG — behält jedes Pixel bei, ideal für Logos, UI-Icons und Grafiken. |
| Transparenz (Alpha-Kanal) |
Wie PNG — unterstützt transparente Hintergründe, selbst im verlustbehafteten Modus. |
| Animation |
Wie GIF — unterstützt mehrere Frames für animierte WebP-Bilder (bei deutlich kleineren Dateigrößen). |
| Metadaten-Unterstützung |
Behält EXIF-, ICC-Farbprofile und XMP-Metadaten bei, falls erforderlich. |
📊 Leistungsvorteile
| Format |
Kompressionseffizienz |
Transparenz |
Animation |
Browser-Unterstützung (2025) |
| JPEG |
Basislinie |
❌ |
❌ |
✅ |
| PNG |
Hoch (verlustfrei) |
✅ |
❌ |
✅ |
| GIF |
Sehr gering |
✅ |
✅ |
✅ |
| WebP |
~25–35 % kleiner als JPEG (bei gleicher Qualität) |
✅ |
✅ |
✅ (Alle gängigen Browser) |
| AVIF (Next-Gen) |
~45–50 % kleiner als JPEG |
✅ |
✅ |
✅ (wird zunehmend unterstützt) |
In der Praxis ist ein WebP-Bild, das identisch mit einem 200 kB-JPEG aussieht, möglicherweise nur 120 kB oder weniger groß - ein direkter Leistungsgewinn.
Browser- und Plattformunterstützung (Stand 2025)
✅ Volle Unterstützung für:
- Chrome, Edge, Firefox, Safari, Opera, Brave
- iOS (Safari 14+), Android, macOS, Windows, Linux
- WordPress, Shopify, Wix, Webflow, Squarespace und alle modernen CMS-Plattformen.
WebP ist also sicher für den Produktionseinsatz auf praktisch jeder modernen Website.
Warum sollten Sie WebP auf Ihrer Website verwenden
- Schnelleres Laden von Seiten → Bessere UX und SEO.
- Reduzierte Bandbreite → Niedrigere Hosting- und CDN-Kosten.
- Better Core Web Vitals → Verbessert das Google-Ranking.
- Geringerer Speicherbedarf → Spart Serverplatz.
- Universeller Support → Keine „Fallback Image“ -Hacks mehr erforderlich.
Eine typische Website, die alle JPEGS/PNGs in WebP konvertiert, verzeichnet sofort 20— 40% schnellere Ladezeiten.
Nach 2025: Was kommt als Nächstes?
- AVIF & JPEG XL wird in allen Browsern zur Standardeinstellung.
- Dynamische Bildbereitstellung (Kantengrößenänderung) wird in CDNs Standard sein.
- KI-gestütztes Hochskalieren kann ultraleichte Geräte ermöglichen, die in HD aussehen.
- Leistungsbudgets wird Teil von Designsystemen sein, nicht nur von Dev Ops.