gif animato vs video vs canvas - per velocità e dimensione del file

Question

Supponendo una semplice demo del prodotto, ad es. quello trovato sul http://www.sublimetext.com/

cioè qualcosa che non è tradizionale il video ad alta risoluzione e potrebbe essere ragionevole compiuta con:

• gif animate
• video (può essere incorporato di YouTube, player HTML5 su misura, tutto ciò che è più competitiva)
• tela

la domanda è, che funziona meglio per l'utente? Sia in termini di:

1. La dimensione dei file l'utente deve essere scaricato per visualizzare l' 'demo del prodotto'
2. I requisiti in termini di potenza di elaborazione per visualizzare la 'demo del prodotto'

Se ritieni che ci sia una tecnologia superiore per eseguire questa o un'altra metrica per giudicare la sua utilità, fammelo sapere e mi adeguerò di conseguenza.

Answer 1

So che ha già risposto, ma come hai fatto specificamente riferimento all'animazione Sublime Text presumo tu voglia creare qualcosa di simile?

Se questo è il caso, allora ecco un post che spiega come è stato creato dall'autore Sublime Text, se stesso:

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

La parte interessante di questo articolo è come egli riduce la dimensione del file - che credo sia la tua domanda.

Answer 2

Con una semplice animazione come quella del link a cui ci si riferisce, con una frequenza fotogrammi molto bassa, un semplice PNG animato di GIF animate sarà probabilmente la soluzione migliore.

Tuttavia, è necessario considerare il fattore di larghezza di banda in questo. Se la dimensione finale della GIF o del PNG è grande, probabilmente un video memorizzato nel buffer è probabilmente migliore.

Questo perché l'intero file gif/png deve essere scaricato prima che venga visualizzato (non sono sicuro di come funzionano i file PNG interleaved quando contengono animazione).

Un video può essere più grande nelle dimensioni del file, ma poiché è in genere memorizzato nel buffer, è possibile visualizzare l'animazione quasi immediatamente.

L'utilizzo di host esterni come YouTube o altri può essere vantaggioso per il tuo sito così come la larghezza della banda viene ricavata da tali siti e non dal tuo server (nel caso in cui utilizzi un provider che limita o addebita questo in vari modi).

Per ulteriori informazioni sulle PNG animate o APNG (in quanto non è così ben noto):
https://en.wikipedia.org/wiki/APNG

La tela in questo è solo un dispositivo visualizzatore e non è necessaria (un contenitore un'immagine fa lo stesso lavoro e può anche animare il GIF/PNG mentre una tela non può).

Se si utilizzano molti vettori, è possibile prendere in considerazione la tela.

L'animazione CSS3 è anche un'opzione per cose come le diapositive della presentazione.