Diese Bildgrößen brauchst du auf deiner Website

- inklusive Übersicht der Bildgrößen kostenlos zum Download!

Bilder sind das A und O auf deiner Website. Sie vermitteln ein bestimmtes Gefühl, untermauern deinen Website-Stil und illustrieren deinen Content. Du zeigst dich und dein Business. Das weckt Vertrauen. Daher sollten deine Bilder qualitativ hochwertig sein und gleichzeitig schnell laden. Und hierzu brauchst du die optimalen Bildgrößen.

Hier erfährst du, auf welche Bildgrößen es auf deiner Website ankommt und mit welchen Tools du arbeiten kannst, um das optimale Foto zu erstellen. Damit wir uns verstehen: In diesem Artikel geht es eher um die technischen Eigenschaften des Fotos.

Ob du mit deinem Foto von dir persönlich zufrieden bist, ist eine ganz andere Frage.

Darum ist die richtige Bildgröße so wichtig

Sowohl zu große als auch zu kleine Bilder tun deiner Website überhaupt nicht gut.

Wenn du zu große Bilder einfügst, muss dein System sie für die Anzeige verkleinern. Das wirkt sich negativ auf die Ladezeit deiner Website aus.

Ist dein Bild zu klein für den Bereich, in dem es angezeigt werden soll, wird es unscharf bzw. pixelig dargestellt. Und das ist nichts, was du auf deiner Website sehen willst.

Und auch hier muss dein System rechnen, damit das Bild eingepasst wird.

Daraus ergibt sich:

Lade deine Bilder in der Größe hoch, in der sie auf der Website angezeigt werden sollen.

Damit du das umsetzen kannst, musst du zunächst herausfinden, wie groß der entsprechende Platz auf deiner Website ist. Mit Bildgröße ist hier das eigentliche Format – also die Breite und Höhe deines Fotos – in Pixeln gemeint. 

Bildgrößen auf deiner Website

Monitor- bzw. Display-Größen

22 bis 49 Zoll große Desktop-Monitore, 13, 14, 16 Zoll große Laptop- oder MacBook-Monitore, Tablet- und Smartphone-Displays … 

Es gibt sooo viele Monitor- und Display-Größen der unterschiedlichen Hersteller. Nicht zu verwechseln mit der Bildschirmauflösung, denn diese ist in der Regel viel höher.

Das Gerät, mit dem du die Website aufrufst, hat jeweils eigene Anforderungen. Wichtig ist, dass deine Bilder auf allen Endgeräten, also auf dem Desktop als auch mobil auf dem Tablet und dem Smartphone, optimal angezeigt werden.

Das sind derzeit die Bildgrößen auf den verschiedenen Geräten

Desktop: 1920×1200 bis 1024×768 px
Laptop: 1280×900 bis 1024×768 px
Tablet: 800×1280 bis 601×962 px
Mobil: 414×896 bis 360×640 px

Bei diesen Angaben ist der erste Wert jeweils die Breite des Bildes. 

Du siehst, die Standardwerte für mobile Geräte geht von einer Nutzung im Hochformat aus.

Bildgrößen für deine Website auf dem Desktop Monitor
Bildgrößen für deine Website auf dem Laptop
Bildgrößen für deine Website auf dem Tablet
Bildgrößen für deine Website auf dem Smartphone

Die optimale Größe deiner Website-Bilder richtet sich also nach der größten Monitor-Größe.

Wenn du ein Bild in voller Seitenbreite einbindest, sollte es 1920 px breit sein. So stellst du sicher, dass es auf dem großen Monitor scharf angezeigt wird.

Willst du ein Bild oder mehrere Bilder in einem begrenzten Abschnitt einbinden, kannst du über die Inhaltsbreite genau bestimmen, wie groß das Foto maximal sein darf. 

So rechnest du deine Bildgrößen aus:

Hast du eine Inhaltsbreite von 1200 px festgelegt und willst drei Fotos nebeneinander einfügen, sollte jedes Foto 340 px breit sein:

1200/3 = 400 px abzüglich 3×20 px Rand.

In deinen Blogbeiträgen hast du eine fest definierte Breite für deinen Content. Bindest du hier ein Bild ein, gibt die festgelegte Inhaltsbreite die maximale Bildbreite vor.

Lade dir die Übersicht kostenlos auf einen Klick als PDF herunter:

Je nach Thema, werden deine BesucherInnen deine Website aber gar nicht am Desktop besuchen. In vielen Nischen, z. B. Ernährung mit Rezepten oder Sport mit Übungen und Workouts, gehen die Website-Aufrufe über mobile Geräte gegen 98 %.

