Optimale Bildgröße für Website: So findest du das richtige Format

Ein Bild sagt mehr als tausend Worte – eine zu große Bilddatei sagt dem Seitenbesucher vor allem: „Warte bitte.“ Damit Fotos und Grafiken auf deiner Website gut aussehen, ohne die Ladezeit auszubremsen, müssen Format, Abmessungen und Dateigröße zusammenpassen. Die optimale Bildgröße gibt es deshalb nicht als magische Zahl für jede Website. Sie hängt davon ab, wo das Bild erscheint, auf welchen Geräten es betrachtet wird und welche Aufgabe es erfüllen soll.

Die gute Nachricht: Du musst dafür weder eine Kamera noch einen Taschenrechner studieren. Mit ein paar einfachen Regeln findest du ein passendes Format für deine Bilder – und sorgst dafür, dass deine WordPress-Seite flott und ansprechend bleibt.

Was bedeutet „optimale Bildgröße“ überhaupt?

Wenn von der Bildgröße die Rede ist, können zwei verschiedene Dinge gemeint sein: die Abmessungen in Bildpunkten und die Dateigröße in Kilobyte oder Megabyte. Beides ist wichtig, aber nicht dasselbe.

Die Abmessungen beschreiben, wie breit und hoch ein Bild ist, zum Beispiel 1600 × 900 Bildpunkte. Die Dateigröße gibt an, wie viele Daten beim Laden übertragen werden müssen. Ein großes Bild kann stark komprimiert und dadurch relativ klein sein. Umgekehrt kann ein Foto mit moderaten Abmessungen durch eine geringe Kompression eine überraschend große Datei ergeben.

Für eine Website gilt: Das Bild sollte groß genug sein, um in seiner tatsächlichen Darstellung scharf auszusehen, aber nicht unnötig viele Bildpunkte enthalten. Eine winzige Datei ist kein Gewinn, wenn das Titelbild auf dem großen Bildschirm aussieht, als hätte es sich in Einzelteile aufgelöst.

Die passenden Abmessungen richten sich nach dem Einsatz

Ein Bild im Kopfbereich einer Seite braucht meist andere Abmessungen als ein kleines Vorschaubild in einer Liste. Überlege daher zuerst, an welcher Stelle das Bild erscheinen soll und wie viel Platz es dort einnimmt.

• Titelbild oder großes Aufmacherbild: Für ein breites Bild, das über einen großen Teil des Inhaltsbereichs reicht, sind etwa 1600 bis 2000 Bildpunkte Breite oft ein sinnvoller Ausgangspunkt.

• Bild im Fließtext: Wird ein Foto in einem normalen Inhaltsbereich angezeigt, reichen häufig 800 bis 1200 Bildpunkte Breite.

• Vorschaubild: Für kleinere Karten, Übersichtsseiten oder Beitragsvorschauen genügen je nach Gestaltung oft 400 bis 800 Bildpunkte.

• Symbol oder einfache Grafik: Hier kommt es auf die angezeigte Größe und scharfe Kanten an. Für manche Grafiken eignet sich ein Vektorgrafikformat besser als ein klassisches Fotoformat.

Das sind Richtwerte, keine Vorschriften. Ein Bild, das auf deiner Website höchstens 700 Bildpunkte breit angezeigt wird, muss normalerweise keine 4000 Bildpunkte mitbringen. Das wäre, als würdest du für einen Kurztrip einen Umzugswagen mieten.

Warum die Auflösung des Bildschirms mitspielt

Ein Bild wird nicht immer auf einem Bildschirm mit derselben Pixeldichte betrachtet. Moderne Mobiltelefone und Laptops können auf derselben Fläche mehr Bildpunkte darstellen als ältere Geräte. Darum kann ein Bild, das in der Seitenansicht 800 Bildpunkte breit erscheint, auf einem besonders hochauflösenden Bildschirm weicher wirken, wenn die Quelldatei genau 800 Bildpunkte breit ist.

Eine praktische Faustregel lautet: Für ein Bild, das etwa 800 Bildpunkte breit angezeigt wird, kann eine Quelldatei mit ungefähr 1200 bis 1600 Bildpunkten Breite sinnvoll sein, wenn eine besonders scharfe Darstellung wichtig ist. Das bedeutet aber nicht, dass du jedes Bild auf deiner Website riesig hochladen solltest. WordPress kann je nach Gestaltung und Einbindung verschiedene Bildgrößen bereitstellen. Wichtig ist, dass das verwendete Theme und die eingebauten Bildfunktionen passende Varianten ausliefern.

Prüfe die tatsächliche Darstellung auf einem Mobiltelefon und auf einem größeren Bildschirm. Ein Bild kann am Schreibtisch tadellos wirken und auf dem Telefon plötzlich einen unschönen Ausschnitt zeigen. Besonders bei Porträts, Produktfotos und Texten im Bild lohnt sich dieser Blick.

