Nasıl kullanılır
- Bir GIF dosyasını bırakma alanına sürükleyin, seçmek için tıklayın veya bir görsel yapıştırın.
- Animasyonu korumak için "Hedef biçim" ayarını "Orijinal biçimi koru", "Maks. genişlik" ayarını da "Orijinal boyut" olarak bırakın.
- Orijinal boyutu ve Base64 boyutunu kontrol edin; animasyonlu GIF'ler hızla büyür.
- HTML img etiketini veya CSS background-image çıktısını kopyalayın ya da data URI, ham Base64 veya Markdown sürümünü kullanın.
GIF biçimi hakkında
GIF (Graphics Interchange Format, MIME türü image/gif) 1987'den kalma bir biçimdir. Her kare en fazla 256 renkli bir palet kullanır ve LZW ile kayıpsız olarak sıkıştırılır. Saydamlık ya hep ya hiçtir: bir palet girdisi saydam olarak işaretlenebilir, ancak kısmi opaklık yoktur. Bir dosya, her biri kendi gecikme süresine sahip çok sayıda kare ve bir döngü sayısı içerebilir; GIF'in kısa animasyonların biçimi hâline gelmesinin nedeni budur.
Bir GIF'in Base64 karşılığı, yaygın GIF89a sürümünde R0lGODlh, daha eski GIF87a sürümünde ise R0lGODdh ile başlar.
Animasyonu koruma
Orijinal biçimi koruduğunuzda araç, dosya baytlarını olduğu gibi kodlar. Bu nedenle data URI, ister bir <img> etiketinde ister CSS arka planı olarak kullanın, dosyanın kendisiyle tamamen aynı şekilde oynar.
PNG, JPEG veya WebP'ye dönüştürmek ya da bir "Maks. genişlik" değeri belirlemek görseli tarayıcıda yeniden çizer ve yalnızca ilk kare kalır. Bu, bir animasyonun sabit önizlemesini istediğinizde işe yarar; ancak animasyonlu sürüm için iki seçeneği de kapalı bırakın.
GIF data URI'leri nerelerde hâlâ mantıklı
- CSS'teki küçük yükleme göstergeleri ve animasyonlu durum simgeleri.
- Yer tutucu
srcolarak kullanılan klasik 1x1 saydam piksel. Yalnızca birkaç düzine bayt tutar ve 100 Base64 karakterinin epey altında kalır. - GIF'in kompakt olduğu, az renkli basit çizimler.
Büyük animasyonlar uygun değildir. 2 MB'lık bir tepki GIF'i, kendi başına önbelleğe alınamayan yaklaşık 2,7 MB'lık metne dönüşür; sunucuda barındırılan bir video dosyası veya animasyonlu WebP çok daha hafiftir.
.loading {
background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">Sıkça sorulan sorular
Base64 ile kodladıktan sonra GIF'im hâlâ animasyonlu olacak mı?
Evet, orijinal biçimi koruduğunuz ve yeniden boyutlandırmadığınız sürece. Base64, tüm kareler ve döngü ayarı dahil dosyanın tamamını saklar.
GIF'im dönüştürmeden sonra neden hareket etmiyor?
PNG, JPEG veya WebP'ye dönüştürmek ya da yeniden boyutlandırmak, görseli ilk karesinden yeniden oluşturur. Araç animasyonlu PNG veya WebP dosyaları oluşturamaz; hareketi korumak için orijinal GIF'i kullanın.