Bildgrößen Website: Praxis‑Richtwerte für Format und Ladezeit

Bildgrößen Website: Praxis‑Richtwerte für Format und Ladezeit

WebP ist die richtige Default‑Wahl für Fotos, AVIF lohnt sich gezielt für das größte Bild im sichtbaren Bereich, SVG für Logos. Als Faustregel: Herobilder 1600–1920 Pixel Breite, 80–150 KB; Content‑Bilder 800–1200 Pixel, 40–80 KB; Thumbnails um 400 Pixel, 8–20 KB. Dazu gehören responsive Varianten über srcset und sizes sowie Lazy Loading für alles, was unterhalb des ersten Bildschirms liegt.

Kurz gesagt:

• Für Herobilder werden 1600 bis 1920 Pixel Breite mit einer Dateigröße von 80 bis 150 KB empfohlen, um Ladezeit und Qualität optimal zu balancieren.
• Das Einsatzgebiet bestimmt die Bildgröße; Beispiel: Content-Bilder benötigen 800 bis 1200 Pixel bei 40 bis 80 KB, Thumbnails etwa 400 Pixel bei 8 bis 20 KB.
• WebP ist das Standardformat für Fotos, während AVIF gezielt für das wichtigste Bild im sichtbaren Bereich sinnvoll ist, SVG bleibt für Logos und Icons optimal.
• Responsive Bilder sollten mit srcset, sizes und picture‑Elementen ausgeliefert werden, um Layoutsprünge zu vermeiden und die Ladezeit auf Mobilgeräten zu verbessern.
• Das größte Bild im sichtbaren Bereich, meist das Hero‑Bild, darf nicht lazy geladen werden; stattdessen benutzt man preload und fetchpriority‑Attributen, um es frühzeitig zu laden.

Inhaltsverzeichnis

• Bildgrößen Website: Richtwerte für Pixelmaße und Dateigröße
• Welches Bildformat passt zu welchem Einsatzzweck?
• Wie liefert man Bilder responsiv ohne Layoutsprünge aus?
• Warum ist Lazy Loading nicht für jedes Bild richtig?
• Praxis‑Workflow: Vom Foto zur fertigen Website-Datei
• Checkliste: In welcher Reihenfolge optimiert man Bilder?
• Wie setzt Netivoo Bildoptimierung bei Handwerker‑Websites um?
• Warum Bildgrößen bei Handwerker‑Websites direkt über Anfragen entscheiden
• Website in 7 Tagen: Bildoptimierung ohne eigenen Aufwand
• Weiterlesen: Standards, Benchmarks und Tools
• Quellen
• FAQ

Bildgrößen Website: Richtwerte für Pixelmaße und Dateigröße

Die passende Bildgröße für eine Website hängt fast immer von der Platzierung ab, nicht vom Bild selbst. Ein Herobild braucht andere Maße als ein Thumbnail in einer Produktübersicht, und wer hier pauschal vorgeht, verschenkt entweder Qualität oder Ladezeit.

Bilder machen durchschnittlich 50 bis 70 % des gesamten Seitengewichts aus. Genau deshalb wirkt sich jede falsch gewählte Pixelbreite direkt auf die Ladezeit aus, oft stärker als Skripte oder Schriftarten zusammen.

Diese Werte orientieren sich an typischen Container‑Breiten moderner Layouts. Ein Herobild wird selten breiter als der Viewport dargestellt, deshalb reicht 1920 Pixel fast immer aus, selbst auf großen Monitoren. Eine höhere Pixelbreite bläht die Datei auf, ohne dass ein Nutzer den Unterschied sieht.

Die Auflösung in DPI oder PPI spielt für Web-Bilder praktisch keine Rolle. Browser rendern nach Pixelmaßen, nicht nach Druckauflösung. Wichtig ist allein, wie viele Pixel eine Datei tatsächlich mitbringt, im Verhältnis zur Anzeigegröße auf dem Bildschirm.

Welches Bildformat passt zu welchem Einsatzzweck?

Fotos gehören auf Websites fast immer ins Format WebP, mit AVIF als gezielter Ausnahme für die wichtigsten Bilder. Logos und Icons dagegen bleiben Vektorgrafiken, weil sie bei jeder Größe scharf bleiben.