Das richtige Dateiformat wählen

Das Format beeinflusst sowohl die Bildqualität als auch die Dateigröße. Für die meisten Websites kommen heute vor allem JPEG, PNG und WebP infrage. Jedes Format hat seine Stärken – und seine kleinen Eigenheiten.

• JPEG: Geeignet für Fotos mit vielen Farben und weichen Übergängen. Die Kompression kann die Datei deutlich verkleinern. Wird sie zu stark eingestellt, entstehen jedoch sichtbare Unschärfen oder störende Flächen.

• PNG: Sinnvoll für Grafiken, die transparente Bereiche benötigen, oder für Motive mit klaren Kanten und wenigen Farben. Für gewöhnliche Fotos ist PNG oft unnötig groß.

• WebP: Ein modernes Format, das bei Fotos und Grafiken häufig eine gute Bildqualität mit einer kleineren Datei verbindet. Es eignet sich für viele Websitebilder, sofern die verwendeten Werkzeuge und Systeme es unterstützen.

• SVG: Für Logos, Symbole und einfache Vektorgrafiken. Solche Grafiken bleiben beim Vergrößern scharf. SVG ist jedoch kein Ersatz für ein Foto.

Bei einem Urlaubsfoto ist JPEG oder WebP meist passend. Ein Logo mit transparentem Hintergrund kann als PNG oder SVG besser aufgehoben sein. Die Wahl sollte also zum Inhalt passen – nicht bloß zum Dateinamen, der gerade auf dem Rechner liegt.

Wie groß sollte eine Bilddatei sein?

Für viele Bilder im Seiteninhalt ist eine Dateigröße unter 200 Kilobyte ein gutes Ziel. Bei größeren Aufmacherbildern können 200 bis 400 Kilobyte vertretbar sein, besonders wenn das Motiv eine hohe Bildqualität braucht. Das sind jedoch keine starren Grenzwerte. Entscheidend ist, wie viele Bilder auf einer Seite geladen werden und wie groß sie dargestellt werden.

Ein einzelnes Bild mit 350 Kilobyte fällt kaum ins Gewicht. Zehn solcher Bilder können die Seite dagegen spürbar verlangsamen. Ein großes Titelbild, mehrere Produktfotos und eine Galerie sollten deshalb gemeinsam betrachtet werden. Die Ladezeit ist Mannschaftssport: Auch ein gut optimiertes Bild kann die anderen nicht allein retten.

Komprimiere Bilder, bevor du sie hochlädst, oder nutze ein vertrauenswürdiges WordPress-Erweiterungsprogramm zur Bildoptimierung. Achte darauf, dass die Kompression nicht zu sichtbaren Bildfehlern führt. Ein Vergleich bei vergrößerter Ansicht hilft: Wenn Haare, Schrift oder feine Konturen matschig aussehen, war die Kompression wahrscheinlich zu großzügig.

Das Bild für verschiedene Geräte vorbereiten

Eine Website wird auf Mobiltelefonen, Tablets und großen Bildschirmen betrachtet. Dafür muss nicht zwangsläufig für jedes Gerät eine eigene Datei von Hand erstellt werden. WordPress kann bei geeigneten Bildern mehrere Größen bereitstellen und Browsern Hinweise geben, welche Variante zu einer Bildschirmgröße passt.

Diese Funktion hilft nur, wenn das Bild sinnvoll eingebunden ist. Lade also nicht einfach ein besonders kleines Bild hoch und ziehe es im Seiteneditor auf die doppelte Größe. Das führt oft zu sichtbaren Qualitätsverlusten. Umgekehrt solltest du ein riesiges Original nicht immer als einzige verfügbare Variante verwenden.

Bei einem Bild, das auf kleinen Bildschirmen einen anderen Ausschnitt zeigen soll, reicht eine andere Breite manchmal nicht aus. Dann kann eine eigene Mobilversion oder eine angepasste Bilddarstellung sinnvoll sein. Das ist besonders bei Werbebannern und Titelbildern wichtig, bei denen der Bildausschnitt die Aussage trägt.

Bilder in WordPress richtig einsetzen

WordPress erstellt für hochgeladene Bilder in der Regel mehrere Bildgrößen. Welche Varianten verfügbar sind, hängt unter anderem von den Einstellungen und dem verwendeten Theme ab. Wähle im Editor möglichst die passende Bildgröße, statt immer das Original in voller Auflösung einzusetzen.

Wenn Vorschaubilder unerwartet zugeschnitten werden, lohnt sich ein Blick auf die Einstellungen des Themes und der betreffenden Blockgestaltung. Ein Ausschnitt kann gestalterisch gewollt sein – ärgerlich wird es, wenn dabei ein Gesicht, ein Produktdetail oder die entscheidende Hälfte einer Grafik verschwindet.

