Bildgrössen für deine Website: was du wirklich wissen musst

Die wichtigsten Bildgrössen auf einen Blick

Ich weiss, manchmal will man einfach schnell die Zahl wissen, ohne den ganzen Artikel lesen zu müssen. Hier sind die wichtigsten Richtwerte. Alles dazu erkläre ich weiter unten im Detail.

Hero-Bild: 1920 px
Inhaltsbreite: 1200 px
2 Spalten: ca. 560 px
3 Spalten: ca. 320 px
Logo-Leiste: ca. 280 px

Als PDF herunterladen

Warum die richtige Bildgrösse auf der Website so viel ausmacht

Ich bin ja ein Fan von Websites mit Bilder oder Grafiken, mich hängen reine Text-Wüsten schnell ab. Bilder machen eine Website persönlicher. Sie können eine Botschaft unterstreichen und helfen, dass Inhalte leichter lesbarer werden, weil sie einen Abschnitt auflockern.

Zu grosse Bilder: wenn die Ladezeit leidet

In meinem Alltag als Webdesignerin sehe ich aber oft, dass Bilder sehr gross oder gar in Originalgrösse auf die Website geladen werden. Als Hobby-Fotografin dachte ich auch lange: «ich will ja eine gute Bildqualität auf der Website haben». Bis ich gemerkt habe, welche Auswirkungen diese grosse Bilddateien grossen Einfluss auf die Ladegeschwindigkeit einer Website haben können.

Wenn Bilder zu schwer sind, wird die Seite spürbar langsamer. Vor allem auf dem Handy, und genau dort schauen heute viele zum 1. Mal auf deine Website.

Zu kleine Bilder: es sieht unprofessionell aus

Auf der anderen Seite wirken zu kleine Bilder unscharf, verzerrt und schnell mal unprofessionell, obwohl die Arbeit dahinter vielleicht top ist. Und du willst deine Besucher ja von deiner Qualität überzeugen, oder?

Bilder und SEO: was Google damit zu tun hat

Optimierte Bilder sind ein einfacher Hebel, um deine Website schneller zu machen und damit auch bei Suchmaschinen wie Google besser dazustehen. Wenn die Seite langsam lädt, sind die Website-Besucher schneller weg, als dir lieb ist. Vor allem auf dem Handy, wo das Netz nicht immer stabil ist. Google bewertet Websites stark aus der Mobile-Perspektive, und da spielt die Ladezeit mit.

Bildgrösse, Dateigrösse, Format: was ist was?

Bildgrösse (Pixel)

Das sind die Masse in Pixeln, also Breite x Höhe.

Bildgrösse = Breite x Höhe (px)

Dateigrösse (KB/MB)

Das ist das Gewicht der Datei und sagt etwas darüber aus, wie «schwer» die Bilddatei ist. Sie wird in Kilobyte (KB) oder Megabyte (MB) angegeben.

 Dateigrösse = das Gewicht einer Bilddatei (KB / MB)

Seitenverhältnis

Das Seitenverhältnis eines Bildes beschreibt das Verhältnis von Breite zu Höhe. Das ist wichtig für den Zuschnitt und das Layout.

Seitenverhältnis = Verhältnis von Breite zu Höhe (z.B. 16:9, 4:3, 1:1)

Dateiformat

Das ist der Dateityp eines Bilder. Du erkennst das Dateiformat an der Endung der Bilddatei, z.B. .jpg, .png, .webp, .svg

Es beeinflusst die Qualität, die Transparenz und die Dateigrösse eines Bildes.

Dateiformat = JPG, PNG, WebP, SVG

Welche Bildgrössen passen zu deiner Website?

Die optimale Bildgrösse hängt von der maximalen Bildschirmbreite ab (also in der Desktop-Ansicht). Entscheiden ist also nicht, wie gross dein Foto «in echt» ist, sondern wie breit es auf der Website dargestellt wird.

Hero-Bild / Header

Brauchst du ein Vollbild (z.B. für den Header/Hero), dann sollte das Bild 1920px breit sein.