Optimiere deine Website und natürlich deine Bilder für mehrere Ansichten und beachte hier unbedingt deine Bildgrößen.

Vor allem Bilder in voller Seitenbreite, die in der Desktop- und in der Tablet-Ansicht sehr gut funktionieren, kannst du auf dem Smartphone eventuell nicht optimal darstellen.

  • Ein Bild im Querformat (z.B. 1920×800 px) erreicht proportional eingepasst nicht die notwendige Höhe und sieht auf dem schmaleren Smartphone-Display “mickrig” aus.
Bildgrößen auf deiner Website: Desktop und Smartphone im Vergleich
  • Hintergrundbilder mit darauf platziertem Text lassen sich kaum für die Ansicht auf dem Smartphone optimieren und das Wesentliche des Bildes ist gar nicht sichtbar.
Diese Bildgrößen brauchst du auf deiner Website 1

In beiden Fällen kannst du für die mobile Ansicht auf dem Smartphone ein anderes Bild einsetzen. Mit einem guten Pagebuilder ist das ganz leicht. In meinem neuem Online-Programm Website Formel lernst du u. a., wie du diesen „Spagat“ auf deiner Website mit wenigen Klicks meisterst.

Website Formel Online-Programm Logo
Website Formel Online-Programm

Erstelle dir mit der Website Formel deine Business-Website, die gefunden wird und dein Angebot verkauft!

Sichere dir über deinen unverbindlichen Platz auf der Warteliste als Erste Zugang zum Programm plus geniale Boni.

Website Formel Online-Programm

So prüfst du deine Website auf verschiedenen Endgeräten

Lass mich raten: Du hast einen Desktop-Monitor, ggf. ein Notebook, ein Tablet und ein Smartphone? Eventuell gibt es in deinem Haushalt noch ein weiteres Tablet und ein Smartphone mit anderen Display-Größen?

Du musst nun nicht alle diese Geräte zur Optimierung deiner Website benutzen. Du kannst im Chrome-Browser mit den sogenannten Google Entwickler-Tools die Größe des Bildes auf verschiedenen mobilen Endgeräten ermitteln.

  • Klicke dazu mit der rechten Maustaste auf dein Foto.
  • Wähle in dem geöffneten Fenster “Untersuchen” aus.
  • Klicke ggf. mit der Maus auf das Icon ganz oben links mit dem Pfeil, um die rechte Seitenleiste aufzuklappen.

Hier erkennst du, ob dein eingefügtes Bild zu groß oder zu klein ist.

Diese Bildgrößen brauchst du auf deiner Website 2

Neben der Bildgröße ist auch die Dateigröße wichtig

Je größer das Bild in seinen Abmessungen, desto höher auch die Dateigröße.

Auch die Bildinhalte haben einen Einfluss auf die Größe der Datei:

Die Dateigröße wird umso höher, je mehr Farben dein Bild enthält.

Grundsätzlich solltest du keine Bilder von deiner Kamera oder deinem Smartphone unbearbeitet und direkt auf die Website laden. Auch Stockfotos (z.B. von Unsplash & Co.) sind zu groß. Ein unbearbeitetes Bild kann schon mal 5404×3606 px bei bis zu 6 GB auf die Waage bringen.

Das ist eine viel zu große Datenmenge.

Das Gute: Bilder in dieser Größe kannst du gar nicht in WordPress hochladen. Wenn du es dennoch versuchst, erhältst du eine Fehlermeldung, dass dein Bild maximal 2560 px breit sein darf. 

Wenn du zunächst deine Bilder auf das richtige Maß verkleinert hast, komprimierst du sie im nächsten Schritt für die Anzeige im Web.

Beim Komprimieren reduzierst du die Bildqualität und damit die Dateigröße.

Deine Bilddatei sollte nicht größer als 100 KB sein.

Dies ist nur ein Richtwert. Sei hier nicht „päpstlicher als der Papst“. Deine wichtigen Fotos, die über die gesamte Breite deiner Website gehen, sind natürlich größer als Fotos, die im Fließtext eingebunden sind.

Sobald du ein Bild in WordPress hochgeladen hast, werden dir entsprechenden Daten wie Dateityp, Dateigröße und Abmessungen angezeigt.

Wenn du bei den Dateigrößen deiner hochgeladenen Bilder hohe MB- oder sogar GB-Werte findest, solltest du unbedingt handeln!

Daten zur Bildgröße und Dateigröße in der WordPress Mediathek