• WebP: Der pragmatische Standard für Fotos, Produktbilder und Content‑Grafiken. Spart gegenüber JPEG bei vergleichbarer Qualität rund 25 bis 35 % Dateigröße.
• AVIF: Die stärkste Kompression, 20 bis 50 % kleiner als WebP oder JPEG je nach Motiv. Sinnvoll für das Bild im größten Content‑Bereich (LCP), weniger sinnvoll für hunderte Bilder in einer Galerie, weil die Kodierung mehr Rechenzeit kostet.
• JPEG: Nur noch als Fallback für ältere Browser, die WebP nicht unterstützen. Als primäres Format inzwischen überholt.
• PNG: Ausschließlich für Grafiken mit Transparenz, die keine Vektorform zulassen, etwa Screenshots mit scharfen Kanten.
• SVG: Die richtige Wahl für Logos, Icons und einfache Illustrationen. Skaliert verlustfrei und bleibt oft unter 5 KB.

Profi-Tipp: Wandeln Sie alte PNG‑Icons in SVG um, wo immer es geht. Ein PNG‑Logo mit 40 KB wird als SVG oft zu einer Datei unter 3 KB, ganz ohne Qualitätsverlust bei jeder Bildschirmgröße.

Ein pragmatischer Fahrplan, der sich in fast jedem Projekt bewährt: WebP als Default, AVIF gezielt für die wichtigsten LCP-Kandidaten, SVG für Logos. Wer diese drei Regeln konsequent anwendet, deckt neun von zehn Bildsituationen auf einer typischen Website ab.

Wie liefert man Bilder responsiv ohne Layoutsprünge aus?

Ein einziges Bild in maximaler Größe an alle Geräte auszuliefern ist die häufigste Ursache für unnötig lange Ladezeiten auf dem Smartphone. Die Lösung heißt srcset und sizes, ergänzt durch das picture‑Element für Formatfallbacks.

Das sizes‑Attribut beschreibt, wie breit ein Bild im Layout tatsächlich dargestellt wird, nicht wie breit die Bilddatei ist. Fehlt diese Angabe oder ist sie falsch, nimmt der Browser standardmäßig die volle Fensterbreite an und lädt dadurch oft eine viel zu große Datei, selbst auf einem schmalen Mobilbildschirm.

Ein typisches Beispiel für ein Herobild, das auf großen Screens maximal 1280 Pixel breit dargestellt wird:

<img
  src="hero-1280.webp"
  srcset="hero-640.webp 640w, hero-1024.webp 1024w, hero-1280.webp 1280w, hero-1920.webp 1920w"
  sizes="(max-width: 1280px) 100vw, 1280px"
  width="1280" height="720"
  alt="Handwerker bei der Arbeit"
>

Für Formatfallbacks kommt das picture‑Element zum Einsatz, damit moderne Browser AVIF oder WebP bekommen und ältere trotzdem ein funktionierendes JPEG:

<picture>
  <source srcset="bild.avif" type="image/avif">
  <source srcset="bild.webp" type="image/webp">
  <img src="bild.jpg" width="1200" height="800" alt="Referenzprojekt">
</picture>

Ein paar Punkte, die dabei leicht übersehen werden:

• width und height (oder CSS aspect-ratio) müssen immer gesetzt sein, sonst reserviert der Browser keinen Platz und die Seite springt beim Laden, was den Cumulative Layout Shift verschlechtert.
• sizes sollte sich an echten CSS‑Breakpoints orientieren, nicht an Wunschwerten, sonst wählt der Browser die falsche srcset‑Variante aus.
• Art‑Direction, also unterschiedliche Bildausschnitte für Mobile und Desktop, gehört ebenfalls ins picture‑Element über mehrere source‑Elemente mit media‑Attribut.

Warum ist Lazy Loading nicht für jedes Bild richtig?

Lazy Loading spart Bandbreite, aber ausgerechnet beim wichtigsten Bild einer Seite schadet es der Ladezeit. Das größte Bild im sichtbaren Bereich, meist das Herobild, bestimmt den Largest Contentful Paint (LCP) und darf deshalb nicht lazy geladen werden.

Für dieses eine Bild gilt die entgegengesetzte Regel: preload und fetchpriority="high" setzen, damit der Browser es so früh wie möglich anfordert.

<link rel="preload" as="image" href="hero-1280.webp" fetchpriority="high">

Für alles unterhalb des ersten Bildschirms gilt dagegen klassisches Lazy Loading:

• LCP‑Bild: kein loading="lazy", dafür preload und fetchpriority="high".

• Bilder direkt im sichtbaren Bereich, aber nicht das größte: normal laden, ohne Priorität zu erzwingen.

• Alles unterhalb des Folds: loading="lazy" setzen, das entlastet die Erstladezeit deutlich.

• Karussells und Slider: nur die erste Folie sofort laden, ab Folie zwei konsequent lazy.

