Die optimale Bildgröße für deine Website

Am Laptop - bildgroessen

Was ist die ideale Bildgröße für Webseiten?

Im Header empfehle ich dir als Bildgröße 1920px Breite und höchstens 1080px Höhe, das ist das Full-HD Format (Auflösung). Weitere gängige Bildgrößen sind: 800x600px, 1024x768px, 1280x720px Richtwerte Bildgrößen

Welche Dateigröße für Bilder?

So klein wie möglich! Richtlinie für Webseiten-Bilder zwischen 50 und 300 KB. Komprimiere jedes Bild individuell und wäge Qualität und Ladezeit ab. Richtwerte Dateigröße

Welches Bildformat sollte ich wählen?

Das Bildformat hängt vom Einsatzzweck ab. JPEGs eignen sich gut für Fotos, während PNG für Bilder mit Transparenz oder Illustrationen geeignet ist. WebP wird zunehmend unterstützt, ist aber mit älteren Browsern nicht kompatibel. Bildformate Unterschied

Wie JPGs komprimieren?

Ein schneller Weg JPGs zu komprimieren, ohne dabei stark an Bildqualität einzubüßen sind Online-Tools wie tinypng.com oder der Imagecompressor von Websiteplanet Bilder verkleinern so funktioniert's

 

Was ist Bildauflösung?

Die Bildauflösung bezieht sich darauf, wie viele Bildpunkte (Pixel) pro Zentimeter (ppcm) oder pro Zoll (ppi) vorhanden sind. Je mehr Bildpunkte desto schärfer ist dein Bild. Bei der Auflösung geht es aber auch um die Auflösung der Endgeräte mehr erfahren

Wovon hängt die Bildgröße für deine Website ab?

Die Bildgröße bezieht sich immer auf dein Webseiten-Layout. Was bedeutet das

Wie beeinflusst die Bildgröße die Ladegeschwindigkeit der Webseite?

Die Dateigröße eines Bildes, nicht die Abmessungen (Breite und Höhe), hat den größten Einfluss auf die Ladegeschwindigkeit einer Webseite. Die Dateigröße wird durch die Menge an Informationen beeinflusst – also wie viele Details, Farben und Strukturen das Bild enthält. In manchen Fällen kann daher ein größeres Bild (in den Abmessungen) mit weniger Detail und Komplexität eine kleinere Dateigröße haben und schneller laden als ein kleineres, aber detailreiches Bild.

Wie beeinflusst die Bildgröße SEO - Suchmaschinenoptimierung?

Bilder mit großen Dateigrößen erhöhen die Ladezeit der Webseite, was sich negativ auf das Ranking auswirken kann. Kleiner SEO-Tipp: Benenne Bilddateien mit aussagekräftigen, beschreibenden Namen und füge Alt-Texte dazu. Diese Beschreibungen helfen Suchmaschinen und Screenreadern, den Inhalt der Bilder zu verstehen und ihre Relevanz für Suchanfragen zu bewerten. Der ALT-Text sollte genau das beschreiben, was auf dem Bild zu sehen ist. Zum Beispiel: „Eine Frau, die einen Hund spazieren führt.“

Richtwerte Bildgröße und Dateigröße

Die Übersicht ist natürlich nur ein Richtwert und sollte immer nach Anforderung deiner Webseite und der Bildqualität abgestimmt sein. Komprimiere deine Bilder immer bis an die Schmerzgrenze. Je kleiner desto bessere Ladezeiten:

1920x1080px für Kopfbilder, das Full-HD-Format (die Höhe variiert nach Layout) auch hier solltest du die Balance zwischen Qualität und Ladezeit finden.
Richtwert: 80-350 KB

1280x720px diese Größe eignet sich für Bilder die innerhalb des Inhalts sind und wirken sollen.
Richtwert: 70-250 KB

800x600px diese Bilder werden oft im Inhalt verwendet und sollten daher nicht zu groß sein, um die Ladezeiten nicht negativ zu beeinflussen.
Richtwert: 40-180 KB

100x100px bis 300x300px meistens Thumbnails oder Icons. Sie sollten besonders klein sein, um schnelle Ladezeiten zu gewährleisten, da oft viele davon auf einer Seite angezeigt werden.
Richtwert: 10-100 KB

Am Schluss, weil ich nicht ganz überzeugt bin: 2560x 1440px 16:9 Breitbildformat für bildschirmfüllende Kopfbilder (Header-Bilder). Manche schwören drauf, da die Bildschirme immer größer werden. Das würde ich aber nur machen, wenn du für die kleineren Bildschirme auch kleinere Bilder laden kannst!
Richtwert: 100-450 KB

Wenn du ein Theme nutzt, kannst du in der Regel in der Dateiverwaltung deines CMS (Content-Management-Systems) schauen, wie groß das aktuell genutzte Bild ist und dementsprechend deines anpassen.

