Image to Base64
Base64 encodes binary image bytes as ASCII text you can paste into HTML img src, CSS url(), or JSON payloads. Useful for tiny icons, data URIs in prototypes, and APIs that expect inline images. Encoding happens locally — nothing is uploaded.
How to encode an image to Base64
1. Upload the image file (keep it small — under ~100 KB is practical).
2. Copy the generated Base64 string or full data URL.
3. Paste into your HTML, CSS, or config.
4. Test in the target environment — some email clients limit data URIs.
Kodlama örnekleri
HTML e-postasında satır içi logo
data:image/png;base64,... biçimindeki 2 KB PNG logosu, katı kurumsal gelen kutularında harici görsel engellemeyi önler.
CSS prototip için arka plan
Base64 dokusunu varlık barındırma olmadan tek dosyalı bir demoya yapıştırın.
API test fikstürü
Görüntü yükleme uç noktası testi için JSON istek gövdesine küçük bir Base64 JPEG ekleyin.
Base64 görüntüleri yardımcı olduğunda
• Bir HTTP isteğinin satır içi boyut ek yükünden daha pahalı olduğu çok küçük varlıklar için.
• Çevrimdışı tek dosyalı HTML prototipleri için.
• Kilitli ortamlarda harici barındırma kullanılamadığında.
Base64 görsellerinden ne zaman kaçınılmalıdır?
• Büyük fotoğraflar için — Base64 ~%33 büyür ve HTML önbelleğini şişirir.
• CDN önbelleğe alma ve yanıt veren srcset mevcut olduğunda.
• Birçok e-posta istemcisi veri URI'lerini engellediğinde bunun yerine barındırılan görselleri kullanın.
Performans bütçelerinde Base64
Satır içi oluşturma, gidiş-dönüşleri ortadan kaldırır ancak görüntünün tarayıcıda ayrı olarak önbelleğe alınmasını önler. Ekranın üst kısmındaki kritik küçük simgeler için idareli kullanın; Büyük medyayı normal şekilde yavaş yükleyin.
E-posta istemcisinin tuhaflıkları
Outlook masaüstünde geçmişten beri sınırlı veri URI desteği bulunmaktadır. Kampanyalarda satır içi görsellere güvenmeden önce Gmail, Apple Mail ve Outlook'u test edin.
Güvenlik
Güvenilmeyen Base64'ü, içeriği anlamadan sayfalara yapıştırmayın; bu, HTML'da hala yürütülebilir bağlamdır. Yalnızca kendi varlıklarınızı kodlayın.
Sık sorulan sorular
Base64 neden dosyadan daha büyük?
Kodlama, her 3 bayt için 4 karakter kullanır; bu, kabaca %33 ek yük artı veri URL'si öneki anlamına gelir.
Veri URL'si nedir?
Biçim: data:image/png;base64,iVBORw0KG... — MIME türü artı kodlanmış veri.
E-posta için maksimum boyut?
Toplam mesaj büyümesini 10-20 KB'ın altında tutun; birçok müşteri devasa satır içi görseller karşısında boğuluyor.
Dosyaya geri kod çözülsün mü?
Gerekirse ASCII'yi ikiliye çevirmek için Base64 kodlayıcı/kod çözücü aracını kullanın.
Görseller yükleniyor mu?
Hayır — FileReader tarayıcınızda yerel olarak okur.
SVG Base64'e mi?
Küçük SVG metni için mümkündür; Raster formatları veri URI'leri için daha yaygındır.