html 5 canvas - bildfolgen

[arees]

hallo,
wie kann man eine bildfolge mit html 5 abspielen lassen?

und wie kann ich es anstellen das der benutzer die bilder erst dann lädt wenn er die seite zum ersten mal besucht?

also genau genommen möchte ich mehrere bilder einfach nacheinander abspielen lassen. Aber ich weiß nicht wie ich die bilder so komprimiere sodass der user nicht erst stundenlang warten muss. Flash hat da doch irgwelche Vorteile?

hoffe ihr versteht was ich meine

mfg arees

[speedjunkie]

He,

was meinst Du mit einer Bildfolge? Eine Art coverflow?

Zitat von arees

und wie kann ich es anstellen das der benutzer die bilder erst dann lädt wenn er die seite zum ersten mal besucht?

COOKIES

Zitat von arees

Aber ich weiß nicht wie ich die bilder so komprimiere sodass der user nicht erst stundenlang warten muss

Hmm… Du solltest die Möglichkeiten nutzen Images fürs Web zu optimieren. Hochwertige Bildbearbeitung-Software stellen solche Features zu Verfügung.

[pixelslave]

Vlt. hilft dir folgender Ansatz:

Falls du eine Bild für Bild Animation meinst könntest du dir eine "Timeline" mit einem Interval erstellen.

Bei jeder Ausführung wird quasi in den nächsten Frame gewechselt. Ist der letzte Frame erreicht, wird automatisch in den ersten Frame gewechselt.

Um die Bilder vorauszuladen, könntest du alle Bilder mit display:none in dein HTML einfügen und diesen wiederum einen Listener für das Load-Event mitgeben.

Grüße

Martin

[arees]

ok, aber die bilder müssen doch dann qualitativ schlecht sein sprich sehr wenig speicher haben wenn man nicht unendlich warten will oder??

bei flash wird doch eigentlich das gleiche gemacht??

mfg arees

[Nightflyer]

Wie gross sollen denn deine Bilder sein ( Pixel ) ? Was ist dir wichtiger: Ladezeit oder Bildqualität?

[Ahrsib]

Zitat von arees

ok, aber die bilder müssen doch dann qualitativ schlecht sein sprich sehr wenig speicher haben …

Das ist ein Irrtum,
dass Bilder mit wenig kB qualitativ schlecht aussehen!

Man muss das nur Üben und Methoden entwickeln,
etwas über jpg- und Lauflängenkomprimierung (png, gif) wissen,
dann ist man in der Lage, kleine Bilddatenmengen gut aussehen zu lassen.

Als erste Maßnahme solltest du die Auflösung auf 72dpi runterschrauben
und auf die wirklich sichtbare Größe verringern.

Ahrsib
... Bildkleinrechner seit 14.4er Modem-Zeiten

[Martin Kraft]

Zitat von arees

ok, aber die bilder müssen doch dann qualitativ schlecht sein sprich sehr wenig speicher haben wenn man nicht unendlich warten will oder??

Du solltest Dir eine JS-Funktion basteln, die Bilder nacheinander lädt und abspielt.
Bei einer längeren Animation würde ich ein Video erstellen und mit dem <video>-Tag arbeiten.

Zitat von arees

bei flash wird doch eigentlich das gleiche gemacht??

Das ist eben einer der Vorteile von Flash, die ganzen HTML5-Apostel* nicht wahrhaben wollen: Vektoranimationen brauch kaum Speicherplatz (SVGs sind deutlich größer und beiten nur einen Bruchteil der Funktionalität)!

Anders sieht die Sache bei Pixelbildern aus. Wenn man z.B. JPG-Sequenzen verwendest, braucht man auch mit Flash fast genauso viel Speicherplatz (und Bandbreite) wie bei einzelnen JPGs.

Der Vorteil ist nur, dass man diese in einer SWF kapseln kann (statt mit zig Einzelbildern rumzuhantieren) und dann automatisch progressiv lädt (so dass die ersten Bilder bereits angeziegt werden können, während der Rest noch geladen wird).

Natürlich kann man sich eine ähnliche Mechanik auch mit JS nach programmieren. Aber im Endeffekt heißt das (wie bei vielen HTML5-Features), dass in JS/CSS nachzuprogrammieren (und an den Nutzer zu übertragen), was der FlashPlayer von Haus aus mitbringt.

Zitat von Ahrsib

Als erste Maßnahme solltest du die Auflösung auf 72dpi runterschrauben

Eine kleine, nicht klug******errich oder böse gemeinte Korrektur dazu:

dpi sind im Web irrelevant (weil einzig und allein vom Endgerät abhängig). Die vielbesungen 72dpi sind nur ein Mythos den man nicht unwidersprochen dastehen lassen sollte. Es kommt im Web ausschließlich auf die (von Dir ja auch angesprochenen) Pixelabmessungen an:

Zitat von Ahrsib

und auf die wirklich sichtbare Größe verringern.

Wenn ein Bild 100x100px groß abgespeichert wird, ist es vollkommen egal ob man dafür in PhotoShop 1000dpi angibt oder 10dpi - es ist im Browser immer gleich groß!



* <ironie>Wo sind eigentlich die ganzen HTML5-Beführworter bei Fragen wie diesen? Ich find's schon ein bisschen peinlich, wenn man hier dutzende Posts verschwendet, um darzustellen wie doof Flash und toll HTML5 ist, und dann auf Tauchstation geht, sobald sich tatsächlich mal jemannd die Zähne an den Problemen der HTML5-Praxis ausbeist.</ironie>

[Ahrsib]

Zitat von Martin Kraft

… Wenn ein Bild 100x100px groß abgespeichert wird, ist es vollkommen egal ob man dafür in PhotoShop 1000dpi angibt oder 10dpi - es ist im Browser immer gleich groß! …

Das ist sicherlich richtig, wenn ich da was einstelle,
wird das so groß dargestellt.
Aber es geht um Dateigrößen!

Und da lässt sich einiges optimieren,
damit es nicht lange dauert, ein Bild zu laden!

Zur besseren Einschätzung der Darstellung des Bildes
ist es schon mal nicht schlecht,
sich das einzustellen, wie man es nachher sieht,
da erscheinen mir 72dpi sinnvoll.

Damit kann man die tatsächliche Darstellungsgröße einschätzen
und entsprechend verkleinern.

Ahrsib
... plädiert für stromsparende Öko-Websites.

[pilzebub]

und ich hänge einfach nochmal den link mit ran... thema: mythos
Datei:Wikipixel.png

[shin10]

Ha, da fällt mir noch was ein: Habt ihr evtl. auch gelesen, dass man Bilder in der doppelten Größe anlegen soll, damit Leute mit schlechteren Augen reinzoomen können um die Texte besser lesen zu können ... Wozu braucht jemand mit Sehschwäche da ein scharfes Bild?

Na egal - selektive JPG Kompression wär vielleicht noch so ein Tipp für Bilder zwischendurch.

[speedjunkie]

@arees

Kleiner Tipp für PS --> Alt + Shift + Ctrl + S

Oben rechts ist das Optimize Menu da hast Du Optimize to File Size
Dort kannst Du direkt die Dateigröße einstellen und sehen, ob dir die Qualität reicht.

Unten links hast Du Select download Speed
Über den Daumen gepeilte Ladezeit zur Bandbreite.