Was haltet ihr von dieser Art der Darstellung grosser Bilder

[Steffen Flämig]

Hallo,

ich haben die Aufgabe, eine Site zu erstellen, auf der Fotos (Luftbilder) angeboten werden.
Die Bilder haben eine recht hohe Auflösung (4500 x 3000). Wenn man
sie im Photoshop betrachtet, ist es beeindruckend, wie tief man in
die Details zoomen kann.
Genau diese Eigenschaft sollte auch über die Website irgendwie rüberkommen.

Meine erste Idee, den Navigator von Photoshop nachzuahmen indem ich
die Originaldatei (einige MB) mit ImageMagick / PerlMagick in
Echtzeit skaliert und -entsprechend dem "Navigatorfesnster"-
beschnitten habe, ist (z.Z.) nicht praktisch umzusetzen. Die
benötigte Rechenleistung ist einfach zu hoch.

Außerdem wird bei jedem neuen Ausschnitt das ganze (neue) Bild übers
Netz geschickt. Bei jeweils ca. 300 Kb entsteht bei exzessiven
Bildbetrachten ein ziemlich großer Traffic.

In meiner jetzigen Lösung habe ich die (etwas verkleinerte)
Originaldatei in 64 x 64 jeweils 32 x 48 Pixel große Kacheln
zerschnitten und lade jeweils die benötigten. So entfällt die
Serverseitige Bildbearbeitung und die im Cache gespeicherten Kacheln
können wiederverwendet werden.

Schaut es Euch bitte mal an und postet Eurer Meinung.
http://test.floridee.de/luftbilder.html

MfG Steffen

P.S.: Das Projekt befindet sich z.Z. in der "Schmierzettelphase",
d.h. der Code ist zum schnellen Ausprobieren einer Idee quick &
dirty im Texteditor geschrieben worden. Das Testbild ist auch nicht von der guten Qualität, wie die eigentlichen Bilder. Ich hatte aber jetzt nur diese zur Hand. Seht mir bitte ein paar
Liederlichkeiten nach, es geht nur ums Prinzip. Danke.

[flashnfantasy]

Gebe nur zu bedenken, daß jedes Teil-Bild einen eigenen Thread auf dem Server startet.
So ab 30 Threads kommen alle weiteren Anfragen in eine Warteschlange - und das hat sich bei mir beim Bildaufbau bemerkbar gemacht, der dauert ewig lange.
Bei mehreren Usern wird das zur Geduldsprobe für jeden.

Wenn ihr sowas wie eine skalierbare und verschiebbare Auswahl macht, dann würde ich trotzdem das Bild auf einmal runterladen, egal wie groß es dann ist.
So messe ich bereits etwa 500kB insgesamt, dafür kriegt ihr schon ein schönes großes JPG hin !!!

Übrigens, netter JS-Script !!!

[Steffen Flämig]

Hallo,

Gebe nur zu bedenken, daß jedes Teil-Bild einen eigenen Thread auf dem Server startet.
So ab 30 Threads kommen alle weiteren Anfragen in eine Warteschlange...

Ja, daran haben ich gar nicht gedacht. Fällt da jemanden was ein?

Wenn ihr sowas wie eine skalierbare und verschiebbare Auswahl macht, dann würde ich trotzdem das Bild auf einmal runterladen, egal wie groß es dann ist.

Dann muss es aber erstens irgendwie auf dem Server "gebaut" (skaliert und beschnitten) werden und zweitens läßt sich nichts [1]cashen.

So messe ich bereits etwa 500kB insgesamt, dafür kriegt ihr schon ein schönes großes JPG hin !!!

Ja, aber wegen [1] sind das dann ein paar hundert kB für _jede_ Verschiebung des Bildes. In meinem Fall werden "nur" die fehlenden kacheln nachgeladen.

Übrigens, netter JS-Script !!!

Danke.

MfG Steffen

[fastix®]

Moin!

Wenn ihr sowas wie eine skalierbare und verschiebbare Auswahl macht, dann würde ich trotzdem das Bild auf einmal runterladen, egal wie groß es dann ist.
Dann muss es aber erstens irgendwie auf dem Server "gebaut" (skaliert und beschnitten) werden und zweitens läßt sich nichts [1]cashen.

Hast Du schon mal daran gedacht, es eventuell mit flash oder (browserseitigem)java zu probieren? Bei beiden Varianten sollte es machbar sein, das Bild erst einmal komplett zu laden und dann einen Ausschnitt zu zeigen und zu zoomen. Die dann langsamere HTML-Version kannst Du ja parallel für die "Verweigerer" oder "administrativ Behinderten" vorhalten.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Steffen Flämig]

Hallo,