Prüfe außerdem nach einem Wechsel des Themes, ob die Bildgrößen noch zur neuen Gestaltung passen. Ein neues Theme kann andere Abmessungen für Beitragsbilder verwenden. Gegebenenfalls müssen vorhandene Vorschaubilder neu erstellt werden, damit alte Bilder nicht unscharf oder ungünstig beschnitten erscheinen.

Bildoptimierung und Suchmaschinenfreundlichkeit

Optimierte Bilder können zu kürzeren Ladezeiten beitragen. Das ist gut für Besucher und kann auch die technische Qualität einer Seite verbessern. Suchmaschinenfreundlichkeit besteht jedoch nicht nur aus kleinen Dateien. Aussagekräftige Dateinamen und passende Alternativtexte helfen dabei, Bilder verständlicher einzuordnen.

Statt IMG_8472.jpg ist ein beschreibender Dateiname wie wordpress-bildgroesse-titelbild.jpg hilfreicher. Beschreibe im Alternativtext knapp, was auf dem Bild zu sehen ist und warum es im Zusammenhang mit dem Inhalt wichtig ist. Der Alternativtext ist vor allem für Menschen gedacht, die das Bild nicht sehen können – kein Platz für eine Liste mit möglichst vielen Suchbegriffen.

Wenn ein Bild rein dekorativ ist und keine zusätzliche Information vermittelt, sollte sein Alternativtext nicht künstlich mit Beschreibungen aufgebläht werden. Barrierefreiheit ist kein Suchwort-Buffet.

Ein einfacher Arbeitsablauf für neue Bilder

Mit einem festen Ablauf sparst du Zeit und vermeidest unnötig schwere Bilddateien. Für jedes Bild kannst du diese Schritte nutzen:

• Lege fest, wo das Bild erscheinen und wie breit es dort ungefähr dargestellt werden soll.

• Wähle ein passendes Seitenverhältnis. Ein breites Titelbild braucht meist ein anderes Verhältnis als ein quadratisches Produktbild.

• Schneide das Bild auf den gewünschten Ausschnitt zu und passe die Abmessungen an den geplanten Einsatz an.

• Speichere es in einem geeigneten Format, zum Beispiel WebP für viele Fotos oder PNG für Grafiken mit Transparenz.

• Komprimiere die Datei und prüfe anschließend, ob feine Details und Farben noch gut aussehen.

• Vergib einen verständlichen Dateinamen und ergänze im WordPress-Editor einen passenden Alternativtext.

• Kontrolliere das Ergebnis auf dem Mobiltelefon und auf einem größeren Bildschirm.

Häufige Fehler, die sich leicht vermeiden lassen

Ein klassischer Fehler ist das Hochladen von Originalfotos direkt aus der Kamera. Solche Dateien können mehrere Megabyte groß sein, obwohl sie auf der Website nur als kleines Bild erscheinen. Verkleinere und komprimiere sie vorher.

Auch das umgekehrte Problem kommt vor: Ein Bild wird zu stark verkleinert und später im Seiteneditor vergrößert. Dadurch wirkt es unscharf. Nutze eine Quelldatei, die zur dargestellten Größe passt, und lass WordPress geeignete Bildvarianten verwenden.

Ein weiterer Stolperstein ist das falsche Seitenverhältnis. Wird ein Bild automatisch zugeschnitten, kann ein wichtiger Teil des Motivs verschwinden. Kontrolliere den Ausschnitt direkt in der Vorschau. Und wenn du viele Bilder auf einmal optimierst, behalte die Originale oder arbeite mit einer Sicherung. So kannst du zurück, falls die Kompression doch einmal zu eifrig war.

Die passende Größe findest du mit einem kurzen Test

Beginne mit der tatsächlichen Anzeigegröße, wähle eine ausreichend große Quelldatei und optimiere dann die Dateigröße, ohne sichtbare Qualität zu opfern. Für ein typisches Bild im Fließtext können 800 bis 1200 Bildpunkte Breite und weniger als 200 Kilobyte ein guter Start sein. Große Titelbilder dürfen mehr Platz beanspruchen, sollten aber nicht automatisch in voller Originalauflösung geladen werden.

Teste die Seite anschließend auf verschiedenen Geräten und achte auf drei Dinge: Wird das Bild scharf dargestellt? Bleibt der wichtige Bildausschnitt sichtbar? Lädt die Seite zügig? Wenn du diese Fragen mit Ja beantworten kannst, ist das Format wahrscheinlich gut gewählt. Dann darf dein Bild gern für sich sprechen – nur bitte ohne die Besucher unnötig warten zu lassen.