Caching-Verhalten bei dynamisch genierten Bildern

mtemp · 25.01.2011, 18:18

Hi,
über imagecreatetruecolor usw. erzeuge ich Bilder mit bestimmten Größenangaben basierend auf einem Ausgangsbild (PNG, JPG), zB für Thumbnails, zur direkten Ausgabe im Browser.

Ich benutzte bisher folgende Header-Ausgaben, um den Cache zu umgehen und die Bilder immer wieder neu berechnet/ausgegeben werden:

PHP-Code:

  header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");    // Datum der Vergangenheit

header ("Last-Modified: " . gmdate ("D, d M Y H:i:s") . " GMT");    // immer geändert

header ("Cache-Control: no-cache, must-revalidate");  // HTTP/1.1

header ("Pragma: no-cache");

Für eine Bildergalerie möchte ich aber nun Bilder vorausladen (ähnlich wie bei Picasa-Webalben, wo ich sehr schnell mir die nächsten Bilder anzeigen lassen kann, ohne lange zu warten -- wo also die Bilder bestimmt auch vorausgeladen werden).

Frage: wie ist das Browser- oder Serververhalten, wenn ich diese Header-Ausgaben weglasse, um so ein Vorausladen dieser dynamisch generierten Bilder zu ermöglichen?
Bzw. ist es überhaupt möglich, Bilder ohne Ausgabe im Dateisystem (s.o.: Ausgabe direkt im Browser) quasi zu cachen?

Mit einem ersten Dank...
Carlos

dr.e. · 25.01.2011, 18:35

Ein Bild ist doch über seinen Namen (vielleicht mit ID aus der Datenbank versehen), seinen Maßen und seiner Verison eineindeutig. Genau diese Informationen würde ich in der URL verpacken und diese exakte Version auf 1 Jahr cachebar machen. Meiner Ansicht nach eine ideale Symbiose aus Performance und Aktualität.

Sofern der Browser eine "alte" Version doch anfragt, schickst du ihm einfach die letzte Version mit enstprechenden Cache-Headern. Die Version ist also nur ein Unique-Identifier, den du bei Bearbeitung des Bildes hochzählst, damit die URL zur vorherigen Version differiert. Dadurch zwingst du den Browser die neue Version zu ziehen. Vorschlag:

Code:

http://images.your-domain.com/width/123/height/456/version/8/Meine_Badewanne_123456.png

crime4549 · 27.01.2011, 10:22

@Dr.e
Nette Lösung.. Simpel aber gut !

@TO
Ich habe mhere Webseiten für Tattostudios Programmiert, dort werden dynamisch Bilder vergrößert und verkleinert, ein Copyright und ein Wasserzeichen eingefügt.

Zu Performancesteigerung, generiere ich mir die Bilder und lege diese samt informationen wie breite etc.. in eine temp.Datenbank ab.
Der erste Ladevorgang dauert zwar etwas länger, dafür werden die Folge seiten doch sehr flott geladen.

meine Erste variante wear eine kleine Klasse, die ich als img src angegeben hatte. Naja leider nicht so performant...

Die Kombo ist aber nicht schlecht..

lG.

dr.e. · 27.01.2011, 13:51

@crime: du legst aber doch bitte die Bilder nicht direkt in die Datenbank?

crime4549 · 28.01.2011, 11:56

doch da die Datenbank nur temporärer natur ist.
Die Orginalbilder verbleiben im Bilder-Uploadverzeichnis.

ja ja Werft mit steinen nach mir

Aber ist die einfachste Methode gewesen.
Die Bilder werden mittels Hex-Daten ins CSS geschrieben des jeweiligen Containers.

Und Ja für jede Kategorie eine tempDB.

nach 15 Minuten wird die DB entweder durch den Crongelöscht. Alternativ kann man das Session-Abhängig machen.

keine Sorge soviel Bildmaterial ist das nicht, vlt. 160 MB Bilder in Rohdaten, komprimiert dann noch um die 20 MB das geht, selbst in Mysql.

Grüße

dr.e. · 28.01.2011, 12:39

Hallo crime,

sofern du die Daten direkt als Datenstrom ins CSS schreibst, ist eine Zwischenspeicherung nicht notwendig. Selbst mit der direkten URL-Adressierung (inkl. Maß-Angaben) ist es nicht nötig, sofern die richtigen Cache-Header gesendet werden. Der Browser läd das Bild dann exakt einmal nach dem Nachladen des CSS vom Server und verwendet anschließend nur noch die lokale Resource.

Zitat:

keine Sorge soviel Bildmaterial ist das nicht, vlt. 160 MB Bilder in Rohdaten, komprimiert dann noch um die 20 MB das geht, selbst in Mysql.