Lazy Loading des LCP-Bildes verzögert genau die Metrik, die es verbessern soll, während preload und fetchpriority den LCP messbar senken. Wer diese beiden Regeln vertauscht, verschenkt oft den größten Teil des möglichen Performance‑Gewinns. Lighthouse und WebPageTest zeigen beide Effekte direkt im Bericht, meist unter den Einträgen zu Bildformaten und Renderzeit.

Praxis‑Workflow: Vom Foto zur fertigen Website-Datei

Ein wiederholbarer Prozess verhindert, dass Bildoptimierung bei jedem neuen Projekt wieder von null beginnt. Fünf Schritte reichen für die meisten Handwerker‑ und Unternehmenswebsites aus.

1. Zuschnitt und Bildausschnitt auf das tatsächlich benötigte Seitenverhältnis, statt das Originalfoto unverändert hochzuladen.
2. Farbprofil auf sRGB konvertieren, weil andere Profile auf Bildschirmen falsch dargestellt werden können.
3. Qualitätswert zwischen 75 und 85 setzen, denn dieser Bereich liefert meist das beste Verhältnis zwischen Dateigröße und sichtbarer Qualität.
4. Metadaten entfernen (EXIF, GPS‑Daten, Kamerainformationen), das spart zusätzliches Gewicht und schützt gleichzeitig die Privatsphäre.
5. Varianten in mehreren Breiten erzeugen für srcset, plus WebP und AVIF parallel zum Fallback‑JPEG.

Für einzelne Bilder reicht ein Tool wie Squoosh völlig aus. Für ganze Projekte lohnt sich Automatisierung: Sharp in einer Build‑Pipeline, ImageOptim auf dem Mac für schnelle Stichproben, oder ein CDN mit automatischen Transforms, das Format und Größe je Anfrage selbst wählt.

Profi-Tipp: Legen Sie einen raw‑Ordner mit den Originaldateien an. Ein Build‑Schritt erzeugt daraus automatisch WebP und AVIF in festen Breiten, und die Pipeline bricht ab, sobald eine Datei ein festgelegtes KB‑Limit überschreitet.

Checkliste: In welcher Reihenfolge optimiert man Bilder?

Wer wenig Zeit hat, sollte nicht wahllos Bilder komprimieren, sondern in der Reihenfolge vorgehen, die den größten Effekt auf die Ladezeit hat.

1. LCP‑Bild zuerst. Passende Pixelbreite wählen, preload und fetchpriority setzen, Qualität auf 75–85 KB‑optimiert speichern.
2. Restlicher sichtbarer Bereich. srcset und sizes ergänzen, damit mobile Geräte nicht die Desktop‑Datei laden.
3. Rest der Seite. Lazy Loading konsequent setzen, Logos auf SVG prüfen, alte PNGs identifizieren und ersetzen.

Vorher/Nachher‑Messung mit Lighthouse oder WebPageTest zeigt sofort, ob sich die Änderungen auf LCP und das Gesamtgewicht der Seite auswirken. Ein Wert unter 2,5 Sekunden für LCP gilt als guter Zielbereich, das Gesamtbildgewicht sollte auf einer typischen Unterseite selten über 500 KB liegen.

Wie setzt Netivoo Bildoptimierung bei Handwerker‑Websites um?

Bei Netivoo läuft Bildoptimierung nicht als nachträglicher Schritt, sondern als fester Teil des siebentägigen Website‑Prozesses für Handwerksbetriebe. Jedes Referenzfoto, jede Galerie und jede Leistungsseite bekommt vor dem Upload definierte Grenzen für Pixelbreite und Dateigewicht, angepasst an Elektriker‑, Dachdecker‑ oder Tischlerprojekte mit vielen Bildern in der Galerie.

Die mobile Darstellung bekommt dabei besondere Priorität, weil Kunden Handwerksbetriebe überwiegend über das Smartphone suchen. Hosting und Wartung laufen weiter, damit neue Referenzfotos auch nach dem Launch in der richtigen Größe eingebunden werden, statt die Seite über Monate langsamer zu machen.

Warum Bildgrößen bei Handwerker‑Websites direkt über Anfragen entscheiden

Handwerker‑Websites leben von Bildergalerien, mehr als von Text. Ein Kunde entscheidet oft innerhalb von Sekunden anhand der Referenzfotos, ob ein Betrieb vertrauenswürdig wirkt, und genau dieser Moment kippt, wenn die Galerie ruckelt oder Bilder erst nach drei Sekunden erscheinen.

