Illustration: KI-generiert
Ein Foto aus einer heutigen Kamera misst rund 6000 Pixel in der Breite und wiegt mehrere Megabyte. Auf einer Website erscheint dasselbe Bild dann 800 Pixel breit. Zwischen diesen beiden Zahlen liegt die gesamte Bildvorbereitung. Sie bringt die Datei auf das Maß, das tatsächlich gebraucht wird.
Was dabei herauskommt, merken Besucher als Erstes an der Geschwindigkeit — eine Seite mit fünf vorbereiteten Bildern lädt auf dem Telefon spürbar schneller als dieselbe Seite mit fünf Originaldateien. Nebenbei erledigen sich zwei weitere Dinge. Ein sprechender Dateiname macht das Bild in der Bildersuche auffindbar, und ein Alternativtext beschreibt es für alle, die es nicht sehen können.
Der Ablauf dauert nach etwas Übung zwei bis drei Minuten pro Bild, und ein Teil davon lässt sich einmalig einrichten. Die folgenden Abschnitte gehen ihn der Reihe nach durch, von der Auswahl über Zuschnitt und Format bis zu Dateiname, Alternativtext und Ladeverhalten.
Vor dem Bearbeiten: das richtige Bild wählen
Die technische Vorbereitung setzt ein gutes Motiv voraus, deshalb steht die Auswahl am Anfang. Ein Bild sollte etwas zeigen, das über den Text hinausgeht. Ein Foto Ihrer Werkstatt neben einem Absatz über Ihre Arbeitsweise trägt bei, während ein Symbolbild mit Händedruck neben dem Wort Vertrauen lediglich Platz füllt. Ebenso braucht es genug Auflösung für die geplante Anzeigegröße, mindestens die doppelte Pixelbreite, damit es auf modernen Bildschirmen scharf bleibt. Und die Nutzung sollte geklärt sein. Eigene Aufnahmen sind unbedenklich, gekaufte Bilder brauchen die passende Lizenz, und seit August 2026 gilt die Pflicht, KI-Bilder zu kennzeichnen.
Zuschnitt und Bildausschnitt
Der erste Schritt gilt dem Ausschnitt, und hier bestimmen Sie das Ergebnis vollständig selbst. Schneiden Sie ein Bild bereits im Verhältnis zu, in dem es später erscheint, dann sitzt das Motiv genau dort, wo Sie es haben möchten — statt dass der Browser die Wahl übernimmt.
Für die gängigen Stellen haben sich feste Seitenverhältnisse eingespielt. Ein Aufmacher im Hero-Bereich läuft meist im Verhältnis 16:9 oder flacher, Beitragsbilder in 3:2, Porträts in 3:4 und Vorschaubilder in Kacheln häufig quadratisch. Legen Sie diese Maße einmal fest, bevor Sie zuschneiden, dann fügt sich jedes neue Bild auf Anhieb ins Raster.
Werfen Sie dabei auch einen Blick auf die schmale Ansicht, denn dort zeigt der Browser meist einen engeren Ausschnitt. Wenn Sie das Wesentliche in die Bildmitte legen, funktioniert dasselbe Bild auf dem Telefon genauso gut wie am Schreibtisch — ein Handgriff, der Ihnen später eine zweite Fassung erspart.
Die richtige Ausgabegröße
Hier liegt der größte Hebel für die Ladezeit, und die Rechnung dahinter ist einfach. Maßgeblich ist allein die Breite, in der das Bild tatsächlich erscheint; die Auflösung der Kamera spielt dafür keine Rolle.
Ein Bild in einer dreispaltigen Kachelreihe erscheint auf einem 1400 Pixel breiten Bildschirm vielleicht 380 Pixel breit. Für scharfe Darstellung auf hochauflösenden Geräten braucht es die doppelte Menge, also rund 760 Pixel. Mit diesen 760 Pixeln ist das Bild auf jedem Gerät scharf, und jedes Kilobyte darüber hinaus bleibt Ihnen erspart. Ein Aufmacher über die volle Breite darf entsprechend 1600 bis 1920 Pixel messen, für ein Bild in einem Textabsatz genügen 1200.
Moderne Systeme nehmen Ihnen diese Rechnung ab. Sie erzeugen aus einer Vorlage mehrere Größen und liefern jedem Gerät die passende aus. Damit das funktioniert, laden Sie eine ausreichend große Fassung hoch — etwa 2000 Pixel Breite — und überlassen den Rest der Technik. Wo diese Automatik greift, ist die Arbeit hier bereits getan; andernfalls bringen Sie das Bild einmalig selbst auf die Anzeigegröße.
Format: JPG, WebP oder SVG
Für Fotos ist JPG nach wie vor die verlässliche Grundlage. Es wird überall verstanden, komprimiert Farbverläufe gut und lässt sich in der Qualität feinstufig regeln. Ein Wert zwischen 75 und 85 trifft fast immer die Mitte aus Aussehen und Dateigröße; darunter werden Kanten unruhig, darüber wächst allein die Datei.
WebP liefert bei gleicher Qualität etwa 25 bis 35 Prozent kleinere Dateien und beherrscht zusätzlich Transparenz. Sämtliche aktuellen Browser stellen es dar. Der übliche Weg führt deshalb über beides, mit WebP als bevorzugter Auslieferung und JPG als Rückfallebene. Auch das erledigen die meisten Systeme selbsttätig.
Für Logos, Symbole und einfache Grafiken führt SVG zum besten Ergebnis. Da es aus Rechenanweisungen besteht und nicht aus Bildpunkten, bleibt es in jeder Größe scharf und wiegt meist nur wenige Kilobyte. PNG bleibt jenen Fällen vorbehalten, in denen Transparenz gebraucht wird und WebP ausscheidet.
Komprimieren, bis es sich lohnt
Nach dem Zuschnitt folgt die Komprimierung, und hier liegt eine angenehme Überraschung: Bilder vertragen deutlich mehr, als man ihnen zutraut. Zwischen einer 3-Megabyte- und einer 200-Kilobyte-Fassung sieht das Auge auf dem Bildschirm meist keinen Unterschied.
Als Richtwerte taugen 300 Kilobyte für einen Aufmacher über die volle Breite, 150 für ein Beitragsbild und 80 für ein Vorschaubild in einer Kachel. Wer diese Werte erreicht, hat bei einer bildreichen Seite schnell mehrere Megabyte gespart — auf dem Telefon macht sich das unmittelbar bemerkbar.
Beim Speichern verschwinden nebenbei die Metadaten aus der Kamera. Das spart einige Kilobyte und schützt zugleich Ihre Privatsphäre. In diesen Daten steckt bei Smartphone-Aufnahmen häufig der Aufnahmeort samt Koordinaten, und der bleibt so, wo er hingehört.
Dateiname und Alternativtext
Der Dateiname ist die einfachste Gelegenheit, einem Bild Bedeutung zu geben. badsanierung-vorher-nachher.jpg erklärt sowohl Suchmaschinen als auch Ihnen selbst beim nächsten Aufräumen, was zu sehen ist — IMG_20260827_114533.jpg überlässt beides dem Zufall. Kleinbuchstaben, Bindestriche zwischen den Wörtern, Umlaute und Leerzeichen umschrieben.
Der Alternativtext beschreibt, was auf dem Bild zu sehen ist. Er wird vorgelesen, wenn jemand einen Screenreader verwendet, und erscheint, sobald das Bild ausbleibt. Beschreiben Sie schlicht das Motiv: „Handwerker verlegt großformatige Fliesen in einem Badezimmer" trifft es genau. Solche Sätze helfen Menschen und Suchmaschinen gleichermaßen, während eine reine Stichwortreihung bei beiden verpufft.
Rein dekorative Bilder bekommen einen leeren Alternativtext. Damit überspringen Screenreader sie und ersparen ihren Nutzern einen belanglosen Dateinamen. Mehr dazu steht in unserem Ratgeber zur barrierefreien Website.
Wie das Bild geladen wird
Zum Schluss geht es um den Zeitpunkt. Bilder weit unten auf der Seite müssen erst geladen werden, wenn jemand dorthin scrollt. Dieses Verhalten heißt Lazy Loading und ist in allen aktuellen Browsern eingebaut.
Eine Ausnahme gilt für das erste sichtbare Bild. Es ist meist jenes Element, an dem der Largest Contentful Paint gemessen wird, einer der Core Web Vitals. Dieses Bild soll früh und mit Vorrang geladen werden; verzögertes Laden bewirkt hier das Gegenteil.
Ebenso gehört zu jedem Bild die Angabe von Breite und Höhe. Der Browser hält damit den Platz frei, bevor das Bild eintrifft, und der Text bleibt beim Laden an seiner Stelle. Warum das für die Bewertung Ihrer Seite zählt, beschreibt unser Ratgeber zu Ladezeit und Ranking.
Ein Ablauf, der sich einprägt
In der Praxis sind es sieben Schritte, die nach zwei, drei Durchgängen von selbst sitzen. Wer sie einmal in dieser Reihenfolge durchgeht, braucht die Liste danach kaum noch:
- Motiv wählen, das den Text um eine eigene Aussage ergänzt.
- Auf das festgelegte Seitenverhältnis zuschneiden und den Ausschnitt am schmalen Bildschirm prüfen.
- Auf die tatsächliche Anzeigebreite bringen, verdoppelt für hochauflösende Geräte.
- Als JPG mit Qualität 80 speichern, WebP über das System ergänzen lassen.
- Auf die Richtwerte komprimieren und die Kameradaten entfernen.
- Sprechenden Dateinamen vergeben, klein und mit Bindestrichen.
- Alternativtext schreiben, der das Motiv beschreibt.
Fazit
Gut vorbereitete Bilder verbessern Gestaltung, Ladezeit und Auffindbarkeit auf einen Streich. Das macht sie zu einer der dankbarsten Aufgaben an einer Website. Sie arbeiten allein am Material, ohne Eingriff in die Technik, und sehen das Ergebnis sofort.
Prüfen Sie an einigen Seiten die Dateigrößen Ihrer Bilder. Liegen sie im Megabyte-Bereich, haben Sie damit die wirksamste Stellschraube gefunden, die Ihre Website derzeit zu bieten hat. In unseren Leistungen ist das bereits enthalten. Wir richten die Bildverarbeitung so ein, dass diese Schritte beim Hochladen von selbst geschehen.