Das ist noch eine vertretbare Menge - korrekt. An sich jedoch meiner Ansicht nach aus Performance-Sicht wieder ungünstig für den Server, da dieser die Daten von Platte schneller lesen kann. Werden die Bilder größer, muss man ohnehin auf BLOB-Streaming umstellen, was nicht ganz einfach ist, wenn es auch noch performant sein soll. Zusätzlich spricht jedoch nichts dagegen, die Bilder statt dessen auf der lokalen Platte abzulegen und direkt auszuspielen. Wenn deine Lösung jedoch den Anforderungen entspricht, passt das ja!

dr.e. · 28.01.2011, 12:40

@mtemp: ist deine Frage damit beantwortet oder hast du noch Fragen?

Dark Guardian · 28.01.2011, 20:44

Beachte bitte noch dies:

http://floern.com/webscripting/if-mo...ince-nachbauen

Wenn der Browser eine Anfrage mit If-Modified-Since oder If-None-match sendet und ein HTTP 200 OK zurück bekommt anstelle von 303 Not Modified dann wird die besagte Bilddatei nicht aus dem Browsercache geladen.

Lässt sich sehr gut anhand des Netzwerkmoduls von Firebug erkennen.

crime4549 · 29.01.2011, 06:11

Zitat:

Zitat von dr.e.

Hallo crime,

sofern du die Daten direkt als Datenstrom ins CSS schreibst, ist eine Zwischenspeicherung nicht notwendig. Selbst mit der direkten URL-Adressierung (inkl. Maß-Angaben) ist es nicht nötig, sofern die richtigen Cache-Header gesendet werden. Der Browser läd das Bild dann exakt einmal nach dem Nachladen des CSS vom Server und verwendet anschließend nur noch die lokale Resource.

Das ist noch eine vertretbare Menge - korrekt. An sich jedoch meiner Ansicht nach aus Performance-Sicht wieder ungünstig für den Server, da dieser die Daten von Platte schneller lesen kann. Werden die Bilder größer, muss man ohnehin auf BLOB-Streaming umstellen, was nicht ganz einfach ist, wenn es auch noch performant sein soll. Zusätzlich spricht jedoch nichts dagegen, die Bilder statt dessen auf der lokalen Platte abzulegen und direkt auszuspielen. Wenn deine Lösung jedoch den Anforderungen entspricht, passt das ja!

schon wahr

Was gegen die Bilder auf der lokalen platte sprich ist einfach zu erklären, das Downloaden der Bilder (Webstirpper und Co).

Dies soll verhindert werden. daher der Werdegang von hinten durch die Brust nach vorne.

mit Cache-Header befasse ich mich mal, denn die Seite muss ich im März abändern.

Dann komme ich auf dich zurück und lass mir das ganze einmal in ruhe erklären.

LG.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

25.01.2011, 18:18
mtemp Neuer Benutzer Registriert seit: 02.06.2009 Beiträge: 7	Caching-Verhalten bei dynamisch generierten Bildern Hi, über imagecreatetruecolor usw. erzeuge ich Bilder mit bestimmten Größenangaben basierend auf einem Ausgangsbild (PNG, JPG), zB für Thumbnails, zur direkten Ausgabe im Browser. Ich benutzte bisher folgende Header-Ausgaben, um den Cache zu umgehen und die Bilder immer wieder neu berechnet/ausgegeben werden: PHP-Code: `header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Datum der Vergangenheit header ("Last-Modified: " . gmdate ("D, d M Y H:i:s") . " GMT"); // immer geändert header ("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1 header ("Pragma: no-cache");` Für eine Bildergalerie möchte ich aber nun Bilder vorausladen (ähnlich wie bei Picasa-Webalben, wo ich sehr schnell mir die nächsten Bilder anzeigen lassen kann, ohne lange zu warten -- wo also die Bilder bestimmt auch vorausgeladen werden). Frage: wie ist das Browser- oder Serververhalten, wenn ich diese Header-Ausgaben weglasse, um so ein Vorausladen dieser dynamisch generierten Bilder zu ermöglichen? Bzw. ist es überhaupt möglich, Bilder ohne Ausgabe im Dateisystem (s.o.: Ausgabe direkt im Browser) quasi zu cachen? Mit einem ersten Dank... Carlos Geändert von mtemp (29.01.2011 um 22:12 Uhr). Grund: Tippfehler im Titel


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

