gif động vs video vs canvas - cho tốc độ và kích thước tệp

Question

Giả sử bản trình diễn sản phẩm đơn giản, ví dụ: một trong những tìm thấy trên http://www.sublimetext.com/

tức là một cái gì đó đây không phải là truyền thống res cao video và có thể là hợp lý tài năng với:

• gif động
• video (có thể được nhúng youtube, tùy chỉnh máy nghe nhạc html5, bất kể là cạnh tranh nhất)
• canvas

Câu hỏi là, hoạt động nào tốt hơn cho người dùng? Cả về:

1. Kích thước của các tập tin người dùng phải được tải về để xem các 'demo sản phẩm'
2. Các yêu cầu về sức mạnh xử lý để hiển thị 'demo sản phẩm'

Nếu bạn cảm thấy rằng có một công nghệ vượt trội để thực hiện điều này hoặc một số liệu khác để đánh giá tính hữu ích của nó, hãy cho tôi biết và tôi sẽ điều chỉnh cho phù hợp.

Answer 1

Tôi biết nó đã được trả lời, nhưng khi bạn đặc biệt đề cập đến hình ảnh động chữ Sublime tôi giả sử bạn đang muốn tạo ra một cái gì đó tương tự?

Nếu đó là trường hợp thì đây là một bài giải thích làm thế nào nó được tạo ra bởi các văn bản tác giả Sublime, chính mình:

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

Phần thú vị của bài viết là cách ông làm giảm kích thước tập tin - mà tôi tin là câu hỏi của bạn.

Answer 2

Với một hình ảnh động đơn giản như một ở liên kết mà bạn đang đề cập đến, với một tỷ lệ khung hình rất thấp, đơn giản hoạt hình-PNG của GIF động có lẽ sẽ là giải pháp tốt nhất.

Tuy nhiên, bạn cần cân nhắc yếu tố chiều rộng băng tần trong trường hợp này. Nếu kích thước cuối cùng của GIF hoặc PNG lớn thì có lẽ một video đệm có lẽ tốt hơn.

Đây là bởi vì toàn bộ tập tin gif/png cần phải được tải về trước khi nó cho thấy (Tôi không chắc chắn PNG làm việc như thế nào xen kẽ khi chúng chứa hình ảnh động mặc dù).

Một đoạn video có thể lớn trong kích thước tập tin, nhưng vì nó thường được đệm, bạn sẽ có thể hiển thị các hình ảnh động gần như ngay lập tức.

Sử dụng máy chủ bên ngoài như YouTube hoặc những người khác có thể có lợi cho trang web của bạn cũng như chiều rộng băng được lấy từ trang web đó chứ không phải từ máy chủ của bạn (trong trường hợp bạn sử dụng nhà cung cấp giới hạn hoặc tính phí cách).

Để biết thêm thông tin về PNG hoạt hình hoặc APNG (vì đây không phải là quá nổi tiếng):
https://en.wikipedia.org/wiki/APNG

Các vải ở đây chỉ là một thiết bị hiển thị và không thực sự cần thiết (nơi chứa hình ảnh không giống nhau công việc và cũng có thể tạo ảnh động GIF/PNG trong khi canvas không thể).

Nếu bạn sử dụng rất nhiều vectơ sau đó vải có thể được xem xét.

CSS3 hoạt hình cũng là một lựa chọn cho những thứ như bản trình chiếu.