Hareketli GIF'ler aslında nasıl çalışır - Blood Frames'tan LZW Promosyon

Neden GIF Hala Var

Graphics Interchange Format, 1987 yılında CompuServe tarafından oluşturuldu [CompuServe, 1987]. Animasyonu, şeffaflığı ve kayıp sıkıştırmayı destekler. Çerçeve başına 256 renk ile sınırlıdır. Sesi yok. Büyük dosyaları üretir. Her teknik ölçüye göre on yıllar önce değiştirilmesi gerekir.

Ve yine de: Discord, Slack, iMessage, Twitter, Reddit ve tüm destek GIFs yerli olarak. GIPHY günde 10 milyardan fazla GIF hizmet ediyor [GIPHY, 2020]. Format devam eder, çünkü her yerde çalışır, kodc gerektirmez ve otomatik olarak oynar. Başka bir format, evrensel desteğin ve sıfır-friction playback'in bu kombinasyonuna sahiptir.

GIF'lerin çalışmalarının trivia'nın ötesinde nasıl yararlı olduğunu anlamak - ihraç edilen GIF'in neden 4MB olduğunu, neden gradients banded göründüğünü ve bununla ilgili ne yapabileceğinizi açıklıyor.

Adım 1: Frame Capture

Bir animasyon GIF, her biri arasında bir gecikme ile görüntülenen bir görüntü dizisidir. Bir tuval animasyonundan birini oluşturmak için, tuval durumunu normal aralıklarla yakalamanız gerekir.

Bir tarayıcıda, bu, Python verilerini her çerçevede bir HTML <canvas> elementten okumak anlamına gelir - genellikle canvas.toDataURL() veya ctx.getImageData() ile. Animasyon hedef zamana doğru ilerliyor, tuval verilir ve piksel yakalanır. Anahtar kısıtlama: Tarayıcının boyama döngüsünü (requestAnimationFrame) okumaktan önce beklemeniz gerekir, aksi takdirde bir stale buffer yakalarsınız.

3 saniye boyunca 15 FPS'te tipik bir GIF 45 çerçeve yakalama gerektirir. 1080 × 1080 çözünürlükte, her çerçeve yaklaşık 4.7 milyon pikseldir.

2. Adım: Color Quantization

GIF çerçevede maksimum 256 renk destekler, renkli bir masada depolanır (palette). Tipik bir tuval çerçevesi binlerce farklı renktedir. Görünüşe göre bozulma olmaksızın 256'yi azaltmak GIF'in en zor parçasıdır.

Standart yaklaşım, median kesim algoritması [Heckbert, 1982]: kırmızı kanallarından gelen tüm pikseller, listeyi medyan'da bölmek, yeşil ve mavi için tekrarlamak, renkli alanı 256 bölgeye tekrar bölmek. Her bölgenin ortalaması bir palet girişi haline gelir. Bu gif.js - kütüphane PinePaper kullanımı - Web İşçilerinde paralellik için geçerlidir [Rubaxa, gif.js].

Renk ölçümlemesi, GIF'lerin düz renkli grafiklerle iyi mücadele etmesidir, ancak fotoğraflar ve gradyanlarla mücadele eder. 1080 piksel arasında bir gradient 500+ farklı renkler kullanabilir. 256'ye dikkat etmek görünür banding - gradientin düzgün olması gerektiği ayrı adımlar.

Bu konuda ne yapabilirsiniz: Tasarımınızda daha az renk kullanın. Düz şekiller, sağlam dolgular ve metin iyileşir. Smooth gradients ve fotoğraf dokuları değil. GIF'inizin grubu varsa, paleti basitleştirmek, karar değil.

Adım 3: LZW Promosyon

Her çerçevenin piksel endeksleri ( 256 renkli palete) sıkıştırılır Lempel-Ziv-Welch (LZW) sıkıştırma [Welch, 1984]. LZW, verileri taradığı gibi tekrarlanan diziler hakkında bir sözlük oluşturur. Daha önce gördüğü bir dizi ile karşılaştığında, ham bytes yerine sözlük indeksi çıktı.

Bu, GIF sıkıştırması, tekrarlanan rengin büyük alanları olduğunda en etkilidir - sağlam arka planlar, düz şekiller, tek bir yüzeyde metin. Python seviyesi varyasyonu ile karmaşık dokular zayıf sıkıştırma oranları üretir çünkü LZW sözlüğü birkaç tekrarlanmış dizi bulur.