Ich sehe bei vielen kleinen Websites den gleichen Fehler: Alle Bilder werden gleich behandelt, egal ob es sich um ein Leistungsseiten‑Symbolbild oder um eine 40‑Bilder‑Galerie mit abgeschlossenen Projekten handelt. Dabei brauchen beide völlig unterschiedliche Regeln. Eine Galerie verträgt aggressive Kompression und Thumbnails, eine einzelne Leistungsseite verdient ein größeres, hochwertigeres Bild.

Und Bildoptimierung ist kein Projekt, das man einmal abschließt. Neue Referenzfotos, neue Saisonangebote, neue Leistungsseiten kommen laufend dazu, jedes davon kann die Ladezeit wieder verschlechtern, wenn niemand die Größen im Blick behält.

— Jonas

Website in 7 Tagen: Bildoptimierung ohne eigenen Aufwand

Netivoo übernimmt genau die Arbeit, die dieser Artikel beschreibt, direkt für Handwerksbetriebe, statt sie Inhabern zusätzlich zum Tagesgeschäft aufzubürden. Statt selbst Pixelbreiten zu berechnen, Formate zu testen und srcset‑Varianten zu erzeugen, bekommen Kunden eine fertige, mobiloptimierte Website für Handwerker innerhalb von etwa sieben Tagen, inklusive korrekt skalierter Bilder für Referenzgalerien und Leistungsseiten.

Der Ablauf ist bewusst schlank gehalten: ein direkter Ansprechpartner klärt Umfang und Inhalte, danach entsteht die Website ohne endlose Rückfragen zu technischen Details wie Bildformaten oder Kompression. Hosting und laufende Wartung sind Teil des Angebots, sodass neue Fotos auch nach dem Launch in der richtigen Größe eingebunden bleiben, siehe dazu auch die separate Seite zu Website Pflege & Wartung. Wer aktuell noch eine veraltete oder gar keine Website betreibt, kann eine Anfrage über die Startseite für Handwerksbetriebe stellen und bekommt innerhalb kurzer Zeit eine konkrete Rückmeldung.

Weiterlesen: Standards, Benchmarks und Tools

Wer tiefer einsteigen will, findet bei MDN die offizielle Formatübersicht für WebP, AVIF und Co. Die Lighthouse-Dokumentation von Chrome erklärt, wie moderne Formate in die Performance‑Bewertung einfließen. Für rechtliche Fragen rund um die Website selbst lohnt sich ein Blick auf die Rechtskonformität für Startup-Websites.

Quellen

• Bilder optimieren für Website & SEO: WebP, AVIF, Lazy Loading & Lighthouse 2026
• Best Image Format for Web: AVIF, WebP, PNG or JPEG in 2026
• Serve images in modern formats | Lighthouse | Chrome for Developers

FAQ

Welches Bildformat ist besser, 4:3 oder 16:9?

Das hängt vom Einsatzzweck ab. Für die Ladezeit spielt das Seitenverhältnis selbst keine Rolle, entscheidend bleiben Pixelbreite und Format.

Welche Größe hat eine Website?

Eine typische Unterseite sollte insgesamt unter 500 KB an Bildgewicht bleiben, wobei Bilder oft 50 bis 70 % des gesamten Seitengewichts ausmachen. Die Gesamtgröße einer Seite variiert stark je nach Anzahl der Bilder und eingebetteten Skripte.

Welches Format für die Startseite?

Für Fotos und Herobilder auf der Startseite eignet sich WebP als Standard, mit AVIF für das größte Bild im sichtbaren Bereich, wenn die Kodierung vom Workflow her machbar ist. Logos gehören als SVG eingebunden, damit sie auf jedem Bildschirm scharf bleiben.

Welche Standard-Bildgrößen gibt es für Websites?

Gängige Richtwerte sind 1600 bis 1920 Pixel für Herobilder, 800 bis 1200 Pixel für Content‑Bilder im Beitrag und rund 400 Pixel für Thumbnails. Über srcset werden zusätzlich mehrere Zwischengrößen bereitgestellt, damit jedes Gerät die passende Variante lädt statt einer einzigen festen Größe.

Muss ich Bilder für Retina‑Displays extra optimieren?

Ja, für hochauflösende Displays lohnt sich eine zusätzliche srcset‑Variante mit doppelter Pixeldichte, damit Fotos auf Retina‑ oder HiDPI‑Bildschirmen nicht unscharf wirken. Der Browser wählt die passende Variante automatisch anhand von Pixeldichte und Anzeigebreite aus.

Empfehlungen

• Bilder komprimieren für Ihre Website: schnell & mobiloptimiert
• Bildrechte auf der Handwerker-Website: Was wirklich gilt