Bild zu groß für die Website: Maße, Format, Dateigröße

Ein Bild ist auf zwei ganz verschiedene Arten zu groß: in den Maßen (Pixel) und in der Dateigröße (Kilobyte). Beides hängt zusammen, aber die Reihenfolge entscheidet über das Ergebnis. Zuerst die Maße auf das setzen, was die Seite tatsächlich anzeigt, dann komprimieren, dann als WebP speichern. Wer umgekehrt vorgeht, bekommt ein Bild, das trotz kleiner Datei matschig aussieht. Darunter stehen die Richtwerte, mit denen ich arbeite, und der Weg dorthin.

Was heißt bei einem Bild überhaupt „zu groß“?

Es sind zwei Werte, die oft verwechselt werden.

• Die Maße sind Breite und Höhe in Pixeln, zum Beispiel 4000 × 3000. Sie bestimmen, wie viel Bildinformation überhaupt vorhanden ist.
• Die Dateigröße ist das, was übertragen wird, gemessen in Kilobyte oder Megabyte. Sie ergibt sich aus den Maßen, dem Format und der Kompressionsstufe.

Ein Foto direkt vom Handy hat heute schnell 4000 Pixel Breite und mehrere Megabyte. Angezeigt wird es in einem Beitrag vielleicht 800 Pixel breit. Der Browser lädt trotzdem die vollständige Datei und rechnet sie erst danach klein. Bezahlt wird die volle Größe, sichtbar ist ein Bruchteil davon. Deshalb sind Bilder bei den meisten Seiten, die ich mir ansehe, der größte einzelne Bremsklotz – mehr dazu in den sieben Ursachen für eine langsame Website.

Welche Maße braucht ein Bild auf der Website wirklich?

Maßgeblich ist die Breite, in der das Bild angezeigt wird, nicht die Breite des Bildschirms. Dazu kommt ein Aufschlag: Moderne Displays stellen zwei Bildpunkte dar, wo früher einer war. Ein Bild, das doppelt so breit ist wie sein Anzeigebereich, wirkt deshalb schärfer. Mehr als das Doppelte bringt nichts mehr.

Ich komme in der Praxis mit zwei Größen aus:

• 2000 Pixel Breite für Bilder, die über die volle Seitenbreite laufen – Kopfbilder, Hintergründe, große Bühnen.
• 1200 Pixel Breite für alles, was im Textfluss steht: Beitragsbilder, Screenshots, Produktfotos.
• SVG für Logos, Icons und einfache Diagramme. Das ist keine Pixelgrafik, sondern eine Beschreibung von Formen, und damit in jeder Größe scharf. WordPress nimmt SVG allerdings aus Sicherheitsgründen nicht ohne Weiteres an.

Noch ein technischer Punkt, den viele nicht kennen: WordPress rechnet Uploads seit Version 5.3 automatisch herunter, sobald Breite oder Höhe 2560 Pixel überschreiten. PNG-Dateien sind davon ausgenommen. Wer größer hochlädt, gibt die Kontrolle darüber ab, wie das Bild verkleinert und neu komprimiert wird. Wie die passenden Größen dann auf verschiedenen Geräten ausgespielt werden, steht in den Punkten zur responsiven Webseite.

JPG, PNG, WebP oder AVIF – welches Format nehme ich?

• WebP ist der Normalfall. Es liegt bei gleicher Qualität deutlich unter JPG und wird laut caniuse.com (Stand September 2026) von 96,8 Prozent der weltweit genutzten Browser unterstützt. WordPress nimmt WebP-Uploads seit Version 5.8 an.
• AVIF ist noch einmal kleiner und kommt auf 95,4 Prozent Unterstützung. WordPress erlaubt es seit Version 6.5 – aber nur, wenn die Bildbibliothek des Servers mitspielt. Unter Werkzeuge → Website-Zustand → Bericht steht unter „Medienverarbeitung“, ob das der Fall ist.
• JPG bleibt richtig, wenn maximale Kompatibilität wichtiger ist als die letzten Kilobyte.
• PNG nur bei Transparenz oder harten Kanten, etwa bei Screenshots mit Text. Bei Fotos erzeugt PNG unnötig große Dateien – und wird von WordPress eben nicht heruntergerechnet.
• HEIC gehört nicht ins Web. Das ist das Standardformat vieler iPhones, aber Browser zeigen es nicht an und WordPress nimmt es ohne Zusatzplugin nicht entgegen. Solche Dateien müssen vorher umgewandelt werden.

Wichtig: Weder WordPress noch der Browser wandelt ein hochgeladenes JPG von sich aus in WebP um. Das passiert entweder vor dem Hochladen oder durch ein Plugin, das nachträglich Kopien anlegt.

Wie klein muss die Datei am Ende sein?

Einen offiziellen Grenzwert gibt es nicht. Was Google misst, ist der Largest Contentful Paint: Das größte sichtbare Element soll laut web.dev innerhalb von 2,5 Sekunden stehen, gemessen am 75. Perzentil der echten Seitenaufrufe. In der Regel ist genau dieses größte Element ein Bild. Die Dateigröße ist also kein Selbstzweck, sondern der Hebel für diesen Wert.

Meine Richtwerte, an denen ich mich orientiere:

• Bild im Textfluss: unter 150 KB
• Großes Kopfbild über die volle Breite: unter 300 KB
• Logo als SVG: unter 20 KB
• Qualitätsstufe beim Export: 75 bis 80. Darüber wächst die Datei schneller als die sichtbare Qualität.

Warum sieht mein Bild nach dem Hochladen schlechter aus als vorher?

Dafür gibt es drei übliche Gründe.

