animiertes Gif vs Video vs Leinwand - für Geschwindigkeit und Dateigröße

Question

Angenommen, eine einfache Produkt-Demo, z. das auf http://www.sublimetext.com/

also etwas fanden diese nicht traditionell hochauflösendes Video und mit vollendeter sinnvoll sein könnte:

• animierte gif
• Video (kann eingebettete YouTube, eigene html5-Spieler werden, was auch immer wettbewerbsfähigste)
• Leinwand

die Frage ist, was für den Benutzer besser abschneidet? Sowohl in Bezug auf:

1. Die Größe der Dateien der Benutzer heruntergeladen werden muss, die ‚Produkt-Demo‘
2. Die Anforderungen an die Verarbeitungsleistung zu sehen, die ‚Produkt-Demo‘ angezeigt

Wenn Sie glauben, dass es eine überlegene Technologie gibt, um diese oder eine andere Metrik zu erreichen, um ihre Nützlichkeit zu beurteilen, lassen Sie es mich wissen und ich werde mich entsprechend anpassen.

Answer 1

Ich weiß, es ist bereits beantwortet, aber wie Sie speziell auf die Sublime Text Animation verwiesen, nehme ich an, dass Sie etwas Ähnliches erstellen möchten?

Wenn das der Fall ist, dann ist hier ein Beitrag zu erklären, wie es von dem Sublime Text Autor erstellt wurde, selbst:

• http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html

Der interessante Teil des Artikels ist, wie er das reduziert Dateigröße - was ich glaube, ist deine Frage.

Answer 2

Mit einer einfachen Animation wie der auf dem Link, auf den Sie sich beziehen, mit einer sehr niedrigen Bildrate, wird eine einfache animierte PNG von animiertem GIF wahrscheinlich die beste Lösung sein.

Allerdings müssen Sie hier den Bandbreitenfaktor berücksichtigen. Wenn die endgültige Größe des GIF oder des PNG groß ist, ist wahrscheinlich ein gepuffertes Video wahrscheinlich besser.

Dies ist, weil die ganze gif/png-Datei heruntergeladen werden muss, bevor es zeigt (ich bin mir nicht sicher, wie verschachtelte PNGs funktionieren, wenn sie Animation enthalten).

Ein Video kann eine größere Dateigröße haben, aber da es normalerweise gepuffert ist, können Sie die Animation fast sofort anzeigen.

Die Verwendung von externen Hosts wie YouTube oder anderen kann für Ihre Site von Vorteil sein, ebenso wie die Bandbreite von dieser Site und nicht von Ihrem Server gezogen wird (falls Sie einen Provider verwenden, der dies limitiert oder in Rechnung stellt) Wege).

Für weitere Informationen über animierte PNGs oder APNG (da dies nicht so ist bekannt):
https://en.wikipedia.org/wiki/APNG

Die Leinwand in dieser ist nur ein Anzeigegerät und nicht wirklich notwendig (ein Bild Behälter macht die gleiche Job und kann auch die GIF/PNG animieren, während eine Leinwand nicht).

Wenn Sie viele Vektoren verwenden, kann Canvas berücksichtigt werden.

CSS3-Animation ist auch eine Option für Dinge wie Präsentationsfolien.