Hero-Bild und volle Breite: warum das am Handy oft tricky wird

Ein Hero-Bild ist das grosse Bild ganz oben auf deiner Website, das oft mit einem Titel oder kurzem Text versehen ist, wird als Hero-Bild bezeichnet. Es läuft über die volle Bildschirmbreite, daher empfehle ich 1920 px als Breite. Das entspricht der Breite eines grossen Monitors und damit ist sichergestellt, dass das BIld nicht unscharft oder verpixelt dargestellt wird.

Beim Hero-Bild ist die Pixelzahl aber nur die halbe Miete. Oft zählt vielmehr der Ausschnitt und der Fokuspunkt.

Stell mir mal ein schönes Foto von deiner Werkstatt oder deinem Atelier vor, das quer aufgenommen wurde. Auf dem Desktop sieht das Bild in voller Breite richtig stark aus. Auf dem Handy kann genau das gleiche Bild aber plötzlich winzig wirken. Warum? Das ist ganz einfach: ein Querformat-Bild wird auf dem Handy proportional verkleinert. Es passt zwar in die Breite, verliert dabei aber stark an Höhe. Was dann bleibt ist ein schmaler Streifen, auf dem vielleicht noch der Boden der Werkstatt zu sehen ist.

Darum lohnt es sich, schon beim Zuschnitt auf das Handy zu denken. Wo ist das Wichtigste im Bild? Eine Person, ein Detail, ein Logo? Dieser Bereich sollte möglichst zentral im Bild dargestellt werden.

Abschnittsbild im Inhaltsbereich (Contentbereich, ca. 1200 px)

Alles ausserhalb des Hero-Bereichs liegt im sogenannten Inhaltsvereich (Contentbereich). Das ist die «Box», in welcher der eigentliche Seiteninhalt dargestellt wird: Texte, Bilder, Buttons. Diese Box richtet sich nach der Standardbreite deines Systems und  liegt meist zwischen 1080 – 1200 px. Ich arbeite ja mit Elementor Pro, wo die Breite standardmässig auf 1140 px eingestellt ist. Der Einfachheit halber rechne ich daher mit 1200 px als Inhaltsbreite.

D.h. also wenn das Bild den ganzen Inhaltsbereich ausfüllen soll, brauchst es eine maximale Breite von 1200 px. Von diesem Richtwert aus kannst du dann alle anderen Grössen ableiten, je nachdem wie biel Platz dein Bild auf der Seite einnimmt.

So rechnest du die Breite einfach aus

Willst du z.B. 2 Bilder nebeneinander darstellen, so halbierst du die Inhaltsbreite einfach durch 2, das ergibt eine Bildbreite von ca. 520 – 600 px. Den Rand zwischen den Bildern (etwa 20 px pro Seite, also 40 px) kannst du davon noch abziehen. Dann hast du eine Bildgrösse von 480 – 560 px. Bei mehr Rand kannst du natürlich auch mehr Pixel abziehen, wenn mehr Abstand zwischen den Bildern besteht.

Bei 3 Spalten drittelst du die Inhaltsbreite und ziehst den Rand 4 mal (2 mal pro Seite) ab, usw.

2 Spalten (ca. 560 px)

Wie gerade gesehen rechne ich mit ca. 560 px pro Bild für Abschnitte wo zwei Bilder  oder ein Bild-Text-Block nebeneinander stehen.

Typische Einsatzbereiche sind z.B. ein Bild links mit einem kurzen Text rechts daneben oder zwei Referenzfotos, die nebeneinander stehen.

Wichtig zu wissen: auf dem Handy werden 2 Spalten meistens untereinander dargestellt. Das nimmt dann die volle Breite ein und wird grösser angezeigt als auf dem Desktop. Exportiere daher die Bilder nicht zu klein, sonst wirken sie auf dem Handy unscharf.

3 Spalten (320 px)

Genau nach der gleichen obigen Vorgehensweise rechne ich bei 3 Spalten mit ca. 320 px Breite. Drei Spalten kommen oft bei Leistungsübersichten, Team-Vorstellungen oder Referenzen vor.