1. Das Bild wurde hochgerechnet. Eine 600 Pixel breite Datei auf 1600 Pixel zu ziehen fügt keine Information hinzu, sondern erfindet Bildpunkte. Das sieht man.
2. Es wurde zweimal komprimiert. Ein bereits stark komprimiertes JPG noch einmal durch ein Kompressionsplugin zu schicken verstärkt die Artefakte, statt sie zu entfernen.
3. WordPress hat gerechnet. Über 2560 Pixel wird heruntergerechnet, und alle daraus erzeugten Zwischengrößen werden neu komprimiert – mit den Einstellungen des Systems, nicht mit Ihren.

Die Lösung ist in allen drei Fällen dieselbe: das Bild vor dem Hochladen auf die Zielmaße bringen und in der gewünschten Qualität exportieren. Dann gibt es für WordPress nichts mehr zu rechnen.

In welcher Reihenfolge gehe ich vor?

1. Vom Original ausgehen, nie von einer bereits verkleinerten Kopie. Wer in Photoshop arbeitet, legt das Motiv als Smartobjekt an – dann bleibt die volle Auflösung erhalten, egal wie oft skaliert wird.
2. Zuschneiden. Erst den Ausschnitt festlegen, denn abgeschnittene Bildbereiche kosten sonst weiter Kilobyte.
3. Auf die Zielbreite skalieren – 1200 oder 2000 Pixel, je nach Einsatz.
4. Dateinamen setzen: Kleinbuchstaben, Bindestriche statt Leerzeichen, beschreibend. Also ferienwohnung-balkon-suedseite.webp statt IMG_4021.webp.
5. Als WebP exportieren, Qualität um 80.
6. Hochladen und Alt-Text schreiben – ein Satz, der beschreibt, was zu sehen ist.

Der Fehler, den ich selbst jahrelang gemacht habe: Schritt fünf vor Schritt drei. Erst komprimieren, dann verkleinern. Das funktioniert nicht, weil Kompressionsartefakte beim Verkleinern nicht verschwinden – sie werden nur kleiner und bleiben trotzdem sichtbar. Seit ich die Reihenfolge umgedreht habe, brauche ich keine Nachbearbeitung mehr.

Die Schritte zwei bis fünf erledigt PicPrepper in einem Durchgang, direkt im Browser und ohne Installation: Bild hineinziehen, Format wählen, exportieren. Ich habe das Werkzeug gebaut, weil ich diesen Ablauf jeden Tag brauche – für Websites ebenso wie für Social-Media-Formate.

Häufige Fragen

Reicht ein Kompressions-Plugin in WordPress nicht aus?

Es hilft, löst aber nur die halbe Aufgabe. Ein Plugin verkleinert die Datei, nicht die Maße – ein 4000 Pixel breites Foto bleibt ein 4000 Pixel breites Foto. Und es arbeitet erst nach dem Hochladen, also auf einer Datei, die bereits durch die Verarbeitung von WordPress gelaufen ist. Die Maße gehören davor festgelegt.

Soll ich alle alten Bilder nachträglich austauschen?

Nein. Nehmen Sie sich die Startseite, die wichtigsten Leistungsseiten und die drei bis fünf meistbesuchten Beiträge vor. Dort liegt der spürbare Effekt. Der Rest kann mitlaufen, wenn die Seiten ohnehin überarbeitet werden.

Warum ist mein Bild am Handy unscharf, am Rechner aber nicht?

Weil Handydisplays eine höhere Pixeldichte haben. Ein Bild, das auf einem älteren Monitor sauber wirkt, muss auf dem Telefon die doppelte Anzahl an Bildpunkten füllen. Wenn die Datei das nicht hergibt, wird sie hochgerechnet – und wirkt weich.

Muss ich jetzt auf AVIF umstellen?

Nein. WebP deckt praktisch dasselbe Publikum ab und funktioniert auf jedem Hosting. AVIF lohnt sich, wenn Sie sehr viele große Bilder ausliefern und der Server die nötige Bildbibliothek mitbringt. Für eine normale Unternehmensseite ist der Unterschied den Aufwand selten wert.

Was mache ich mit HEIC-Dateien vom iPhone?

Umwandeln, bevor sie in die Mediathek kommen. Am iPhone lässt sich unter Einstellungen → Kamera → Formate auf „Maximale Kompatibilität“ stellen, dann entstehen gleich JPG-Dateien. Bestehende HEIC-Aufnahmen konvertieren Sie beim Aufbereiten mit.

Darf ich Bilder verwenden, die ich im Netz gefunden habe?

Grundsätzlich nicht ohne Erlaubnis oder passende Lizenz – das gilt auch für Bilder aus einer Suchmaschine oder aus sozialen Netzwerken. Sicher sind eigene Aufnahmen, gekaufte Bilder und Material unter einer ausdrücklich freien Lizenz, deren Bedingungen Sie einhalten. Das ist eine allgemeine Einordnung und keine Rechtsberatung; im Zweifel fragen Sie jemanden, der dafür zuständig ist.

Fazit

Bilder sind der Teil der Ladezeit, den Sie ohne Entwickler und ohne Hostingwechsel selbst in der Hand haben. Zwei Zielbreiten, ein Format, eine Qualitätsstufe, die richtige Reihenfolge – mehr braucht es nicht. Wenn Sie das einmal für Ihre Seite festgelegt haben, ist es danach Routine.

Wenn Sie nicht sicher sind, welche Zielbreiten Ihre Seite überhaupt braucht, oder wenn die Ladezeit trotz aufbereiteter Bilder nicht besser wird, sehe ich mir das gerne an – über das Kontaktformular genügt eine kurze Beschreibung und die Adresse der Seite.