Thực sự các hình ảnh động như thế nào — Từ các khung canvas đến máy nén LZW

Tại sao các tín đồ vẫn còn hiện hữu

Định dạng liên tục đồ họa được tạo ra bởi CompuServe vào năm 1987 [So sánhServe, 1987]. Nó hỗ trợ hoạt hình, trong suốt và không mất gì. Nó chỉ giới hạn có 257 màu trên mỗi khung hình. Không có âm thanh. Nó tạo ra những tập tin lớn. Theo mọi biện pháp kỹ thuật, nó nên được thay thế từ nhiều thập kỷ trước.

Và tuy nhiên: Discord, Slack, iMessage, Twitter, Reddit, và email tất cả hỗ trợ GIFs bản xứ. GIPHY phục vụ hơn 10 tỉ GIF mỗi ngày [GIPHY, 2020]. Định dạng này tồn tại vì nó hoạt động ở mọi nơi, không cần mã hóa và chơi một cách tự động. Không có định dạng khác có tổ hợp hỗ trợ phổ quát và phát lại không Phi.

Hiểu cách hoạt động của GIF hữu ích hơn cả những câu chuyện tầm phào — nó giải thích tại sao việc xuất bản GIF là 4MB, tại sao dốc trông có vẻ dốc, và bạn có thể làm gì.

Bước 1: Bắt khung

Một chương trình GIF hoạt hình là một chuỗi các ảnh ( Khung) được hiển thị theo thứ tự với sự chậm trễ giữa mỗi ảnh. Để tạo ra một bức tranh hoạt họa, bạn cần phải chụp lại trạng thái vẽ ở trạng thái thường xuyên.

Trong một trình duyệt, điều này có nghĩa là đọc dữ liệu điểm ảnh từ một yếu tố HTML XQ tại mỗi thời điểm khung — thường qua canvas.toDataURL() hoặc ctx.getImageData(). Hoạt hình được nâng cao đến thời gian mục tiêu, bức tranh được vẽ, và các điểm ảnh được chụp. Phím ràng buộc: bạn phải đợi vòng vẽ của trình duyệt (requestAnimationFrame) trước khi đọc điểm ảnh, nếu không bạn sẽ bắt một bộ đệm cũ.

Một chiếc GIF điển hình ở 15 FPS trong 3 giây yêu cầu 45 khung thu. Tại 108×1080 độ phân giải, mỗi khung khoảng 4.7 triệu điểm ảnh.

Bước 2: Số lượng màu

GIF hỗ trợ tối đa 256 màu sắc trên mỗi khung, được cất giữ trong bảng màu (tay nhỏ). Một khung vải điển hình có hàng ngàn màu sắc riêng biệt. Tái tạo lại cầu nối đến 257 mà không cần nhìn thấy sự thoái hóa là phần khó nhất của mã hóa GIF.

Phương pháp thông thường là thuật toán cắt giảm **[Heckbert, 1982]: sắp xếp tất cả các điểm ảnh bằng kênh đỏ nhất của họ, chia nhỏ danh sách tại trung tâm, lặp lại cho màu xanh lá cây và xanh lá cây, tái phân chia không gian màu sắc thành 257 vùng. Trung bình mỗi vùng trở thành một mục nhập bảng màu. Đây là những gì gif.js — thư viện PinePaper sử dụng — thực hiện trong Web công nhân cho chủ nghĩa song song [Rubaxa, gif.js].

Tính toán màu là lý do tại sao GFs xử lý đồ họa phẳng màu sắc nhưng phải vật lộn với ảnh chụp và chuyển tiếp. Một dốc trên 1080 điểm ảnh có thể sử dụng 500+ màu riêng biệt. Sự nén đến cầu dao có thể nhìn thấy được — những bước riêng lẻ để làm mịn.

Những gì bạn có thể làm: Dùng ít màu hơn trong thiết kế của bạn. Hình phẳng, chất đặc, và văn bản định lượng tốt. Chuyển đổi mịn và họa tiết hình ảnh thì không. Nếu GIF của bạn có band, đơn giản hóa bảng màu, không phải độ phân giải.

Bước 3: LZW nén

Mỗi điểm phụ của mỗi điểm ảnh (so sánh vào bảng chọn màu Cầu) được nén bằng Lemel-Ziv-Welch (LZW) nén [Welch, 1984). LZW xây dựng một từ điển của chuỗi byte lặp đi lặp lại khi nó quét dữ liệu. Khi nó chạm trán một chuỗi mà nó đã nhìn thấy trước đó, nó xuất ra chỉ mục từ điển thay vì các byte nguyên.

