Zum Inhalt springen
pixvertoPixverto

Ideale Bildgrößen für Websites: Titelbild, Blog, Vorschaubilder und Retina

Die eine perfekte Bildgröße gibt es nicht, aber es gibt sinnvolle Bereiche. Zu groß, und Ihre Seite wird langsam. Zu klein, und Bilder wirken weich. Dieser Ratgeber erklärt die Logik, nennt praxisnahe Zahlen für gängige Einsatzzwecke und zeigt, wie Sie für Ihre eigene Website wählen.

Warum die Bildgröße wichtig ist

Zwei Dinge bestimmen, wie schwer ein Bild ist: wie viele Pixel es hat und wie stark es komprimiert ist. Die Pixel sind am wichtigsten. Ein Foto mit 4000 × 3000 hat 12 Millionen Pixel, eine Version mit 1200 × 900 dagegen etwa eine Million, ist also schon vor jeder Komprimierung ungefähr zwölfmal leichter.

Wird ein Bild in einer 800-Pixel-Spalte angezeigt, bringen die darüber hinausgehenden Pixel kaum etwas Sichtbares, aber die Besucher zahlen trotzdem für das Herunterladen. Im anderen Extrem wird ein zu kleines Bild vom Browser gestreckt und wirkt unscharf. Die richtige Größe zu wählen ist die erste und größte Ersparnis.

Die Regel: an die Anzeigegröße anpassen

Ein Bild sollte etwa so breit sein, wie es gezeigt wird. Bei Bildschirmen mit hoher Pixeldichte, die Inhalte mit doppelt so vielen physischen Pixeln darstellen, genügt bis etwa zur doppelten Anzeigebreite. Darüber hinaus fügen Sie Gewicht hinzu, ohne sichtbare Details zu gewinnen.

Um die Anzeigegröße zu finden, öffnen Sie die Entwicklertools Ihres Browsers, untersuchen ein Bild und vergleichen seine dargestellte Größe mit der Originalgröße. Ist die Datei viel größer als das, was auf dem Bildschirm erscheint, können Sie sie gefahrlos verkleinern.

Zwischen größer und kleiner abwägen

Größere Bilder

  • Vorteile: schärfer auf großen und hochauflösenden Bildschirmen und Spielraum zum Zoomen auf Produktseiten.
  • Nachteile: langsamere Seiten, mehr Bandbreite und Speicher sowie ein schlechteres Erlebnis auf Handys.

Kleinere Bilder

  • Vorteile: schnelles Laden, geringere Kosten und bessere Werte bei der Seitengeschwindigkeit.
  • Nachteile: weiche oder unscharfe Ergebnisse, wenn das Bild größer als seine Größe angezeigt wird.

Ein guter Kompromiss ist, auf die größte realistische Darstellung des Bildes hin zu dimensionieren und mit responsiven Bildern mehrere Größen für verschiedene Bildschirme anzubieten.

Schritt für Schritt: die richtige Größe wählen und erstellen

  1. 1Finden Sie heraus, wo das Bild erscheint, und notieren Sie die größte Anzeigebreite.
  2. 2Wählen Sie die Zielbreite zwischen dem Ein- und Zweifachen dieser Breite, mit der Tabelle oben als Orientierung.
  3. 3Skalieren Sie vom Original mit Bild skalieren und behalten Sie das Seitenverhältnis bei. Muss sich die Form ändern, schneiden Sie zuerst mit Bild zuschneiden zu.
  4. 4Komprimieren Sie mit Bild komprimieren bei Qualität 75 bis 85. Brauchen Sie eine feste Grenze, findet Auf 100 KB komprimieren die beste Qualität, die passt.
  5. 5Prüfen Sie die Dateigröße anhand der Zielwerte. Ist sie noch zu hoch, verringern Sie lieber die Abmessungen weiter, statt die Qualität zu stark zu senken.
  6. 6Verwenden Sie ein modernes Format, wo es geht. Siehe den Formatratgeber.
  7. 7Setzen Sie width und height in Ihrem HTML auf die endgültigen Abmessungen.

Seitenverhältnisse und Einheitlichkeit

Wählen Sie einige Seitenverhältnisse und bleiben Sie dabei: 16:9 für Banner, 3:2 oder 4:3 für Fotos, 1:1 für Avatare und Produktraster. Einheitliche Verhältnisse halten Layouts aufgeräumt und helfen, Layoutverschiebungen zu vermeiden. Hintergrundwissen zu Auflösung und DPI finden Sie unter Bildauflösung, DPI und PPI erklärt.

Häufige Fehler

  • Kamera-Originale hochladen und sich darauf verlassen, dass der Browser sie verkleinert.
  • Kleine Bilder vergrößern, um einen größeren Platz zu füllen, was sie nur unscharf macht.
  • Überall eine einzige riesige Größe verwenden, auch für Vorschaubilder.
  • Das Gewicht nur über niedrigere Qualität senken, statt zuerst die Pixelmaße zu verringern.
  • Vergessen, dass Mobilgeräte bei den meisten Websites die Hauptzielgruppe sind.

Häufig gestellte Fragen

Wie groß sollte das Titelbild einer Website sein?

Zwischen 1600 und 2000 Pixeln Breite reicht für die meisten Layouts, bis etwa 2560 für sehr große Bildschirme. Streben Sie durch Komprimieren eine Datei unter 200 bis 300 KB an.

Wie groß sollten Blogbilder sein?

800 bis 1200 Pixel Breite passen zu den meisten Blog-Layouts. Prüfen Sie, wie breit Ihr Theme Bilder im Text anzeigt, und bleiben Sie bei etwa dieser Breite oder bis zum Doppelten für scharfe Bildschirme.

Brauche ich 2x-Bilder für Retina-Bildschirme?

Bis etwa zur doppelten Anzeigebreite erhalten Sie scharfe Ergebnisse auf hochauflösenden Bildschirmen. Darüber hinaus fügen Sie Gewicht mit wenig sichtbarem Nutzen hinzu. Mit responsiven Bildern lädt jedes Gerät die passende Größe herunter.

Wie viele KB sollte ein Webbild haben?

Als Richtwert unter 200 bis 300 KB für ein Titelbild, unter 100 bis 150 KB für ein Inhaltsbild und unter 50 KB für ein Vorschaubild. Detailreiche Fotos brauchen eventuell mehr, einfache Grafiken weniger.

Ist es besser, die Qualität oder die Abmessungen zu verringern?

Verringern Sie zuerst die Abmessungen. Weniger Pixel verkleinern die Datei viel stärker als eine niedrigere Qualität, bei weniger sichtbarem Schaden. Passen Sie die Qualität erst an, wenn Sie das Gewicht weiter senken müssen.

Probiere die Tools aus