Bilder fürs Web verkleinern: schnelle Ladezeiten, gutes Ranking

Warum große Bilder Webseiten ausbremsen

Bilder machen auf den meisten Webseiten den größten Teil des übertragenen Datenvolumens aus. Text wiegt selten mehr als ein paar Kilobyte, ein einziges unbearbeitetes Foto aus der Handykamera kann dagegen schnell vier oder fünf Megabyte schwer sein. Wenn auf einer Seite drei oder vier solcher Bilder liegen, muss der Browser des Besuchers zweistellige Megabyte herunterladen, bevor die Seite vollständig steht. Das kostet Zeit, und Zeit kostet Besucher.

Der entscheidende Punkt ist, dass die meisten dieser Pixel gar nicht gebraucht werden. Eine Kamera liefert heute Bilder mit 4000 oder mehr Pixeln Breite. Im Layout einer Website wird dasselbe Bild aber vielleicht nur 800 Pixel breit dargestellt. Der Browser lädt also die volle Datei herunter und rechnet sie anschließend klein. Die zusätzlichen Pixel sieht niemand, sie belasten nur die Leitung. Genau hier setzt das Verkleinern an: Du lieferst von vornherein nur so viele Pixel aus, wie tatsächlich angezeigt werden.

Ladezeit, Core Web Vitals und mobiles Datenvolumen

Google misst die Nutzererfahrung einer Seite mit den Core Web Vitals. Eine der wichtigsten Kennzahlen darin ist der Largest Contentful Paint, also der Zeitpunkt, an dem das größte sichtbare Element fertig geladen ist. In den allermeisten Fällen ist dieses größte Element ein Bild, oft das Hero-Bild ganz oben. Ist dieses Bild zu schwer, verschlechtert sich der Wert direkt, und das fließt in die Bewertung deiner Seite ein.

Schnelle Ladezeiten sind also kein reines Komfortthema, sie wirken sich messbar auf das Ranking aus. Google bevorzugt Seiten, die zügig und stabil laden, weil Nutzer das ebenfalls tun. Wer hier nachlässig ist, kämpft mit höheren Absprungraten und schwächeren Platzierungen zugleich.

Dazu kommt das mobile Datenvolumen. Ein großer Teil der Besucher kommt über das Smartphone, oft im Mobilfunknetz mit begrenztem Datentarif. Jedes überflüssige Megabyte, das du auslieferst, kostet diese Nutzer echtes Geld und Geduld. Auf einer langsamen Verbindung kann ein unkomprimiertes Bild den Unterschied zwischen einer Seite ausmachen, die in einer Sekunde steht, und einer, bei der man Sekundenbruchteile auf jeden Bildaufbau wartet. Schlanke Bilder sind damit auch ein Stück Rücksichtnahme.

Die richtige Pixelgröße wählen

Die wichtigste Regel lautet: Ein Bild sollte nicht größer sein als die Fläche, in der es angezeigt wird. Bevor du ein Bild verkleinerst, lohnt sich deshalb ein kurzer Blick darauf, wie breit es im fertigen Layout tatsächlich erscheint. Bei einem Blogartikel mit zentriertem Inhaltsbereich sind das häufig 700 bis 800 Pixel. Eine Vorschaugrafik in einer Übersicht braucht oft nur 300 oder 400 Pixel. Ein vollflächiges Hintergrundbild über die gesamte Bildschirmbreite kann dagegen 1920 Pixel oder mehr verlangen.

Hat das Originalbild deutlich mehr Pixel als die Anzeigefläche, kannst du es bedenkenlos auf die passende Breite herunterskalieren. Die Höhe ergibt sich dabei automatisch, wenn du das Seitenverhältnis beibehältst. Wichtig ist nur, nicht unter die benötigte Breite zu gehen, sonst wirkt das Bild unscharf oder pixelig.

Ein Sonderfall sind hochauflösende Displays, etwa Retina-Bildschirme oder moderne Smartphones. Diese stellen pro Layout-Pixel zwei oder mehr physische Bildpunkte dar. Damit ein Bild dort gestochen scharf bleibt, plant man in der Praxis etwa die doppelte Breite ein. Für eine Anzeigefläche von 800 Pixeln liefert man also ein Bild mit rund 1600 Pixeln aus. Das ist immer noch ein Bruchteil der originalen 4000 Pixel und damit ein riesiger Gewinn.

Konkrete Zielmaße für typische Einsatzorte

Damit du nicht jedes Mal neu rechnen musst, hier eine Orientierung für die häufigsten Stellen auf einer Website. Die Werte gelten für die Bildbreite und sind als Ausgangspunkt gedacht, den du an dein konkretes Layout anpasst.