Điều này có nghĩa là việc nén GIF hữu hiệu nhất khi có những khu vực lớn gồm màu lặp đi lặp lại — gốc đặc, hình phẳng, chữ trên bề mặt đồng nhất. Kết cấu phức tạp với độ biến thể điểm ảnh tạo ra tỷ lệ nén thấp bởi vì từ điển LZW tìm thấy vài chuỗi lặp đi lặp lại.

Practical ngụ ý: Một văn bản màu trắng 108×1080 GIF trên nền màu đen có thể nén lại đến 200KB. Độ phân giải tương tự GIF của một bức ảnh phức tạp có thể là 8MB. Kích cỡ tập tin phụ thuộc vào độ phức tạp thị giác hơn là độ phân giải hay số đếm khung.

Bước 4: Tháo gỡ khung và làm báp têm

Khung GIF có thể xác định một phương pháp disposal: dọn sạch vải trước khi vẽ khung kế tiếp, để lại khung trước nhìn thấy được, hoặc phục hồi nền. Bộ mã hóa GIF thông minh sử dụng khung khác nhau — mã hóa chỉ các điểm ảnh thay đổi giữa các khung, chứ không phải toàn bộ khung.

Nếu hoạt cảnh của bạn có nền tĩnh với một yếu tố di chuyển nhỏ, GIF tối ưu hoá mã hóa nền một lần và chỉ cập nhật vùng mà phần tử di chuyển. Điều này giảm đáng kể kích cỡ tập tin. Bộ mã hóa PinePaper sử dụng gif.js áp dụng tối ưu này tự động.

Con số

Đối với một hoạt hình PinePaper điển hình (108×1080, 15 FPS, 3 giây, nền tối với văn bản hoạt hình):

Thành phần	Cỡ
Khung thô (45 × 4. 7M điểm ảnh × 3 byte)	~634 MB
Sau khi định lượng (56 màu, 1 byte/G)	~211 MB
Sau khi nén LZW	~2-4 MB
Với khung khác nhau	~1-2 MB

Tỷ lệ nén từ thô đến cuối cùng là khoảng 300:1 đến 600:1. Hầu hết những điều này đến từ việc định lượng màu (1:1) và LZW (50: 1 đến 100:1).

Khi dùng định dạng GIF khác

Định dạng	Tốt nhất cho	Hạn chế
GIF	Hỗ trợ chung, chơi tự động, ứng dụng tin nhắn	257 màu, tập tin lớn, không âm thanh
WebM (VP9)	Chất lượng tốt nhất, tập tin nhỏ nhất, web	Sự hỗ trợ hạn chế ở Sairi, iMessage
MP4 (H.264)	Truyền thông xã hội, người chơi điện tử	Cần thiết mã hóa, không có độ trong suốt
ANG	Hoạt hình toàn bộ màu với độ trong suốt	Sự hỗ trợ hạn chế trong trình duyệt cũ

GIF là lựa chọn đúng khi bạn cần sự tương thích phổ quát và chơi tự động. Đối với chất lượng hay kích cỡ tập tin, WebM hoặc MP4 tốt hơn.

Thử đi

Mở [PinePaper Studio] (/editor), tạo một thiết kế, và xuất khẩu như GIF. Xem kích cỡ tập tin thay đổi như bạn:

• Chèn
• Thêm Chuyển tiếp (tính sai = tập tin lớn hơn)
• Dùng màu đặc (tính toán tốt = tập tin nhỏ hơn)
• Tăng cỡ vải (nhiều điểm ảnh trên mỗi khung = tập tin lớn hơn)

Mỗi sự thay đổi là thước đo đường ống nén. Bạn không chỉ tạo ra GIF mà còn quan sát cách mà lý thuyết thông tin áp dụng cho thiết kế của bạn.

Tham khảo

• CompuServe (1987). Định dạng đồ họa tương tác, Phiên bản 87a.
• GIPHY (2020). Báo cáo thường niên GIPHY: 10 tỷ Daily Services.
• Heckbert, P. (1982). Định dạng ảnh cho bộ trình bày khung Buffer. * Máy vẽ đồ họa (SIGGPH), 16(3), 297-307.
• Rubaxa. gif.js — Bộ mã hóa JavaScript GIF dùng Web worker. gittub.com/jnordberg/gif.js.
• Welch, T.A. (1984). Một kỹ thuật viên nén dữ liệu cao cấp.

---

Xuất khẩu PinePaper của GIF miễn phí — không dấu ấn, không đăng ký. Mở [pather.studio/tor] và xuất khẩu hoạt họa đầu tiên của bạn.