25.01.2011, 18:35
dr.e. Moderator und Wett-König Registriert seit: 21.05.2008 Beiträge: 3.657 PHP-Kenntnisse: Fortgeschritten	Ein Bild ist doch über seinen Namen (vielleicht mit ID aus der Datenbank versehen), seinen Maßen und seiner Verison eineindeutig. Genau diese Informationen würde ich in der URL verpacken und diese exakte Version auf 1 Jahr cachebar machen. Meiner Ansicht nach eine ideale Symbiose aus Performance und Aktualität. Sofern der Browser eine "alte" Version doch anfragt, schickst du ihm einfach die letzte Version mit enstprechenden Cache-Headern. Die Version ist also nur ein Unique-Identifier, den du bei Bearbeitung des Bildes hochzählst, damit die URL zur vorherigen Version differiert. Dadurch zwingst du den Browser die neue Version zu ziehen. Vorschlag: Code: http://images.your-domain.com/width/123/height/456/version/8/Meine_Badewanne_123456.png __________________ Viele Grüße, Dr.E. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. Think about software design before you start to write code! 2. Discuss and review it together with experts! 3. Choose good tools (-> Adventure PHP Framework (APF))! 4. Write clean and reusable software only! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

27.01.2011, 10:22
crime4549 Neuer Benutzer Registriert seit: 27.01.2011 Beiträge: 20 PHP-Kenntnisse: Fortgeschritten	@Dr.e Nette Lösung.. Simpel aber gut ! @TO Ich habe mhere Webseiten für Tattostudios Programmiert, dort werden dynamisch Bilder vergrößert und verkleinert, ein Copyright und ein Wasserzeichen eingefügt. Zu Performancesteigerung, generiere ich mir die Bilder und lege diese samt informationen wie breite etc.. in eine temp.Datenbank ab. Der erste Ladevorgang dauert zwar etwas länger, dafür werden die Folge seiten doch sehr flott geladen. meine Erste variante wear eine kleine Klasse, die ich als img src angegeben hatte. Naja leider nicht so performant... Die Kombo ist aber nicht schlecht.. lG. __________________ Egal wie tief man die geistige Messlatte auch hängen mag, jeden Tag findet sich einer, der aufrecht darunter durchlaufen kann.

27.01.2011, 13:51
dr.e. Moderator und Wett-König Registriert seit: 21.05.2008 Beiträge: 3.657 PHP-Kenntnisse: Fortgeschritten	@crime: du legst aber doch bitte die Bilder nicht direkt in die Datenbank? __________________ Viele Grüße, Dr.E. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. Think about software design before you start to write code! 2. Discuss and review it together with experts! 3. Choose good tools (-> Adventure PHP Framework (APF))! 4. Write clean and reusable software only! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

28.01.2011, 11:56
crime4549 Neuer Benutzer Registriert seit: 27.01.2011 Beiträge: 20 PHP-Kenntnisse: Fortgeschritten	doch da die Datenbank nur temporärer natur ist. Die Orginalbilder verbleiben im Bilder-Uploadverzeichnis. ja ja Werft mit steinen nach mir Aber ist die einfachste Methode gewesen. Die Bilder werden mittels Hex-Daten ins CSS geschrieben des jeweiligen Containers. Und Ja für jede Kategorie eine tempDB. nach 15 Minuten wird die DB entweder durch den Crongelöscht. Alternativ kann man das Session-Abhängig machen. keine Sorge soviel Bildmaterial ist das nicht, vlt. 160 MB Bilder in Rohdaten, komprimiert dann noch um die 20 MB das geht, selbst in Mysql. Grüße __________________ Egal wie tief man die geistige Messlatte auch hängen mag, jeden Tag findet sich einer, der aufrecht darunter durchlaufen kann.

28.01.2011, 12:40
dr.e. Moderator und Wett-König Registriert seit: 21.05.2008 Beiträge: 3.657 PHP-Kenntnisse: Fortgeschritten	@mtemp: ist deine Frage damit beantwortet oder hast du noch Fragen? __________________ Viele Grüße, Dr.E. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. Think about software design before you start to write code! 2. Discuss and review it together with experts! 3. Choose good tools (-> Adventure PHP Framework (APF))! 4. Write clean and reusable software only! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

28.01.2011, 20:44
Dark Guardian Erfahrener Benutzer Registriert seit: 10.10.2009 Beiträge: 2.631 PHP-Kenntnisse: Fortgeschritten	Beachte bitte noch dies: http://floern.com/webscripting/if-mo...ince-nachbauen Wenn der Browser eine Anfrage mit If-Modified-Since oder If-None-match sendet und ein HTTP 200 OK zurück bekommt anstelle von 303 Not Modified dann wird die besagte Bilddatei nicht aus dem Browsercache geladen. Lässt sich sehr gut anhand des Netzwerkmoduls von Firebug erkennen. __________________ "Alles im Universum funktioniert, wenn du nur weißt wie du es anwenden musst".