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 für die 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 auf dem Desktop
Bildgrößen auf dem Laptop oder MacBook
Bildgrößen auf dem Tablet
Bildgrößen 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 360 px breit sein:

1200/3 = 400 px abzüglich 40 px Rand (20 px auf jeder Seite). 

Du kannst auch mit mehr Abstand rechnen, dann hängen die Bilder nicht so dicht aufeinander.

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: Unterschiedliche Proportionen auf dem Desktop und dem Smartphone
  • 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.
Hintergrundbilder mobil optimieren

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 Academy lernst du u. a., wie du diesen „Spagat“ auf deiner Website mit wenigen Klicks meisterst.

In 3 einfachen Schritten
zu deinem glasklaren WEBSITE-KONZEPT!

Abonniere meinen Newsletter für Website-Queens und du erhältst den Fahrplan für dein Konzept für 0 Euro. 

Fahrplan Website-Konzept
Fahrplan Website-Konzept

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.

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!

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

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.

Squoosh: Tool zum Komprimieren von Bildern
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.

10 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.

    1. Liebe Anja,

      die doppelte Größe gilt nur für dein Logo. Alle anderen Bilder kannst du nach der Übersicht berechnen.

      Liebe Grüße
      Silke

  2. Liebe Frau König,

    ich arbeite mit dem CANVA-Website-Tool. Diese Website hat ein Standardformat 1.366 x 768 Pixeln. Welche Größe sollten nun meine Fotos haben, wenn ich sie vollformatig einbinden will? An anderer Stelle habe ich gelesen: „Als Faustregel können Sie sich merken: geplante Darstellungsgröße x 2, jedoch maximal 3.000 Pixel Breite.“ Diese Aussage steht im Widerspruch zu Ihrem Kommentar vom 24.02.23/17:41. Oder übersehe ich etwas?

    Mit besten Grüßen

    Helmuth

    1. Hallo lieber Helmuth,
      zur Canva-Website kann ich leider gar nichts sagen, da das kein unabhängiges Tool ist. Aber das Standard-Format von 1366 px Breite scheint mir sehr gering zu sein. Die Aussage Darstellungsgröße x 2 und dann maximal 3000 px Breite ist ja Unsinn, wenn man sich die Displaygrößen anschaut. Standard ist 1920 px, wenn das Bild über die volle Breite geht. Wenn ich das verdoppen soll, bin ich ja weit über 3000. Wer sagt denn sowas? Wenn du ein Bild doppelt so groß einbindest, braucht das System viel Zeit, um das Bild in die richtige Größe herunterzurechnen. Damit wird die Website dann langsam.
      Liebe Grüße
      Silke

  3. Liebe Silke,

    ganz vielen Dank für die Rückmeldung. Ich mache mich gerade vertraut mit Webdesign-Dingen. Und da findet man im Internet unterschiedlichste „Rezepte“. Den Hinweis „Darstellungsgröße x 2“ habe ich z.B. unter https://app-bis-web.de/perfektes-bildformat-websites/ gefunden. Dort heißt es wortwörtlich: „Als Faustregel können Sie sich merken: geplante Darstellungsgröße x 2, jedoch maximal 3.000 Pixel Breite.“

    Jetzt noch kurz zu CANVA. Das Standardformat mit 1.366 px Breite mag etwas begrenzt sein. Aber: Für den Hobby-Website-Bauer ist CANVA das beste und vor allem einfachste Programm, das ich bisher kennengelernt habe.

    Auf meiner Website „helmuth-online.my.canva.site/1“ habe ich im Rahmen der CANVA-Standardstruktur (1.366 x 768) für meine Fotos einen Bereich von 840 x 534 px eingerichtet (maximale Bildhöhe bzw. Bildbreite). Da ich nun meine Fotos auf diesen Bereich abstimme (Minimierung der Bildgröße), möchte ich nochmals auf meine Ausgangsfrage zurückkommen – und Sie um eine Empfehlung bitten: Angenommen ich habe ein Foto im Format 840:534 (mit sehr hoher Auflösung) – soll ich dieses Foto dann auf 840 x 534 px herunterbrechen, oder empfiehlt es sich, die Pixelzahl zumindest etwas höher anzusetzen. In der zu Anfang genannten Quelle wird eine Erhöhung der Pixelzahl wie folgt begründet: „Auf diese Weise stellen Sie sicher, dass hochauflösende Displays die Bilder gestochen scharf darstellen, selbst wenn Sie komprimiert sind. Das trifft besonders auf fast alle modernen Smartphones sowie einige Notebooks zu.“

    Ich hoffe, Sie können mir noch einmal helfen.

    Ich verbleibe mit einem großen Dank und den besten Grüßen

    Helmuth

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Lies hier weiter:

Website Academy 

Plane, erstelle und gestalte deine Business-Website so, dass du ONLINE SICHTBAR wirst und direkt deine WunschkundInnen anziehst!
Website Academy