Hast Du schon mal daran gedacht, es eventuell mit flash oder (browserseitigem)java zu probieren?

Ja, aber wegen der "Verweigerer" oder "administrativ Behinderten" möchte ich es eigentlich nicht. Außerdem bin ich kein unbedingter Fan von flash bzw. Java (auf Websites).

...machbar sein, das Bild erst einmal komplett zu laden und dann einen Ausschnitt zu zeigen und zu zoomen.

Das ganze Bild ist > 2000 x 3000. Da dauert es dann wahrscheinlich noch länger, bis etwas zu sehen ist.

MfG Steffen

[flashnfantasy]

Sei nicht zu bescheiden mit der JPG-Komprimierung.
50% ist auch ein relativ guter Wert, und probiere mal ein wenig mit dem Sub-Sampling herum (ich nutze meist 1:1)

[Steffen Flämig]

Sei nicht zu bescheiden mit der JPG-Komprimierung.

Sonst tritt mir der Fotograf eine vors Schienbein.

[flashnfantasy]

Sei nicht zu bescheiden mit der JPG-Komprimierung.
Sonst tritt mir der Fotograf eine vors Schienbein.

Habe mal ein 3000x2000 Bild getestet (GIMP)
85% 1.3 MB
40% 570 kB

Jetzt gehe mal davon aus, daß kaum einer auf 100% skaled, dann hast du mit 40% kaum merklichen Qualitätsverlust.
Diese JPG-Artefakte merkt man bei Photos nicht so sehr, da sind Computergrafiken anfälliger.
Man sollte es mit dem Qualitätsfanatismus nicht übertreiben, die Webseite muß ja noch erreichbar bleiben.

Jetzt müsst ihr Kompromisse machen, aber das ist keine technische Sache mehr...

[flashnfantasy]

Dann muss es aber erstens irgendwie auf dem Server "gebaut" (skaliert und beschnitten) werden und zweitens läßt sich nichts [1]cashen.

klar kannst du im JS Bilder skalieren, nichts einfacher als das !!!
und für's Beschneiden kannst du Clipping verwenden.
Kann da eine Website nennen (meine eigene *hähä*), wo das wunderbar klappt.

Ja, aber wegen [1] sind das dann ein paar hundert kB für _jede_ Verschiebung des Bildes. In meinem Fall werden "nur" die fehlenden kacheln nachgeladen.

Das stimmt leider nicht, ich hatte gestern hierzu ein ähnliches Problem mit precaching von Bildern gepostet.

http://forum.de.selfhtml.org/?t=110041&m=689049

Ob deine Teilbilder bei einem Javascript gecached werden oder nicht hängt von der Browsereinstellung ab. Und die kann so sein, daß bei jeder Verschiebung komplett neues herunterladen notwenig ist (ist meist die Einstellung)

[Zeromancer]

Hallo Steffen,

ich haben die Aufgabe, eine Site zu erstellen, auf der Fotos (Luftbilder) angeboten werden.
Die Bilder haben eine recht hohe Auflösung (4500 x 3000).

bei diesen Größen sollte sich doch mit ein wenig Verhandlungsgeschick ein Kompromiss rasufinden lassen. Jedem Auftraggeber sollte doch klar gemacht werden können, dass die Daten nicht schneller fließen können, wenn

a) das Rohr zu klein ist (analog, ISDN, etc.)
b) der Benutzer keine leistungsfähige Pumpe (Modem etc.) hat

Mit freundlichen Grüßen,
André

[Thomas J.S.]

Hallo,

ich haben die Aufgabe, eine Site zu erstellen, auf der Fotos (Luftbilder) angeboten werden.
Die Bilder haben eine recht hohe Auflösung (4500 x 3000). Wenn man
sie im Photoshop betrachtet, ist es beeindruckend, wie tief man in
die Details zoomen kann.
Genau diese Eigenschaft sollte auch über die Website irgendwie rüberkommen.

Je nachdem was es kosten darf, würde ich hier entweder zu LuraWave
http://de.selfhtml.org/grafik/formate.htm#lurawave http://www.luratech.com/