Auch hier gilt dasselbe wie bei zwei Spalten, nur noch ausgeprägter: auf dem Handy werden 3 Spalten meistens untereinander dargestellt. Das Bild, welches auf dem Desktop klein und unscheinbar ist, füllt auf dem Handy plötzlich die ganze Breite. Wenn es nur mit 320 px exporitert wurde, kann es unscharf wirken. Ich empfehle darum, auch bei Spaltenbildern etwas grosszügiger zu exportieren.

Praxisbeispiel ⅓ Bild und ⅔ Text

Das Bild ist in diesem Layout relativ klein und ergänzt den Text. Das siehst du meist bei Leistungsbeschreibungen oder einer kurzen Teamvorstellung. HIer reicht eine Breite von ca. 400 px, weil das Bild nie gross dargestellt wird.

Praxisbeispiel ⅔ Bild und ⅓ Text

Das Bild nimmt zwei Drittel der Breite ein, daneben steht ein kurzer Text. Das Layout kommt oft bei Referenzseiten oder Vorher-Nachher Vergleichen vor. Hier ist es gerade umgekehrt. Das Bild ist relativ gross und dominant, daher braucht es entsprechend mehr Pixel.  Ein guter Richtwert ist hier ca. 900 px Breite.

Logo-Leiste (ca. 280 px)

Ein Logo-Leiste zeigt zum Beispiel Partnerlogos, Kundenlogos, Zertifikate, usw. Die Logos sind relativ klein und werden nebeinander in einer Reihe angezeigt. Ein guter Richtwert sind ca. 280 px pro Logo.

Wichtiger Hinweis: verwende bei Logos möglichst die Datei als .svg. Das ist ein Vektorformat, das in jeder Grösse scharf bleibt und meist sehr kleine Dateigrösse hat. Die zweitbeste Lösung ist .png mit transparentem Hintergrund.

Teamfoto und Portrait

Teamfotos und Portraits sind oft quadratisch oder im Hochformat. Die Breite hängt davon ab, wie das Foto eingesetzt wird. Als kleines Profilbild einer 3-Spalten-Reihe brauchst du weniger Pixel als bei einem grossen Portrait, das die halbe Seitenbreite einnimmt.

Mit ca. 400 bis 600 px Breite als Faustregel machst du im Normalfall nichts fall. Bei Portraits lohnt sich ein echtes und gutes Foto ganz besonders. Deine Kunden wollen wissen, mit wem sie es zu tun haben.

Blogbild / Beitragsbild

Bei deinem Blogartikel kommt es darauf an, wie dein Blog aufgebaut ist. Oft lohnt es sich, zwei verschiedene Bilder einzuplanen.

Das Titelbild oben im Artikel wird gross angezeigt und braucht daher mehr Pixel. Ich empfehle hier ca. 1200 px Breite und oft Querformat (auch hier, je nach Blog-Aufbau).

Das Vorschau-Bild in der Blog-Übersicht ist kleiner und wird quadratisch oder in einem anderen Format zugeschnitten. Verwendest du hier das gleiche Bild wie für den Titel, kann es passieren, dass der Ausschnitt nicht stimmt und wichtige Bildinhalte abgeschnitten werden. Aber wie gesagt: es kommt darauf an, wie dein Blog aufgebaut ist.

Meist lohnt es sich aber, von Anfang an zwei Bild Versionen vorzubereiten: eine für den Artikel, eine für die Übersicht. Es ist ein Bitzeli mehr Aufwand, dafür sieht es am Ende sauberer aus.

Welches Dateiformat für welches Bild?

Es gibt nicht das EINE richtige Dateiformat. Es kommt darauf an, was das Bild zeigt und wo es eingesetzt wird.

JPG: für Fotos

JPG ist das klassische Format für Fotos. Es ein guter Kompromiss zwischen Qualität und Dateigrösse. Der Hintergrund wird mitgespeichert, d.h. es ist kein transparenter Hintergrund möglich.

Einsatz: für Teamfotos, Referenzbilder, Bilder um Texte zu unterstreichen, Hero-Bilder.