Mit verkleinerten und komprimierten Bildern sorgst du für eine schnellere Ladezeit

Es gibt verschiedene (kostenlose) Tools, die du zum Verkleinern und Komprimieren deiner Bilder nutzen kannst. Profis nutzen Photoshop und es gibt kein besseres Tool, um Bilder u.a. zu bearbeiten, zurechtzuschneiden und zu komprimieren.

Deine Bilder zuschneiden und verkleinern kannst du aber ebenso gut mit dem kostenlosen Tool gimp.

Ein recht neues, kostenloses Online-Tool, das beides kann, ist Squoosh. Dieses Tool ist genial.

Du lädst das zu bearbeitende Foto hoch, um das Foto zu verkleinern und die Bilddatei direkt zu komprimieren. Die zu erreichende Dateigröße (in kb) wird dir dabei direkt angezeigt. 

Und das Beste:

Du siehst in einer Vorschau auf deinem Bildschirm, wie das Bild nach der Komprimierung aussieht und kannst evtl. nachjustieren.

Mit dem Onlinetool Squoosh kannst du deine Bildgrößen anpassen und deine Bilder komprimieren
Ein Pro-Tipp zum Komprimieren deiner großformatigen Bilder:

Je größer dein Bild in Pixel, desto stärker kannst du es komprimieren. Vor allem dann, wenn du es als Hintergrundbild ggf. mit Farbüberlagerung zur Darstellung von Text oder anderen Inhalten nutzen willst. Dann kannst du dein Bild gut und gerne auf 20 % des eigentlichen Dateiformats bringen.

Wenn du Fotografin, Designerin, etc. bist, sind hochauflösende Bilder und Fotos dein Business. Hier solltest du dann abwägen, was dir wichtiger ist: Hammerscharfe Fotos oder eine schnelle Website.

Für welches Dateiformat entscheidest du dich?

Schließlich wäre es ja zu einfach, wenn du nicht auch hier eine Auswahl hättest. Bitte beachte, dass die folgende Aufzählung nur eine Auswahl der gängigsten Formate darstellt und keinen Anspruch auf Vollständigkeit erfüllt. Da gibt es noch viel mehr – aber wir bleiben hier mal pragmatisch.

  • JPEG/JPG (Joint Photographic Expert Group)

    Dies ist eines der am weitesten verbreiteten Formate im Internet für das Hochladen von Fotos. JPG-Fotos sind komprimiert und haben eine geringe Dateigröße. Allerdings werden sie manchmal verpixelt dargestellt.

  • PNG (Portable Networks Graphics)

    Dieses Format hat eine eingebaute Transparenz und wird für Bilder/Fotos mit einem transparenten Hintergrund genutzt. PNGs eignen sich besonders gut für Grafiken oder auch für dein Website-Logo.

  • GIF (Graphics Interchange Format)

    Dieses Format benötigst du hauptsächlich für animierte Fotos und Grafiken. Auch dieses Format lässt sich gut komprimieren.

Es gibt noch ein weiteres Format, das du unbedingt kennen solltest: WebP - kurz auch "Weppy" genannt

Was ist denn das nun wieder? Dieses Format komprimiert deine Bilder noch effektiver. Die Dateien werden noch kleiner, aber die Qualität bleibt gleich. Und deine Seite wird (im Regelfall) noch schneller …

Dieses Format kann sowohl Bilder mit transparentem Hintergrund als auch animierte Grafiken darstellen. Mit dem Online-Tool „Squoosh“ kannst du deine Bilder auch in dieses Format umwandeln. Am besten testest du es einfach mal.

WebP wird aktuell von folgenden Browsern unterstützt: Chrome, Microsoft Edge, Firefox, Opera und Safari. Um zu entscheiden, ob dieses Format für deine Bilder geeignet ist, schaust du am besten in deine Statistiken, um herauszufinden, mit welchen Browsern deine BesucherInnen auf deine Website kommen.

Aber das ist ein anderes Thema.

2 Antworten

  1. Liebe Silke, das hast du wieder einmal sehr ausführlich erklärt, sodass auch ich das verstehe. Vielen Dank für diesen wertvollen Blogbeitrag. Ich habe ihn mir abgespeichert und mir die PDF natürlich sofort geschnappt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Lies hier weiter:

Website Formel Online-Programm Logo
Website Formel Online-Programm

Erstelle dir mit der Website Formel deine Business-Website, die gefunden wird und dein Angebot verkauft!

Sichere dir über deinen unverbindlichen Platz auf der Warteliste als Erste Zugang zum Programm plus geniale Boni.

Website Formel Online-Programm