Das hängt davon ab, wo du das Bild einsetzen willst:
- Bilder über die ganze Bildschirmbreite: 1920 × 450–600 px
- Bilder im Textbereich: 600 bis 900 px Breite
- Für mobile Ansicht: 360 bis 480 px Breite
- Dateigrösse: so klein wie möglich, ideal unter 100 KB
- Format: WebP oder AVIF, alternativ komprimiertes JPG
Warum die richtige Bildgrösse so wichtig ist
Ein Bild sagt mehr als tausend Worte – aber nur, wenn es nicht verpixelt, verzogen oder so gross ist, dass deine Website beim Laden ausgebremst wird.
Damit Bilder gut aussehen und technisch funktionieren, brauchen sie die richtige Grösse, das passende Format und möglichst wenig Datengewicht.
In diesem Artikel erfährst du, worauf du bei Bildergrössen achten solltest – mit klaren Empfehlungen, die du direkt umsetzen kannst.
Bildgrösse, Dateigrösse, Format – was ist der Unterschied?
Wenn es um Bilder auf Websites geht, tauchen oft drei Begriffe auf, die leicht verwechselt werden. Hier kommt eine einfache Erklärung:
- Bildformat
Das ist die Art der Datei, also wie das Bild abgespeichert ist – z. B. JPG, PNG, GIF, SVG, WebP oder AVIF.
Je nach Format kann ein Bild transparenter Hintergrund, Animation oder besonders kleine Dateigrösse haben. - Bildgrösse
Das ist die Abmessung in Pixeln, also wie breit und hoch ein Bild angezeigt wird – z. B. 800 × 600 px.
Sie bestimmt, wie gross das Bild auf dem Bildschirm wirkt. - Dateigrösse
Damit ist die Speichergrösse gemeint – also wie viel Platz das Bild auf deinem Server oder beim Laden im Browser braucht.
Sie wird in KB (Kilobyte) oder MB (Megabyte) angegeben.
Je kleiner, desto schneller wird das Bild geladen.
Sowohl Bildformat als auch die Bild und Dateigrösse bestimmen, wie schnell ein Foto auf deiner Website geladen werden.
1, 2, 3 – Website-Erfolg
Deine Website fühlt sich nicht mehr nach dir an? Dann klicke hier – und du bekommst klare Impulse und einem cleveren KI-Helfer als Unterstützung.
Welches Dateiformat für die Website verwenden?
Es gibt viele verschiedene Bildformate – aber nicht alle sind für Websites gleich gut geeignet. Manche Formate lassen sich gut komprimieren, andere können mit transparenten Hintergründen umgehen oder sind für Animationen gedacht.
Hier findest du die gängigsten Formate und ihre typischen Einsatzbereiche:
JPG
Die meisten Bilder auf Websites sind Fotos. Sie werden meist als .jpg abgespeichert – solange kein transparenter Hintergrund gebraucht wird.
Das JPG-Format entfernt Bildinformationen, die das Auge kaum wahrnimmt, um die Dateigrösse zu verkleinern. Ideal für grosse Fotos, Headerbilder oder Bildstrecken.
PNG
Wenn ein Bild einen transparenten Hintergrund hat (z. B. ein Logo), brauchst du .png.
Dieses Format speichert verlustfrei – also mit voller Qualität – aber die Dateien sind oft deutlich grösser. Bei einfachen Grafiken lohnt sich ein Test: PNG oder WebP?
GIF
.gif ist zwar etwas in die Jahre gekommen, funktioniert aber immer noch.
Es eignet sich gut für einfache Animationen oder sehr reduzierte Grafiken mit wenigen Farben.
Wenn ein GIF kleiner ist als WebP oder AVIF – warum nicht?
WebP
WebP wurde von Google entwickelt und ist inzwischen fast überall einsetzbar.
Es kombiniert die Vorteile von JPG und PNG: gute Komprimierung und Unterstützung von Transparenz.
Vor allem bei Bildern mit transparenten Anteilen ist WebP oft deutlich kleiner als PNG.
AVIF
AVIF ist das modernste Bildformat – noch kleiner als WebP, mit sehr guter Qualität.
Aber: Noch nicht alle Browser und Tools unterstützen es. Für viele lohnt sich die Kombination WebP + AVIF.
Mein Praxistipp: immer testen:
Ich probiere bei jedem Bild aus, welches Format die kleinste Dateigrösse liefert – bei gleichbleibender Qualität.
Das geht z. B. mit kostenlosen Tools wie:
Für WordPress-Nutzer:
Mit dem Plugin ShortPixel wird dir die Formatwahl abgenommen:
Es erstellt automatisch WebP- und AVIF-Versionen deiner Bilder und sorgt dafür, dass Besucherinnen immer das beste Format für ihren Browser bekommen.
Wenn AVIF geht, wird es genutzt. Wenn nicht, WebP. Und wenn auch das nicht klappt, wird das Original (JPG oder PNG) ausgeliefert.
1, 2, 3 – Website-Erfolg
Deine Website fühlt sich nicht mehr nach dir an? Dann klicke hier – und du bekommst klare Impulse und einem cleveren KI-Helfer als Unterstützung.
Welche Bildgrösse für eine Website?
Die Bildgrösse (also die Abmessung in Pixeln) sollte so gewählt werden, wie das Bild später tatsächlich auf deiner Website erscheint – und zwar in der Desktop-Ansicht.
Wenn du ein zu kleines Bild hochlädst, das nur auf dem Handy gut aussieht, kann es auf grösseren Bildschirmen schnell unscharf oder pixelig wirken.
Wenn du WordPress nutzt, erstellt das System beim Hochladen automatisch verschiedene Grössen deines Bildes – sogenannte Thumbnails. Der Browser des Websitebesuchers bestimmt dann welche Bildgrösse angezeigt wird.
- Bilder, die über die ganze Bildschirmbreite laufen – z. B. im Header – haben meist 1920 Pixel Breite.
Die Höhe bestimmst du selbst. Mehr als 600 px empfehle ich nicht – sonst verschwindet der Text unter dem Bild zu weit unten. Ich würde sogar weniger nehmen. - Bilder im Textbereich sind idealerweise zwischen 600 und 900 Pixel breit, je nachdem, wie viel Platz du ihnen gibst.
- Für die mobile Ansicht brauchst du 360 bis 480 Pixel Breite.
(Achtung: Bilder, die am PC nebeneinanderstehen, werden am Handy oft untereinander angezeigt – dadurch sind sie dort plötzlich grösser.)
Bitte vergiss dabei nicht, dass auf dem Handy Bilder teilweise wieder grösser dargestellt werden als auf dem PC.
Die Dateigrösse (also das Speichergewicht in KB) sollte so klein wie möglich sein. Ideal ist: unter 100 KB – aber das klappt nicht bei allen Bildern.
Gerade breite Banner werden sonst schnell pixelig oder unscharf.
Wichtig: Jedes Bild sollte einzeln geprüft und für den jeweiligen Einsatz optimiert werden. Eine pauschale Lösung gibt es nicht.
Wie findest du heraus, welche Bildgrössen auf deiner Website verwendet werden?
Wenn du ein Bild auf deiner Website ersetzen willst, musst du vorher wissen wie gross es ist.
Im Frontend: Öffne die Seite im Browser (z. B. Chrome oder Firefox), mach einen Rechtsklick auf das Bild und wähle „Untersuchen“. In der Entwickleransicht siehst du, wie gross das Bild im Layout dargestellt wird.
Wie das genau geht, zeige ich dir im Video:
Die zweite Methode ist für eine WordPress-Website:
Im Backend von WordPress findest du die Bildgrösse ganz einfach:
Öffne die Mediathek, klicke auf ein Bild und wähle „Bearbeiten“.
Rechts in der Seitenleiste siehst du Angaben wie Dateigrösse (in kB) und Abmessungen (in Pixel) – so wie im Beispielbild gezeigt.
Bilder verkleinern – 3 Tools für die Bildbearbeitung
Es gibt unzählige Tools zur Bildbearbeitung – manche kostenlos, manche kostenpflichtig.
Ein praktisches Online-Tool, das du ohne Installation direkt im Browser nutzen kannst, ist Photopea. Es funktioniert ähnlich wie Photoshop, ist aber einfacher in der Handhabung und vor allem kostenlos.
Im Video zeige ich dir wie Photopea funktioniert:
Zum Komprimieren empfehle ich dir zwei Tools:
TinyPNG – reduziert die Dateigrösse, ohne sichtbaren Qualitätsverlust.
Squoosh – bietet dir mehr Kontrolle über Komprimierung und Dateiformat.
Checkliste Bildergrössen auf der Website
- Format wählen: WebP oder AVIF – sonst JPG/PNG gut komprimiert.
- Grösse festlegen: so gross wie nötig, nicht grösser.
- Dateigrösse prüfen: ideal unter 100 KB – je kleiner, desto schneller.
- Bilder einzeln prüfen: je nach Einsatzbereich anpassen.
- Bei WordPress: Plugin wie ShortPixel nutzen für Komprimierung und Formatumwandlung.
- Kein unnötiger Schnickschnack: Animationen & Hintergrundbilder sparsam einsetzen.
Häufige Fragen zu Bildgrössen auf Websites
Ist WebP besser als JPG?
In vielen Fällen: ja.
WebP ist moderner, oft kleiner bei vergleichbarer Qualität und unterstützt sogar Transparenz – ähnlich wie PNG. Für normale Fotos auf deiner Website ist WebP meist die bessere Wahl. Aber: Nicht alle Tools und ältere Browser kommen damit gleich gut klar. Deshalb lohnt es sich, WebP plus JPG als Fallback zu nutzen – oder ein Plugin wie ShortPixel, das das automatisch übernimmt.
Welche Bildgrösse für ein Hintergrundbild der ganzen Website?
Ich rate dir von einem Hintergrundbild für die ganze Website ab.
Solche Bilder sind meist zu dominant, lenken vom Inhalt ab und machen die Seite unnötig langsam – vor allem auf dem Handy.
Wenn du trotzdem eines verwenden willst, dann nur dezent und sehr gut komprimiert. Für den Desktop kannst du dich an 1920 px Breite orientieren, bei niedriger Höhe und reduzierter Dateigrösse.
Besser geeignet: eine einfarbige Fläche, ein leichtes Muster oder eine Hintergrundkachel (tile) – also ein kleines Bild, das sich nahtlos wiederholt. Das spart Ladezeit und bringt trotzdem Struktur oder Leichtigkeit ins Design.
Welche Bildqualität ist für eine Website am besten?
Ich empfehle dir eine Komprimierung zwischen 40 und 60 %.
Damit bleibt die Bildqualität auf einem guten Niveau, und die Dateigrösse wird deutlich reduziert.
Wichtig: Jedes Bild ist anders. Teste also mit Tools wie Squoosh, wie weit du gehen kannst, ohne dass das Bild sichtbar leidet. Besonders bei Fotos ist oft mehr Spielraum, als man denkt.
Was ist ein Vektorbild?
Ein Vektorbild besteht nicht aus Pixeln, sondern aus rechenbaren Formen (z. B. Linien, Kurven, Flächen).
Dadurch lässt es sich ohne Qualitätsverlust beliebig vergrössern – perfekt für Logos, Icons oder Illustrationen.
Typische Formate: SVG, AI, EPS, PDF.
Was ist eine SVG-Datei?
SVG steht für „Scalable Vector Graphics“.
Das ist ein vektorbasiertes Bildformat, das ideal für Logos, Icons oder einfache Illustrationen ist. SVGs sind meist sehr klein in der Dateigrösse, lassen sich beliebig skalieren und können sogar animiert oder per CSS gestylt werden.
Aber Vorsicht: Nicht jedes SVG ist automatisch sicher – bei externen SVGs kann schädlicher Code mitkommen. Lieber selbst erstellen oder vertrauenswürdige Quellen nutzen.
Was hat es mit den 72 dpi auf sich?
Vielleicht stolperst du beim Abspeichern über die Frage nach der Auflösung – zum Beispiel 72 dpi.
Die gute Nachricht: Fürs Web sind dpi egal.
Dpi („dots per inch“) spielt nur im Druck eine Rolle.
Bildbearbeitungsprogramme brauchen trotzdem eine Angabe – da hat sich 72 dpi als Standard eingebürgert. Du kannst diesen Wert also einfach stehen lassen.
Fazit: So holst du mehr aus deinen Bildern raus
In diesem Artikel hast du gesehen, worauf es bei Bildern auf deiner Website wirklich ankommt: passende Grösse, sinnvolles Format, schlanke Dateigrösse.
Wenn du diese Punkte beachtest, optimierst du nicht nur die Ladezeit deiner Website, sondern bietest deinen Besucherinnen ein angenehmes Nutzungserlebnis – ganz ohne Technikfrust.
Und ganz nebenbei tust du auch etwas für dein Suchmaschinenranking.
Bilder, die gut vorbereitet sind, machen eben doppelt Eindruck: optisch und technisch.
Noch mehr zum Thema Bilder auf der Website erfährst du in diesem Artikel: Mit Fotos auf deiner Website die Gefühle deiner Besucher ansprechen
1, 2, 3 – Website-Erfolg
Deine Website fühlt sich nicht mehr nach dir an? Dann klicke hier – und du bekommst klare Impulse und einem cleveren KI-Helfer als Unterstützung.