PNG: wenn Transparenz gefragt ist

Brauchst du Bilder mit transparentem Hintergrund (z.B. Logos, Icons oder Fotodetails ohne Hintergrund), dann ist PNG das geeignete Dateiformat. Die Datei ist meist grösser als JPG. Daher sollte es nicht standardmässig für Fotos verwendet werden, es macht die Dateien unnötig schwer.

WebP: die moderne Alternative

Das ist ein neues Format, welches kleinere Dateigrössen bei gleicher Qualität bietet und wird von allen modernen Browsern unterstützt. Wenn du die Wahl hast, ist WebP heute eine gute erste Wahl für Fotos.

SVG: für Logos und Icons

SVG ist ein Vektorformat, das in jeder Grösse scharf bleibt. Es ist ideal für Logos, Icons und einfache Grafiken, aber nicht geeignet für Fotos.

Bilder in 6 Schritten aufbereiten

Schritt 1: Zuschneiden

Bevor du ein Bild exportierst oder komprimierst, lohnt es sich, zuerst den Ausschnitt festzulegen. Überlege, welcher Teil des Bildes wirklich wichtig ist und schneide alles weg, was vom Wesentlichen ablenkt.

Achte dabei auch auf das Seitenverhältnis. Ein Hero-Bild hat andere Proportionen als ein quadratisches Teamfoto. Wenn du den Zuschnitt erst machst, nachdem du das Bild exportiert hast, riskierst du, dass wichtige Bildteile abgeschnitten werden oder das Bild verzerrt wirkt.

Schritt 2: In der richtigen Grösse speichern

Speichere das Bild in etwa in der Breite, in der es auf deiner Website angezeigt wird.

Originalgrössen vom Handy oder der Kamera brauchst du auf der Website fast nie. Die sind oft 4000 px breit oder mehr, und das merkt deine Ladezeit sofort.Ein Bild, das 560 px breit dargestellt wird, muss nicht in 3000 px gespeichert werden. Das macht die Datei unnötig schwer.

Schritt 3: Dateiformat wählen

Jetzt weisst du schon, welches Format du brauchst: WebP oder JPG für Fotos, SVG oder PNG für Logos und Icons. Wähle das Format bereits beim Speichern, nicht erst danach.

Schritt 4: Datei sinnvoll benennen

Bevor du das Bild hochlädst, gib ihm einen sinnvollen Namen wie z.B. sanitaer-bern-badezimmer.jpg statt IMG_1234_final_v2.jpg

Warum? Google liest den Dateinamen mit. Ein sprechender Name hilft, dass dein Bild in der Bildersuche gefunden wird. Und intern, wenn du viele Bilder verwaltest, sparst du dir damit eine Menge Sucherei.

Noch ein kleiner Hinweis: Verwende keine Leerzeichen, Umlaute oder Sonderzeichen im Dateinamen. Also statt schöne-küche.jpg lieber schoene-kueche.jpg oder einfach kueche-bern.jpg.

Schritt 5: Komprimieren

Jetzt kommt der Schritt, der den grössten Unterschied macht. Komprimieren bedeutet, die Dateigrösse zu reduzieren, ohne dass die Bildqualität sichtbar leidet. Ein gutes Tool erledigt das in Sekunden.

Als Richtwert: Die meisten Bilder sollten unter 200 KB liegen. Hero-Bilder dürfen etwas mehr sein, aber auch dort ist unter 400 KB ein gutes Ziel. Im Abschnitt Tools zeige ich dir, welche ich dafür verwende.

Schritt 6: Alt-Text setzen

Der Alt-Text ist eine kurze Beschreibung des Bildes, die du direkt in WordPress beim Upload eingibst. Er wird angezeigt, wenn ein Bild nicht geladen werden kann, und er hilft Google zu verstehen, was auf dem Bild zu sehen ist.

Ein guter Alt-Text beschreibt das Bild konkret und natürlich. Nicht «Bild1» oder «Foto», sondern zum Beispiel «Sanitär-Monteur bei der Arbeit in einem Badezimmer in Bern».