Practical implication: Bir 1080x 1080 GIF beyaz metin siyah bir arka plan üzerinde 200KB'ye sıkıştırılabilir. Karmaşık bir fotoğrafın aynı çözünürlüğü GIF 8MB olabilir. Dosya büyüklüğü, karar veya çerçeve sayımından daha fazla görsel karmaşıklığına bağlıdır.

Adım 4: Frame Disposal ve Optimizasyon

GIF çerçeveleri bir disposal yöntemi belirtebilir: bir sonraki çerçeveyi çizmeden önce tuvali temizlemek, önceki çerçeveyi görünür bırakmak veya restore etmek. Arka plan. Akıllı GIF kodlayıcılar Boyutlu Farklılaştırma** - çerçeveler arasında değişen sadece pikselleri, tüm çerçeve değil.

Eğer animasyonunuz küçük bir hareketli elementle statik bir arka geçmişi varsa, bir kez optimize edilmiş bir GIF, elementin hareket ettiği bölgeye sadece güncelleştirmektedir. Bu dramatik olarak dosya boyutunu azaltır. PinePaper'in encoder, bu optimizasyonu otomatik olarak uygular.

Sayılar

Tipik bir PinePaper animasyonu için (× 1080, 15 FPS, 3 saniye, animasyonla karanlık arka plan):

Bitirme	Boyut Boyutu
Raw çerçeveleri (45 × 4.7M piksel × 3 bytes)	~634 MB
Ölçüleme (256 renkler, 1 byte/crypt)	~211 MB
LZW sıkıştırmadan sonra	~2-4 MB
Çerçeve ile farklılaşma	~1-2 MB

Nihai olarak ham'den gelen sıkıştırma oranı yaklaşık 300:1 ila 600:1'dir. Bunların çoğu renk ölçümlemesi (3: 1) ve LZW (50:1 ila 100:1).

GIF vs Diğer Biçimleri Kullanırken

Format	En iyisi için	Sınırlama
GIF	Evrensel destek, otomatik oyun, mesajlaşma uygulamaları	256 renkler, büyük dosyalar, ses yok
WebM (VP9)	En iyi kalite, en küçük dosyalar, web	Safari'de Sınırlı Destek, iMessage
MP4 (H.264)	Sosyal medya, video oyuncuları	Kodc gerek, şeffaflık yok
APNG	Tam renkli animasyon	Eski tarayıcılarda Sınırlı Destek

GIF, evrensel uyumluluk ve otomatik oyuna ihtiyacınız olduğunda doğru seçimdir. Kaliteli veya dosya büyüklüğü için WebM veya MP4 daha iyidir.

Deneyin

Open PinePaper Studio, GIF olarak bir tasarım ve ihracat yaratır. Dosya boyutunun sizin gibi nasıl değiştiğini gözlemleyin:

• Genişleme çerçevesi sayısı (daha fazla çerçeve = daha büyük dosya, orantılı olarak)
• Not gradients (poor ölçüm = daha büyük dosya)
• Katı renkler kullanın (iyi ölçüm = daha küçük dosya)
• Tuval boyutunu artırmak ( çerçevede daha fazla piksel = daha büyük dosya)

Her değişiklik, sıkıştırma hattının ölçümüdir. Sadece bir GIF yapmıyorsunuz - bilgi teorisinin sizin tasarımınıza nasıl uygulandığını gözlemliyorsunuz.

Referanslar

• CompuServe (1987). Grafik Interchange Formatı, Version 87a.
• GIPHY (2020). GIPHY Yıllık Rapor: 10 Milyar Günlük Hizmetler.
• Heckbert, P. (1996). Frame Buffer Ekran için Renk Görüntü Sayımı. Bilgisayar Grafik (SIGGGRAPH), 16(3), 297-307.
• Rubaxa. gif.js - JavaScript GIF Web İşçilerini kullanarak. XXX.com/jnordberg/gif.js.
• Welch, T.A. (1994). High-Performance Data Capsule için bir teknik. IEEE Computer, 17/6), 8-19.

---

PinePaper'in GIF ihracat ücretsizdir - su işareti yok. Açık pinepaper.studio/editor ve ilk animasyonunuzu ihraç edin.