oder zu FlashPix greifen, (wobei Flashpix ist an sich ein offener Standard (sein soll)), siehe [linkhttp://www.i3a.org/i_flashpix.html].

Schau z.B. hier wie das gemacht ist:
http://www.wiehl.de/homepage/flashpix_bilder.html

Meistens wird aber ein Imageserver eingesetzt, so das die Webseitenbesucher kein Plugin etc. brauchen
http://www.iseemedia.com/main/products/imageserver5 bzw.
http://www.iseemedia.com/zoom/productinfo.html

Sowas bietet Strato auch, http://www.strato.de/service/premium/anleitung/flashpix/flashpix.html

Oder andere [http://www.i-net-hosting.de/osc/eshop/default.php/cPath/9_10]

Grüße
Thomas

[Ingo Turski]

Hi,

Schaut es Euch bitte mal an und postet Eurer Meinung.
http://test.floridee.de/luftbilder.html

Der Bildaufbau ist viel zu schleppend. Hinzu kommt, daß bei jedem Zoom-Faktor erneut Bilder geladen werden müssen und eine Ausschnittänderung wieder zu (unerträglichen) Ladezeiten führt. Bei der Vielzahl der Bilder kommt es dann (im Firefox trotz dsl3000) dazu, daß einige Bilder nicht beim ersten Mal geladen werden können.

Ich Habe schon schöne Beispiele im Netz gesehen, die _ein_ großes Bild verwenden und über eine Lupenfunktion hieraus den gewünschten Ausschnitt präsentieren.
Bei sehr großen Bildern und mehreren Zoomstufen könnte man evtl. noch darüber nachdenken, 2 Auflösungen anzubieten, damit der erste Ladevorgang verkürzt wird.

freundliche Grüße
Ingo

[Steffen Flämig]

Hallo.

Ich Habe schon schöne Beispiele im Netz gesehen, die _ein_ großes Bild verwenden und über eine Lupenfunktion hieraus den gewünschten Ausschnitt präsentieren.

Danke. Hast Du evtl. 'ne URL?

MfG Steffen

[Ingo Turski]

Hi,

Danke. Hast Du evtl. 'ne URL?

nein, leider nicht. Ist auch schon länger her.
Ich erinnere mich aber noch an ein sehr schönes Beispiel mit einer rechteckigen "Lupe", die über das Bild bewegt werden konnte und eine vergrößerung des Ausschnittes zeigte. Zusätzlich war glaub' ich noch eine kleine Map, auf der die Position der Lupe nochmals zu sehen war.

freundliche Grüße
Ingo

[MudGuard]

Hi,

Schaut es Euch bitte mal an und postet Eurer Meinung.
http://test.floridee.de/luftbilder.html

Die Einzelbildchen sind m.E. zu klein.

Die Dateigrößen sind zwischen 800 und 1000 Bytes (hab jetzt nicht alle angeguckt, nur Stichproben).
Pro Bild fällt fast nochmal soviel (~ 750 Bytes) an Request-/Response-Headern an.
Es werden also nur ca. 50 Prozent Nutzdaten übertragen.
Die Header bleiben aber ziemlich konstant, wenn die Dateigröße steigt, der Anteil Nutzdaten wird also bei größeren Bildern größer.

Bei so vielen Bildchen macht sich dann auch bemerkbar, daß es sowohl im Browser als auch im Webserver üblicherweise Begrenzungen für die Anzahl gleichzeitiger Requests gibt.

http://www.stadtplandienst.de arbeitet mit Bildchen von 200*200 für die Stadtpläne,
http://www.streetmap.co.uk/ mit 187*187

cu,
Andreas

[Marian]

Hi Steffen,

ich haben die Aufgabe, eine Site zu erstellen, auf der Fotos (Luftbilder) angeboten werden.
Die Bilder haben eine recht hohe Auflösung (4500 x 3000). Wenn man
sie im Photoshop betrachtet, ist es beeindruckend, wie tief man in
die Details zoomen kann.
Genau diese Eigenschaft sollte auch über die Website irgendwie rüberkommen.

Mach doch ein thumbnail (so 300*400, nicht viel mehr, und am besten noch eins 75*100 für die übersicht), und mach einen link auf das originalbild (nicht auf eine html-datei mit dem bild drin, sondern direkt aufs bild, weil in den meisten browsern wird das bild erst auf bildschirmgröße verkleinert, wenn man draufklickt, wird es groß), mit angabe der dateigröße, wer sich das bild wirklich ganz genau angucken will, kann das dann laden (nur dsl-nutzer;-)).
Man kann die bilder auch so speichern, dass sie erst grob und dann immer genauer geladen werden, weiß nur nicht mehr wie das heißt.

mfG, Marian

[Thomas J.S.]

Hallo,

Man kann die bilder auch so speichern, dass sie erst grob und dann immer genauer geladen werden, weiß nur nicht mehr wie das heißt.

Interlaced.

Grüße
Thomas

[Ashura]

Hallo Thomas.

Man kann die bilder auch so speichern, dass sie erst grob und dann immer genauer geladen werden, weiß nur nicht mehr wie das heißt.

Interlaced.

Bei Bildern würde ich aber auf GIF verzichten. Ich empfehle eher das Progressive Speichern beim JPG-Format.

Gruß, Ashura