Die kompakte Zusammenfassung der Punkte kannst du hier als PDF downloaden.

Diese Tools nutze ich zum Optimieren der Bilder

Es gibt sehr viele Tools für die Optimierung der Bilder, hier gibt es auch kein «richtig» oder «falsch», sondern eher ein «mag ich» und «mag ich weniger». Hier sind ein paar der Tools, die ich kenne und empfehlen kann.

Paint.net

Wenn du keine komplizierte Bildbearbeitungssoftware wie Photoshop oder GIMP nutzen möchtest, aber trotzdem etwas mehr Kontrolle über die Bildbearbeitung haben willst, kann ich paint.net als einfache Alternative empfehlen. Es bietet Ebenen (Layers), Korrekturmöglichkeiten wie Helligkeit und Kontrast, und unterstützt mehr Dateiformate als das normale Paint. Trotzdem bleibt die Oberfläche übersichtlich und man wird nicht erschlagen. Kostenlos und nur für Windows: getpaint.net

TinyPNG

Das kostenlose Tool kann direkt im Browser geöffnet werden, es ist kein Download nötig. Das Prinzip ist ganz eifach: Bild reinziehen, komprimiertes Bild herungerladen, et voilà! Das Tool bietet eine sehr gute Qualität bei bei kleiner Dateigrösse und ist daher eine Empfehlung für alle, die unkompliziert komprimieren wollen: tinypng.com

Squoosh

Das Tool wurde von Google entwickelt und kann direkt im Browser aufgerufen werden oder als App heruntergeladen werden. Die Oberfläche ist sehr ansprechend und intuitiv zu bedienen und bietet viele Einstellmöglichkeitn zu Format und Grösse. Was ich zudem ganz toll finde ist, dass direkt ein Vorher-Nachher-Vergleich des Bildes inklusive Slider angezeigt wird. Hier geht’s direkt zur squoosh.app

IrfanView

Es ist ein kostenloses Bildbearbeitungsprogramm für Windows, mit welchem du Bilder schnell verkleinern und in der richtigen Grösse exportieren kannst. Ich mag die sogenannte «Batch-Funktion», mit welcher man mehrere Bilder gleichzeitig in einer bestimmten Grösse speichern kann. Gerade bei Blog-Artikeln mit vielen ähnlichen Bildern oder bei Fotogalerien ist es sehr empfehlenswert, da du nicht jedes Bild bearbeiten musst.

Es hat nicht die hübscheste Oberfläche, arbeitet dafür aber sehr zuverlässig und schnell: irfanview.com

EWWW Image Optimizer / WP Optimize

Bei EWWW Image Optimizer und WP Optimize handelt es sich um WordPress Plugins, welche Bilder direkt in WordPress optimieren. Das kann praktisch sein, weil es im Hintegrund läuft. Ich selber hatte mit EWWW schon einmal das Problem, dass die Ladezeit danach verschlechtert wurde, habe aber viele Kolleginnen, welche damit super Erfarungen gemacht haben. Daher möchte ich es trotzdem erwähnen. Eine echte Alternative ist WP Optimize.

Ich persönlich erledige die Bildoptimierung lieber VOR dem Hochladen. So weiss ich genau, was gemacht wurde und bin nicht auf den Automatismus eines Plugins angewiesen. Zudem spare ich mir damit auch ein Plugin. Aber wenn du viele Bilder auf deiner Website hast und das lieber delegieren möchtest, sind dies Plugins eine praktische Lösung.

Die häufigsten Bild-Fehler auf Websites und was sie kosten

Fehler 1: Bilder in Originalgrösse hochladen

Handyfotos sind oft 3000 – 5000 px breit, wenn du Fotos von «richtigen» Kameras verwendest dann sind die Zahlen noch höher. Wenn du Bilder brauchst die grob zwischen 300 – 1200 px dargestellt werden, sind die resltichen Pixel nutzlos. Die Datei ist unnötig schwer, und wenn du das mit all deinen Dateien so machst kommt es zu einer schlechten Ladezeit deiner Website. Damit stehst du bei Suchmaschinen weniger gut da (Google-Ranking), aber vor allem kostet es dich die Geduld deiner Website-Besucher!

