Ein Kunde schickte mir neulich ein Foto für seine Startseite. Direkt aus der Spiegelreflex: 8 MB, 6000 Pixel breit, mit eingebetteten Kameradaten und einer Vorschau, die im Browser drei Sekunden brauchte. Im fertigen Layout der Webseite war das Bild später 1200 Pixel breit zu sehen.
Aus 8 MB lassen sich 150 KB machen, ohne dass jemand den Unterschied erkennt. Es braucht vier Handgriffe: Auflösung anpassen, sinnvoll komprimieren, ein modernes Format wählen, Dateiname und Alt-Text sauber setzen. Du musst dafür weder Bildbearbeitungs-Profi sein noch teure Software kaufen.
Die Theorie hinter den Formaten findest Du bei den Formaten im Überblick. Hier folgt die Praxis-Kette für den Upload-Alltag.
Worauf es bei der Quelldatei ankommt
Die erste Stellschraube ist die Auflösung. Ein Bild aus einer aktuellen Kamera oder einem modernen Smartphone hat oft 4000 bis 6000 Pixel Breite. Für die Webseite ist das mindestens das Dreifache dessen, was angezeigt wird. Jedes überflüssige Pixel kostet Bandbreite und Ladezeit.
Faustregeln für die Zielbreite, gemessen am ausgelieferten Bild im Layout:
- Hero- oder Bühnenbild: 1600 bis 2000 Pixel breit. Reicht auch für hochauflösende Displays.
- Inhaltsbild im Fließtext: 800 bis 1200 Pixel breit. Mehr sieht im Layout niemand.
- Thumbnail oder Vorschau: 400 Pixel breit. Genug für eine ruhige Übersichtsseite.
Bevor Du das Original hochlädst, skalierst Du also einmal auf eine vernünftige Breite herunter. Kamera-Metadaten wie GPS-Koordinaten und Kameramodell brauchst Du im Web ebenfalls nicht. Sie blähen die Datei auf und enthalten manchmal Informationen, die Du nicht öffentlich teilen willst.
Komprimieren, ohne dass es weh tut
JPEG arbeitet mit verlustbehafteter Kompression. Du gibst beim Speichern eine Qualitätsstufe an, meist zwischen 0 und 100. Niedrigere Werte erzeugen kleinere Dateien, ab einer bestimmten Schwelle wirst Du Artefakte sehen: weiche Kanten, Farbtreppen, blockige Flächen in Himmel oder Hauttönen.
Der praktische Sweet Spot liegt zwischen 75 und 85. Darüber ist die Dateigröße kaum besser als bei 100, darunter werden die Artefakte sichtbar. Wer es genau wissen will, exportiert dasselbe Bild zweimal, einmal mit Qualität 90, einmal mit 75, und legt die Versionen nebeneinander. In neun von zehn Fällen siehst Du keinen Unterschied, sparst aber 40 Prozent Dateigröße.
Für das Komprimieren reichen Bordmittel. Es gibt browserbasierte Werkzeuge, die das Bild lokal im Browser komprimieren, ohne es überhaupt hochzuladen. Daneben Mac-Hilfswerkzeuge, die einen Stapel Bilder im Ordner gleichzeitig schrumpfen. Du musst dafür weder professionelle Bildbearbeitungs-Software installieren noch ein Abo abschließen.
Moderne Formate — WebP, AVIF, wann lohnt es
JPEG und PNG sind seit Jahrzehnten der Standard. Daneben haben sich zwei jüngere Formate etabliert. WebP komprimiert Fotos bei gleicher wahrgenommener Qualität rund 25 bis 35 Prozent dichter als JPEG. Der Browser-Support ist seit Jahren stabil über alle gängigen Browser hinweg.
AVIF geht noch weiter und spart oft die Hälfte gegenüber JPEG. Die Encoding-Zeit ist höher, die Browser-Verbreitung wächst, ist aber noch nicht ganz so universell wie bei WebP. Wenn Du heute eine Default-Wahl treffen willst: WebP für Foto-Inhalte. PNG bleibt sinnvoll für Logos und Grafiken mit Transparenz. SVG ist die richtige Antwort für Icons.
Die Entscheidung läuft selten über das Bauchgefühl. Sie hängt am Inhalt: Foto, Grafik mit klaren Kanten, Icon. Welches Format zu welchem Inhalt passt, ist Sache der Format-Theorie.
Lazy-Loading und Responsive Images im Alltag
Wenn Bilder ausgewählt und komprimiert sind, hilft eine kleine HTML-Stellschraube zusätzlich. Das Attribut loading="lazy" sagt dem Browser, ein Bild erst dann zu laden, wenn der Leser in dessen Nähe scrollt. Für alles unterhalb der ersten Bildschirmhöhe spart das spürbar Ladezeit auf den ersten Aufruf.
Dazu kommt die responsive Auslieferung über srcset und sizes. Der Browser entscheidet anhand der Bildschirmgröße, welche Variante geladen wird: kleines Smartphone bekommt 600 Pixel, Desktop 1600 Pixel. Du musst die Varianten nicht von Hand bauen, dafür ist gleich der nächste Abschnitt da.
Die Wirkung lässt sich messen. Schneller geladene Bilder verbessern direkt den LCP-Wert, der das größte sichtbare Element auf der Seite zeitlich erfasst. Google nutzt diese Zeitmessung als Ranking-Signal.
Was Dein CMS Dir abnimmt
Moderne Content-Management-Systeme machen einen Großteil der Arbeit automatisch. TYPO3, WordPress und vergleichbare Baukästen erzeugen beim Upload mehrere Varianten in unterschiedlichen Größen und liefern sie über srcset passgenau aus. WebP-Konvertierung läuft im Hintergrund, ohne dass Du eingreifst.
Was Du trotzdem tust: Du lädst eine vernünftig dimensionierte Quelldatei hoch. Ein 6000-Pixel-Original zwingt das CMS, alle Varianten daraus zu rechnen; das System schafft das, kostet aber Speicher und Wartung. Eine 2000 Pixel breite, sauber komprimierte Quelldatei ist die ehrlichere Grundlage.
Auch das beste CMS reicht nicht, wenn die Quelle schon misslungen ist. Verwaschene Aufnahmen werden durch eine Pipeline nicht scharf. Eine zu kleine Quelle wird auf großen Bildschirmen sichtbar pixelig. Ordentliche Vorbereitung am Anfang ersetzt späteres Retten.
Alt-Text und Dateiname — der unterschätzte SEO-Faktor
Zwei Felder rund ums Bild bleiben oft leer und kosten unnötig Sichtbarkeit. Der Alt-Text beschreibt das Motiv für Menschen, die das Bild nicht sehen können — Screenreader-Nutzer und Suchmaschinen. Er gehört bei jedem inhaltlich relevanten Bild ausgefüllt.
Gut ist ein Alt-Text, der das Bild in einem Satz beschreibt. Schlecht ist ein Stichwort-Stapel à la „Webdesign, SEO, Berlin, Tobias". Beispiel für ein Beratungs-Bild: „Schreibtisch von oben mit Notizblock, Kaffeetasse und Stift — Stillleben zum Thema Webseiten-Beratung". Konkrete Begriffe rund um Medien wie Alt-Text, Thumbnail und Galerie sind im Glossar gesammelt.
Der Dateiname hat einen ähnlichen Effekt. IMG_4892.jpg sagt einer Suchmaschine nichts. schreibtisch-beratung.jpg dagegen trägt Bedeutung. Sprechende Dateinamen sind außerdem im Browser-Cache und in Server-Logs leichter wiederzufinden, wenn Du später nach einem Bild suchst.
Fazit — vier Handgriffe, messbare Wirkung
Die Praxis-Kette ist überschaubar. Auflösung an den tatsächlichen Anzeigeort anpassen. Mit Qualität um die 80 komprimieren. WebP als modernes Default-Format wählen, PNG und SVG für ihre jeweiligen Aufgaben behalten. Alt-Text und Dateinamen ausfüllen.
Vier Handgriffe, die strategisch mehr bringen als jeder spätere Performance-Tuning-Aufwand. Wer Bilder schon vor dem Upload ordentlich vorbereitet, spart sich nachträgliches Reparieren und liefert dem Leser eine Webseite, die spürbar leichter lädt.