Warum du Bilder vor dem Hochladen auf deine Website verkleinern solltest

Warum große Bilder ein Problem sind

Ein Foto direkt aus dem Smartphone kann mehrere Megabyte groß sein und eine Auflösung besitzen, die auf einer normalen Website überhaupt nicht benötigt wird. Wird ein solches Bild unverändert eingebunden, muss der Browser trotzdem zunächst die komplette Datei herunterladen – auch wenn das Bild auf der Seite anschließend viel kleiner dargestellt wird.

Das macht sich vor allem bei mehreren Bildern bemerkbar. Aus einigen unnötig großen Dateien werden schnell viele Megabyte, die beim Aufruf der Seite übertragen werden müssen. Auf einer schnellen Internetverbindung fällt das vielleicht kaum auf, unterwegs auf dem Smartphone dagegen schon. Und auch Suchmaschinen berücksichtigen die Ladegeschwindigkeit einer Website.

Wie groß sollte ein Bild für eine Website sein?

Die passende Größe hängt davon ab, wo das Bild verwendet wird. Ein Foto muss nicht 4.000 oder 6.000 Pixel breit sein, wenn es auf der Website später nur mit 800 oder 1.200 Pixeln dargestellt wird.

Als einfache Orientierung kannst du mit diesen Größen arbeiten:

• Kleine Bilder und Vorschaubilder: etwa 600–800 Pixel Breite
• Normale Bilder im Seiteninhalt: etwa 1.200–1.600 Pixel Breite
• Große Bilder über die gesamte Seitenbreite: etwa 1.920–2.400 Pixel Breite

Mehr ist für eine normale Website nur selten nötig. Wichtig ist dabei, das Seitenverhältnis beizubehalten, damit das Bild beim Verkleinern nicht verzerrt wird.

Etwas Reserve darf durchaus sein. Ein Bild muss also nicht exakt die Größe haben, in der es später angezeigt wird. Gerade auf hochauflösenden Displays kann eine etwas größere Datei sinnvoll sein. Das ist aber etwas anderes, als ein riesiges Originalfoto unverändert hochzuladen.

Welches Dateiformat eignet sich?

Neben den Abmessungen spielt auch das Dateiformat eine wichtige Rolle. Für Webseiten begegnen dir vor allem JPEG, WebP und PNG. Welches Format sinnvoll ist, hängt vom Bild ab.

• JPEG: eignet sich gut für Fotos und Bilder mit vielen Farben. Die Dateien lassen sich stark verkleinern, allerdings geht dabei – je nach Komprimierung – etwas Bildqualität verloren.
• WebP: ist für Webseiten meistens eine sehr gute Wahl. Das Format bietet bei vergleichbarer Bildqualität häufig kleinere Dateien als JPEG und unterstützt außerdem transparente Bereiche.
• PNG: eignet sich besonders für Grafiken, Logos oder Bilder, bei denen Transparenz und scharfe Kanten wichtig sind. Für normale Fotos werden PNG-Dateien dagegen oft unnötig groß.

Ein weiteres modernes Format ist AVIF. Es kann Bilder noch effizienter komprimieren und wird von aktuellen Browsern unterstützt. Im Alltag musst du dich damit aber nicht unbedingt beschäftigen – viele moderne Webseiten und Werkzeuge kümmern sich inzwischen selbst um geeignete Bildformate.

Für die meisten Fälle gilt deshalb ganz pragmatisch: Fotos als WebP oder JPEG, Grafiken mit Transparenz als WebP oder PNG. Entscheidend ist am Ende nicht der Name des Formats, sondern ein gutes Verhältnis aus Bildqualität und Dateigröße.

Wie verkleinere ich ein Bild?

Dafür brauchst du nicht unbedingt ein professionelles Bildbearbeitungsprogramm. Entscheidend ist, dass du die Abmessungen des Bildes reduzierst und es anschließend in einem geeigneten Format speicherst.

Unter Windows kannst du dafür bereits einfache Bordmittel verwenden. Auch Programme zur Bildbearbeitung bieten beim Ändern der Bildgröße die Möglichkeit, eine neue Breite festzulegen. Achte darauf, dass das Seitenverhältnis beibehalten wird – dann wird die Höhe automatisch passend angepasst.

Online-Werkzeuge können ebenfalls praktisch sein: Bild auswählen, gewünschte Größe festlegen, komprimieren und die kleinere Version wieder herunterladen. Bei privaten oder vertraulichen Bildern solltest du allerdings bedenken, dass die Datei dafür zunächst zu einem fremden Anbieter hochgeladen wird.

Bildbearbeitungsprogramme bieten die meiste Kontrolle. Dort kannst du neben den Abmessungen meist auch Dateiformat und Komprimierungsstärke festlegen. Für den normalen Einsatz auf einer Website ist dafür aber keine teure Profi-Software erforderlich.

WordPress erstellt beim Hochladen zwar automatisch verschiedene kleinere Varianten eines Bildes. Trotzdem ist es sinnvoll, bereits das Original in einer vernünftigen Größe hochzuladen. Ein riesiges Smartphonefoto mit mehreren Tausend Pixeln Breite muss nicht dauerhaft auf dem Webserver liegen, wenn es dort niemals in dieser Größe gebraucht wird.

Mein einfacher Grundsatz: Erst auf eine sinnvolle Größe bringen, dann hochladen. Aus einem 6.000 Pixel breiten Foto für ein normales Inhaltsbild beispielsweise zunächst eine Version mit etwa 1.600 Pixeln Breite erstellen – das reicht in vielen Fällen völlig aus.

Nicht vergessen: Dateiname und Alternativtext

Bevor du das verkleinerte Bild hochlädst, lohnt sich noch ein Blick auf den Dateinamen. Namen wie IMG_8472.jpg oder DSC_0135.jpg sagen nichts über den Inhalt aus. Ein verständlicher Name wie rote-hortensie-im-garten.jpg macht die Datei dagegen auch später in der Mediathek leichter auffindbar.

Beim Hochladen solltest du außerdem prüfen, ob das Bild einen Alternativtext benötigt. Dieser beschreibt den Inhalt oder die Funktion eines Bildes für Menschen, die es nicht sehen können – beispielsweise weil sie einen Screenreader verwenden.

Dabei gilt nicht: Je mehr Text, desto besser. Ein Alternativtext sollte kurz und sinnvoll beschreiben, was für den Zusammenhang der Seite wichtig ist. Ein Foto einer roten Hortensie könnte beispielsweise schlicht den Alternativtext „Rote Hortensie im Garten“ erhalten.

Reine Dekoration benötigt dagegen normalerweise keinen beschreibenden Alternativtext. In diesem Fall sollte das entsprechende Alt-Attribut leer bleiben, damit ein Screenreader das Bild überspringen kann.

Wichtig: Der Alternativtext ist kein Platz für eine Ansammlung von Suchbegriffen. Beschreibe stattdessen kurz und sinnvoll, was das Bild im Zusammenhang mit der Seite vermittelt.