Einsatzort	Empfohlene Zielbreite	Hinweis
Hero- oder Vollbreitenbild	1600 bis 2000 px	Größter Hebel, hier besonders auf Dateigröße achten
Inhaltsbild im Artikel	800 bis 1200 px	Deckt zentrierte Textbereiche und Retina ab
Vorschaubild in Übersicht	400 bis 600 px	Mehrere pro Seite, klein halten zahlt sich doppelt aus
Thumbnail oder Avatar	150 bis 300 px	Sehr klein, oft quadratisch zugeschnitten
Logo	200 bis 400 px	Bei Logos eignet sich oft SVG noch besser
Produktbild im Shop	800 bis 1000 px	Zoomansicht ggf. mit separater größerer Datei

Diese Maße sind keine starren Vorgaben, sondern verhindern den häufigsten Fehler: das versehentliche Hochladen von Originaldateien mit mehreren Tausend Pixeln Breite an Stellen, wo ein Bruchteil davon reicht.

Skalieren und Komprimieren kombinieren

Verkleinern und Komprimieren sind zwei verschiedene Stellschrauben, und ihre Wirkung addiert sich. Das Skalieren senkt die Anzahl der Pixel, das Komprimieren reduziert die Datenmenge pro Pixel, indem feine Details, die das Auge ohnehin kaum wahrnimmt, weggelassen werden. Wer nur eine der beiden Maßnahmen nutzt, lässt Potenzial liegen.

Die richtige Reihenfolge ist erst skalieren, dann komprimieren. Bringst du ein Bild zunächst auf die nötige Pixelbreite und drückst danach die Qualität auf einen vernünftigen Wert, holst du das Maximum heraus. Bei JPEG liefert eine Qualitätsstufe zwischen 75 und 85 Prozent in den allermeisten Fällen ein Ergebnis, das vom Original nicht zu unterscheiden ist, aber nur einen Bruchteil wiegt. Erst darunter werden Komprimierungsspuren wie Klötzchenbildung sichtbar.

Ein praktisches Vorgehen: Lade das Originalfoto in ein Tool wie bildskalieren.de, setze die Breite auf den Zielwert aus der Tabelle oben und exportiere das Ergebnis. Aus einem fünf Megabyte schweren Originalbild werden so leicht 100 bis 200 Kilobyte, ohne dass der Besucher einen Qualitätsunterschied bemerkt. Bei mehreren Bildern pro Seite summiert sich das zu einem deutlich leichteren Gesamtgewicht.

Moderne Formate und responsive Bilder

Neben Größe und Komprimierung spielt das Dateiformat eine Rolle. Das klassische JPEG ist für Fotos solide, moderne Formate gehen aber noch weiter. WebP liefert bei gleicher sichtbarer Qualität meist 25 bis 35 Prozent kleinere Dateien und wird heute von allen aktuellen Browsern angezeigt. Wenn dein System oder dein Baukasten WebP unterstützt, ist der Umstieg eine der einfachsten Maßnahmen mit großer Wirkung. Für ältere Umgebungen lässt sich ein JPEG als Fallback hinterlegen.

Noch einen Schritt weiter geht das Konzept der responsiven Bilder. Über das Attribut srcset im HTML kannst du dem Browser mehrere Varianten desselben Bildes in verschiedenen Breiten anbieten. Der Browser wählt dann selbstständig die passende Version für die jeweilige Bildschirmgröße. Ein Smartphone lädt so eine kleine Variante, ein großer Monitor die volle Auflösung. Das ist die sauberste Lösung, weil niemand mehr Pixel bekommt, als er braucht. Viele Content-Management-Systeme und Website-Baukästen erzeugen diese Varianten heute automatisch, sobald du ein Bild hochlädst.

Du musst nicht alles auf einmal umsetzen. Schon das konsequente Verkleinern auf die nötige Breite plus eine vernünftige Komprimierung bringt den Löwenanteil der Verbesserung. Moderne Formate und responsive Bilder sind die Kür, die du nach und nach ergänzen kannst.

Worauf es ankommt

Große Bilder sind der häufigste und zugleich am leichtesten zu behebende Grund für langsame Webseiten. Der wichtigste Schritt ist, jedes Bild auf die Breite zu bringen, in der es tatsächlich angezeigt wird, statt Originaldateien mit mehreren Tausend Pixeln auszuliefern. Danach senkt eine moderate Komprimierung das Gewicht weiter, ohne sichtbar an Qualität zu verlieren. Wer zusätzlich auf WebP setzt und responsive Varianten anbietet, holt das letzte Stück Geschwindigkeit heraus. Der Aufwand ist gering, der Effekt auf Ladezeit, Core Web Vitals und damit auf das Ranking dagegen groß.