Zuletzt aktualisiert am 5. Oktober 2021.
Oder: Das Cachen von Bildern durch den Browser verhindern
Eigentlich ist Caching eine tolle Sache. Es spart Datenübertragung, Rechenpower und damit Strom. Zudem laden Webseiten um ein Vielfaches schneller.
Aber nicht immer ist es gewollt, dass z.B. Grafiken im lokalen Cache des Browsers landen.
Anwendungsfall: Wann man zum Beispiel auf einer Webseite eine Ausgabe einer Webcam als Vorschaubild darstellen will, oder Messergebnisse oder einfach zeitabhängige Daten anzeigen möchte, so ist es von Vorteil, wenn diese Grafiken nicht gecached werden, da sie sonst nicht aktualisiert werden.
Lösung 1: Cache-Richtlinien bearbeiten
Natürlich kann man nun anfangen die Cache-Richtlinien z.B. für einzelne Dateiformate anzupassen. Man kann z.B. sagen, alle Grafiken, die regelmäßig aktualisiert werden, binde ich als .png-Datei ein und ich stelle die Caching-Richtlinie für .png entsprechend in der .htaccess-Datei um:
<FilesMatch "\.(png)$">
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>
<IfModule mod_headers.c>
FileETag None
Header unset ETag
Header unset Pragma
Header unset Cache-Control
Header unset Last-Modified
Header set Pragma "no-cache"
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Expires "Mon, 10 Apr 1972 00:00:00 GMT"
</IfModule>
</FilesMatch>Das ist aber leider relativ allgemein – diese Caching-Richtlinie gilt dann für ALLE .png-Dateien auf der gesamten Webseite.
Lösung 2: Einfach einen parameter hinter die URL hängen
Es geht einfacher und vor allem feingranularer, indem man an bestimmte Bilder, die aktualisiert werden sollen, einfach einen zufälligen Parameter anhängt.
Das Cachen einzelner Bilder/Dateien im Browser kann man als Webseitenbetreiber verhindern, indem man einen zufälligen Parameter an die Bild-URL anfügt.
Wir machen uns dafür CSS und JavaScript zu nutze.
1) Bilder mittels HTML-Image-Tag einbinden
Wichtig ist, dass wir für das Einbinden der Bilder HTML nutzen (z.B. den HTML-Block) und nicht die “Bild einfügen”-Funktionalität deines CMS.
Wir geben dem Image eine ID, aber lassen die Quell-URL (src=””) bewusst leer.
Das sieht z.B. so aus:<img src="" alt="Beschreibung" id="my_image">
2) SRC-Attribut mittels JavaScript füllen
Jetzt haben wir die Möglichkeit, mittels JavaScript anhand der ID das jeweils gewünschte Image-Element zu selektieren und das src-Attribut zu setzen.
Vorher erstelle wir in unserem JavaScript eine zufällige Zahl, die wir als Parameter einfach an den Image-Pfad anhängen.
Der Parameter hat keine Bedeutung und wird nicht interpretiert, das Bild wird geladen und angezeigt, wie wenn kein Parameter angehängt ist.
Für den Browser handelt es sich aber um eine neue URL und es wird KEIN Cache verwendet.
<script>
var a= Math.floor(Math.random()*1000);
var my_image = document.getElementById('my_image');
my_image.src = 'https://domain.de/pfad/zum/bild.png?'+a;
</script>
Schreibe eine Antwort