Welches Bildformat für Webseiten?

Hier eine Zusammenfassung mit den wichtigsten Fakten zu Bildformaten für Websites. Ich persönlich nutze für Fotos JPGs, für Darstellungen, die eine Transparenz haben PNG und wenn es geht, für Icons SVG.

JPG (JPEG)

  • Verlustbehaftete Kompression: Bei der Reduzierung der Dateigröße kann ein Teil der Bildqualität verloren gehen.
  • Keine Unterstützung für Transparenz: JPG-Bilder können keine transparenten Bereiche enthalten.
  • Universell einsetzbar: Weit verbreitet und von allen Webbrowsern und Bildbearbeitungsprogrammen unterstützt.
  • Kleinere Dateigröße im Vergleich zu PNG: Ideal für Fotos und Bilder mit vielen Farben und Details.

PNG

  • Verlustfreie Kompression: Behält die ursprüngliche Bildqualität bei, ohne Daten zu verlieren.
  • Unterstützt Transparenz: Perfekt für Bilder mit transparenten Hintergründen oder teiltransparenten Elementen.
  • Größere Dateigröße im Vergleich zu JPG: Aufgrund der verlustfreien Kompression sind PNG-Dateien größer.
  • Nicht ideal für komplexe Fotos: Aufgrund der größeren Dateigröße weniger geeignet für Fotos mit vielen Farben und Strukturen.
  • PNG-8: Für einfache Grafiken mit begrenzten Farben, unterstützt 256 Farben.
  • PNG-24: Für komplexere Grafiken mit mehr Farben und gleichmäßigem, transparentem Verlauf.

SVG (Scalable Vector Graphics)

  • Vektorbasiertes Format: Perfekt für Logos, Icons und einfache Illustrationen, da es unabhängig von der Auflösung skaliert werden kann.
  • Breite Unterstützung: Wird von allen gängigen Browsern unterstützt.
  • Nicht geeignet für komplexe Bilder: Vektorformate sind weniger geeignet für detailreiche Fotos und Bilder mit vielen Farbabstufungen.

WebP

  • Moderneres Bildformat: Bietet sowohl verlustfreie als auch verlustbehaftete Kompression.
  • Kleinere Dateigröße bei hoher Qualität: Bietet eine bessere Kompression als JPEG, was zu schnelleren Ladezeiten führt.
  • Unterstützt Transparenz und Animation: Kann transparente und animierte Bilder darstellen, was JPEG nicht kann.
  • Unterstützung durch moderne Browser: Wird von den meisten aktuellen Browsern unterstützt.
Header Bildschirmbreite
Bildgröße und Dateigröße

Bilder komprimieren

Bilder zu komprimieren und damit die Dateigröße klein zu halten ist wichtig, um eine möglichst schnelle Ladezeit deiner Website zu gewährleisten. Es gibt zwei Arten Bilder zu komprimieren: eine verlustfreie und eine verlustbehaftete Komprimierung. Einleuchtend, dass verlustfrei das Bild in seiner Qualität belässt und die Dateigröße nur wenig reduziert.

Bei der verlustbehafteten werden die Farb- und Helligkeitsinformationen der Bildpunkte vereinfacht. Ähnliche Farben erhalten zum Beispiel den gleichen Farbwert, wodurch die Farbvielfalt reduziert wird. Details gehen dabei vielleicht verloren, aber die wahrgenommene Bildqualität bleibt erhalten. Je mehr du diese Qualität reduzierst, desto kleiner wird die Dateigröße.

Bilder, die sehr viele Farben enthalten oder Strukturen wie zum Beispiel ein Wald, sind schwierig auf eine geringe Dateigröße zu bringen. Wie weit du die Qualität reduzierst solltest du deshalb immer von Bild zu Bild entscheiden.

Zu den gängigsten Bildbearbeitungs­programmen gehören Adobe Photoshop, GIMP oder Pixlr.

Online-Tools mit denen du sogar noch mehr komprimieren kannst sind:

www.tinypng.com

www.websiteplanet.com/

www.compressor.io

www.squoosh.app

Das besondere an diesen Tools ist, dass sie zusätzlich auch Metadaten aus den Bildern entfernen, dadurch können die Bilder bei mehr Qualität komprimiert werden.

Bildauflösung Darstellung der Qualität

Die Bildauflösung

Die Bildauflösung ist wie viele Bildpunkte auf einem bestimmten Platz verteilt sind. Je mehr Bildpunkte desto schärfer, desto detailreicher ist das Bild. Moderne Geräte, egal ob Laptop mit hoher Auflösung, Tablets, oder Smartphones, können sehr hohe Bildschirmauflösungen haben. Ein iPhone 15 beispielsweise hat eine Auflösung von 2796x1290 Pixel.