Fehler 2: Falsches Dateiformat

Du verwendest für Fotos PNG statt JPG oder WebP. PNG ist in der Dateigrösse viel schwerer, damit lädst du unnötig schwere Dateien auf deine Website. Und das Spiel kennst du schon: schwere Dateien, schlechtere Ladezeit, unzufriedene Besucher und Google.

Fehler 3: Nicht komprimieren

Viele laden ihre Bilder hoch, ohn sie vorher zu komprimieren. Selbst ein richtig grosses Bild kann nach dem Komprimieren um 60 – 80% kleiner werden ohne sichtbaren Qualitätsverlust. Das kostet Speicherplatz und Ladezeit!

Fehler 4: Dateinamen wie IMG_1234_final_v2.jpg

Was viele nicht wissen: Google liest den Dateinamen, um deine Website «einordnen» zu können. Nichtssagende Namen verschenken eine einfache SEO-Chance.

Fehler 5: Kein Alt-Text

Das ist einer der Fehler, den ich am häufigsten sehe. Bilder werden hochgeladen, eingebaut, fertig. Der Alt-Text bleibt leer.

Dabei ist er gleich doppelt wichtig. Für Suchmaschinen ist der Alt-Text eine der wenigen Möglichkeiten zu verstehen, was auf einem Bild zu sehen ist. Ohne Alt-Text ist dein Bild für die Suchmaschine praktisch unsichtbar.

Und für Menschen, die einen Screenreader nutzen, weil sie schlecht oder gar nicht sehen können, ist der Alt-Text die einzige Information, die sie über dein Bild bekommen. Ein leeres Feld bedeutet: dieses Bild existiert für sie nicht.

Ein guter Alt-Text muss nicht lang sein. Er soll einfach beschreiben, was zu sehen ist.

So findest du heraus, welche Bildgrössen deine Website wirklich lädt

Du weisst jetzt, welche Bildgrössen du für deine Website verwenden solltest. Aber wie findest du nun heraus, ob deine bestehende Website das auch wirklich so macht?

Wenn deine Website mit WordPress aufgebaut wurde findest du die Bildgrösse ganz einfach wie folgt heraus:

• Mediathek aufrufen
• Klicke beim Bild auf Bearbeiten / Edit
• Auf der rechten Seite werden die Informationen zum Bild angezeigt, so auch die Bildgrösse:
  
  

Du kannst aber auch auf jeder beliebigen Seite die Bildgrösse herausfinden. Rufe dazu die Website im Browser auf.

Variante 1:

• Rechtsklick auf ein Bild, wähle «Bild in neuem Tab öffnen»
• In der URL siehst du den Dateinamen sowie auch die tatsächliche Bildgrösse

Das funktionier nicht bei allen Browsern gleich, bei Chrome, Edge und Firefox funktioniert es, bei Safari kann es anders funktionieren.

Variante 2 (für Technik-affine Leser):

• Rechtsklich auf ein Bild, wähle «Untersuchen» (oder «Inspect» falls dein Browser in Englisch eingestellt ist)
• Die Entwicklerkonsole wird geöffnet, dort siehst du die angezeigte Grösse sowie die tatsächliche Grösse des Bildes:
  

Wenn dir das zu kompliziert ist, reicht Variante 1 völlig.

Jetzt kennst du die Bildgrössen für deine Website. Bereit loszulegen?

Bildoptimierung klingt nach viel, ist es aber nicht. Wenn du das nächste Mal ein Bild hochlädst, denk einfach an drei Dinge: richtige Grösse, sinnvoller Name, komprimieren. Das reicht schon, um einen grossen Unterschied zu machen.

Du musst nicht alle Bilder auf deiner Website auf einmal angehen. Fang beim nächsten Foto an, das du hochlädst. Schritt für Schritt wird deine Website schneller, professioneller und besser auffindbar.

Und falls du dir unsicher bist oder einfach nicht weisst, wo du anfangen sollst: ich helfe gerne. Meld dich einfach.