Die beste Bildgröße und -qualität fürs Web (nach Einsatzzweck)

„Wie groß sollen meine Bilder sein?“ ist eine der häufigsten Fragen im Webdesign — und die Antwort lautet immer: „Kommt darauf an, wo sie gezeigt werden.“ Die falsche Größe macht die Seite langsam oder das Bild schlecht; mit Richtwerten je Einsatzzweck vermeidest du beides. Dieser Leitfaden liefert praktische Startwerte für Abmessungen, Dateigröße und Qualität — Schluss mit dem Raten.

Zwei Zahlen, die zählen

Jedes Webbild hat zwei Größen: die Pixelmaße (etwa 1600×900) und die Dateigröße in Kilobyte. Die Maße sollten ungefähr dem Platz entsprechen, den das Bild auf dem Bildschirm einnimmt; die Dateigröße so klein wie möglich sein, solange das Bild sauber aussieht. Beides zu optimieren ist das Ziel.

Richtwerte nach Einsatzzweck

Hero-Bilder in voller Breite

Ziele auf etwa 1600–2000 px Breite für große Bildschirme und halte die Datei mit WebP oder AVIF unter rund 200 KB. Da das Hero meist das LCP-Element ist, wirkt sein Gewicht überproportional auf die gefühlte Geschwindigkeit.

Blog- und Inhaltsfotos

Die meisten Artikelspalten sind 700–900 px breit, also deckt ein Bild mit 1200–1600 px auch Retina-Displays ab. Ziel: deutlich unter 150 KB. Qualität 75 in WebP reicht fast immer.

Thumbnails und Karten

Thumbnails sind klein auf dem Bildschirm — 400–600 px genügen locker. Oft lassen sie sich unter 30–50 KB drücken, was viel ausmacht, wenn eine Seite Dutzende zeigt.

Ein Startwert für die Qualität

Bei verlustbehafteten Formaten ist Qualität 70–80 der sichere Bereich für Fotos. AVIF erreicht denselben Eindruck mit etwas niedrigeren Werten. Vergleiche immer Vorher/Nachher — richtig ist der niedrigste Wert, bei dem du keinen Unterschied siehst.

In die Praxis umsetzen

Lege je Einsatzzweck eine Zielbreite fest, skaliere darauf und konvertiere zu WebP oder AVIF mit Qualität 75. Mit Scrunch konvertierst du ganze Bildersets im Stapel und prüfst jedes Ergebnis vor dem Download gegen das Original — so bleibt jedes Bild genau so leicht, wie es sein muss.

Häufige Fragen

Darf ich Bilder größer als die Anzeigegröße hochladen?

Bis etwa 2x der Anzeigegröße ist sinnvoll für Retina-Displays. Darüber hinaus verschwendest du nur Bandbreite und bremst die Seite — betrachte 2x als Obergrenze.

Ist kleiner immer besser?

Drückst du zu stark, leidet die Qualität sichtbar. Ziel ist die kleinste Datei, die noch sauber aussieht. Vergleiche Vorher/Nachher, um die Balance zu finden.

Sollte ich überall dieselbe Qualität verwenden?

Qualität 75 ist ein solider Standard, aber bei großen Hero-Bildern darfst du vorsichtiger sein und bei kleinen Thumbnails aggressiver. Anpassung je Einsatzzweck bringt die besten Ergebnisse.

Beeinflussen Dateinamen das SEO?

Ja. Beschreibende Dateinamen und Alt-Texte helfen der Bildersuche und der Barrierefreiheit. Besser red-running-shoes.webp als img12345.jpg. Zusammen mit Größen- und Gewichtsoptimierung stärkt das dein Bilder-SEO.