Das bedeutet, dass nicht die Geräteart, sondern deren Auflösung ausschlaggebend für die Darstellung deines Bildes ist. Abzuwägen ist deshalb welche Bildauflösung ein gutes Mittelmaß ist und ob es zukünftig sinnvoll ist, Bilder für die mobile Darstellung zu verkleinern. Tendenziell entscheide ich mich für größere Bilder, da fast jeder ein modernes Smartphone hat und sehr viele eine Website auch über das Smartphone besuchen.

Wovon hängt die Bildgröße für deine Website ab?

Von der Breite, die dein Webseiten-Layout hat. Falls du ein fertiges Theme, zum Beispiel von Wordpress oder eine andere Website-Vorlage nutzt, ist das Layout mit einer bestimmten Breite vordefiniert. Je nach Design gibt es Bilder und Texte, die die komplette Breite des Bildschirms einnehmen, aber auch Varianten, die rechts und links Raum haben. Da es unglaublich viele unterschiedliche Bildschirme und Geräte gibt, auf denen eine Website dargestellt werden muss, werden Websites so programmiert, dass sie sich anpassen können. Das nennt man responsive Webdesign. Das funktioniert indem man die Maße in Prozent angibt, also zum Beispiel 100% Breite oder 75% Breite. Die Breite bezieht sich dann auf den Bildschirm, der zur Verfügung steht.

Webseitenlayout unterschiedliche Breiten

Viele modernen Websites haben im Header Bilder, die über die gesamte Breite gehen, das Layout ist dafür auf eine maximale Breite von 100% eingestellt. Bei einem 4K-Monitor würde das bedeuten, dass dein Bild 4000px breit sein müsste. Das wäre wirklich riesig - für die Darstellungsqualität zwar super, aber für die Ladezeit richtig schlecht. Deshalb solltest du hier den Kompromiss eingehen, den auch Profis machen. Die meisten nutzen 1920px Breite, die Full-HD Auflösung, damit kannst du eine gute Qualität liefern und die Ladezeit im Griff behalten.

Wie ist das mit den anderen Bildgrößen? So gut wie immer sind die Bilder in den Inhaltsbereichen kleiner. Bild und Text ist dann oft nebeneinander. Da die meistens Webseiten-Layouts mit einer maximalen Breite eingestellt sind, kommst du in der Regel mit Bildgrößen von 1280x720px unproblematisch hin.

Denk bitte aber daran, dass nicht die Bildgröße, also die Abmessung, allein ausschlaggebend für Ladezeiten ist! Achte immer auch auf die Dateigröße (Kilobytes KB).

Du fragst dich, wie du das alles hinbekommst? Starte mit dem Website Workshop.

Mit dem Website Workshop hast du einen einfachen und schnellen Einstieg in die Sichtbarkeit im Internet. Du erhältst eine fertig gestaltete, benutzerfreundliche Website, auf der du nur noch deine eigenen Texte und Bilder einfügen musst – ideal für Anfängerinnen, die unkompliziert und ohne technisches Vorwissen starten möchten.

Du erhältst Anleitungen für deine Content-Erstellung und wertvolle Tipps, um deine Inhalte optimal zu präsentieren. Schritt für Schritt gehen wir deine Inhalte durch und integrieren sie gemeinsam. Am Ende besitzt du eine professionelle Website, die nicht nur schön aussieht, sondern auch alle wichtigen Aspekte berücksichtigt, um bei Google gefunden zu werden. Und klar - wenn du Fragen zu deinen Bildgrößen hast, lösen wir die auch!

Fazit

Wenn ich für Kund:innen Websites prüfe, ist ein Kriterium, warum die Website langsam lädt, fast immer auch falsche Datei- und Bildgrößen. Deshalb achte unbedingt darauf deine Bilder zu komprimieren. Schnellere Ladezeiten geben deinen Leseren und Leserinnen nicht nur eine bessere Nutzererfahrung, sondern hilft dir bei Google besser gerankt zu werden. Nutze entsprechende Tools und ein modernes CMS, um deine Bilder optimal für deine Website anzupassen.

Wenn du bereits eine Website hast und dich über lange Ladezeiten ärgerst, kontaktiere mich für einem Website-Check. Du bekommst eine umfassende Auswertung und Empfehlungen zur Optimierung deines ganzen Webauftritts.

Christina Martens von go hooray - online sichtbar werden

Christina Martens

Meer, Wind, meinen Job, den ich seit fast 30 Jahren mache. Alles Dinge, die ich liebe und mit Leidenschaft lebe.

 

go hooray gibt es damit du, auch wenn du noch nie etwas mit Webseiten zu tun hattest, eine Website bekommst, die du selbst anpassen kannst, dich zeigt und dich richtig stolz macht. Mehr zu mir...