Die schnellste Datei lädt gar nicht
Bildoptimierung dreht sich meist ums Kleinermachen. Aber es gibt einen noch wirksameren Hebel: ein Bild, das der Besucher schon hat, muss gar nicht geladen werden. Genau das leistet Browser-Caching — und es macht Wiederbesuche und Seitenwechsel spürbar schneller, weil das Logo, die Icons und wiederkehrende Bilder aus dem lokalen Speicher kommen statt vom Server.
Wie es funktioniert
Lädt der Browser ein Bild, legt er es in seinen Cache (lokalen Zwischenspeicher). Beim nächsten Bedarf desselben Bildes — die Unterseite mit demselben Header-Logo, der zweite Besuch morgen — nimmt er die lokale Kopie, statt den Server erneut zu fragen. Kein Netzwerk-Weg, kein Warten, kein Datenvolumen. Wie lange und ob überhaupt gecacht wird, steuert der Server über HTTP-Header, die er mit dem Bild mitschickt.
Der wichtigste Header: Cache-Control
Der zentrale Steuerbefehl ist Cache-Control mit einer max-age-Angabe in Sekunden — sie sagt dem Browser, wie lange er das Bild ohne Rückfrage verwenden darf:
Cache-Control: public, max-age=31536000Die 31536000 sind ein Jahr in Sekunden. Für statische Bilder, die sich nie ändern (ein Foto in einem Blogartikel, ein festes Logo), ist eine sehr lange Cache-Zeit ideal: einmal laden, ein Jahr lang nutzen. Das ist einer der Bausteine schneller Seiten — mehr dazu im Beitrag Ladezeit-Optimierung.
Die große Falle: das Bild ändert sich
Lange Cache-Zeiten haben einen Haken: Tauschst du ein Bild aus (neues Logo, korrigierte Grafik) unter demselben Dateinamen, sieht der wiederkehrende Besucher weiter die alte Version — sein Browser hält sie ja noch für gültig. Das ist der klassische „Warum sehe ich das alte Logo?"-Effekt.
Die Lösung: Cache-Busting
Der Trick heißt Cache-Busting — man gibt der neuen Version einen neuen Namen, damit der Browser sie als neue Datei erkennt:
- Neuer Dateiname:
logo.v2.pngstattlogo.png. - Versions-Parameter:
logo.png?v=2. - Hash im Namen:
logo.8f3a1c.png— ändert sich der Inhalt, ändert sich der Hash.
So bekommt man beides: sehr lange Cache-Zeiten und sofortige Aktualisierung, wenn sich etwas ändert. Die alte Datei verfällt einfach, die neue wird frisch geladen.
Musst du dich selbst darum kümmern?
Oft nicht direkt: Moderne Hosting-Dienste, CDNs und Frameworks setzen für Bilder sinnvolle Cache-Header automatisch — inklusive Cache-Busting über Dateinamen mit Hash (deshalb heißen Build-Dateien oft bild.a1b2c3.jpg). Wer eine einfache Seite selbst hostet, sollte aber prüfen, ob statische Bilder überhaupt mit einer Cache-Zeit ausgeliefert werden — fehlt sie, lädt jeder Besucher jedes Bild bei jedem Aufruf neu. Zusammen mit Lazy Loading und Kompression ist Caching einer der drei großen Bild-Performance-Hebel.
Häufige Fragen
Was ist Browser-Caching bei Bildern?
Der Browser speichert heruntergeladene Bilder lokal. Besucht jemand die Seite erneut oder wechselt zu einer Unterseite mit demselben Logo, lädt der Browser das Bild aus dem Cache statt neu vom Server — das ist sofort da und spart Datenvolumen.
Wie steuere ich, wie lange ein Bild gecacht wird?
Über HTTP-Header, die der Server mitschickt — vor allem Cache-Control mit einer max-age-Angabe (Sekunden). Bei statischen Bildern, die sich nie ändern, setzt man oft sehr lange Zeiten (etwa ein Jahr), damit sie nur einmal geladen werden müssen.
Was ist das Problem, wenn ich ein gecachtes Bild ändere?
Der Browser zeigt weiter die alte Version, weil er glaubt, sie sei noch gültig. Die Lösung heißt Cache-Busting: Man ändert den Dateinamen oder hängt einen Versions-Parameter an (z. B. logo.v2.png oder logo.png?v=2). Ein neuer Name gilt als neue Datei und wird frisch geladen.
Muss ich mich als Website-Betreiber selbst um Caching kümmern?
Oft nicht direkt: Viele Hosting-Dienste, CDNs und Frameworks setzen sinnvolle Cache-Header für Bilder automatisch, inklusive Cache-Busting über Dateinamen mit Hash. Wer eine einfache Seite selbst hostet, sollte aber prüfen, ob statische Bilder überhaupt gecacht werden.