Görsel - Base64 Dönüştürücü

Görselinizi kod içine gömülebilecek bir Base64 data URI değerine dönüştürün.

Ne zaman kullanmalısın?

Küçük bir görseli doğrudan HTML/CSS koduna gömmen gerektiğinde (ayrı bir dosya isteği yapmadan) kullan; genelde ikon veya küçük logo için uygundur.

Ne zaman kullanmamalısın?

Büyük bir görsel için kullanma; Base64 kodlaması dosya boyutunu yaklaşık %33 artırır ve sayfa kodunu şişirir, bu yüzden yalnızca küçük görsellerde mantıklı.

Adım adım kullanım

Gömmek istediğiniz görseli önceden küçük tutun. Gerekirse önce boyutlandırma veya sıkıştırma araçlarından geçirin.
"Görsel" alanından dosyayı seçin.
"Base64'e dönüştür" butonuna tıklayın. Görselin data URI karşılığı, "data:image/" ile başlayan uzun bir metin olarak oluşur.
Bu metnin tamamını kopyalayıp HTML, CSS ya da e-posta şablonunuzda dosya yolunun yerine yapıştırın.

Örnek

Tek dosyadan oluşan bir HTML rapor şablonu hazırladığınızı düşünün. Şablonun başında şirketin küçük bir logosu var ve dosyayı kime gönderirseniz gönderin logonun kaybolmamasını istiyorsunuz. Normalde img etiketinin src özelliğine logo.png gibi bir dosya yolu yazarsınız. Bunun yerine araçtan aldığınız data URI metnini src değerine koyduğunuzda logo doğrudan HTML dosyasının içine gömülür. Rapor tek başına açıldığında bile logo görünür, ayrıca bir görsel dosyası taşımanıza gerek kalmaz. Aynı yöntem CSS içinde background-image için url() değerinde de kullanılabilir. Küçük ikonlar, bir yükleniyor göstergesi veya tek seferlik bir form içindeki imza görseli de bu yönteme uygun adaylardır. Hepsinde ortak nokta, görselin birkaç kilobaytı geçmemesi ve sayfadan ayrı bir dosya olarak tutulmasının bir avantaj sağlamamasıdır.

Görseli Base64'e çevirmek

Base64, görseli metin olarak göstererek HTML ya da CSS içine doğrudan gömmenizi sağlar (data URI). Küçük simgeler için ekstra bir istek gereksiz kalır; ancak Base64 dosya boyutunu yaklaşık üçte bir artırır ve tarayıcı önbelleğinden ayrı yararlanamaz.

Ne zaman kullanılmalı

Yalnızca küçük görseller (simge, küçük logo) için uygundur; büyük fotoğrafı gömmeyin.
Sayfa HTML'ini şişirdiği için sık değişen görselleri gömmeyin.
Veri URI'sinin başında doğru MIME türünü (örneğin image/png) kullanın.
Base64 şifreleme değildir; görseli gizlemez.

Dikkat edilmesi gerekenler

Gömülü görseller tarayıcı tarafından ayrı bir dosya olarak önbelleğe alınmaz. Aynı görsel birçok sayfada tekrar ediyorsa normal bir dosya olarak sunmak daha verimli olabilir.
Bazı e-posta istemcileri data URI ile gömülü görselleri göstermez. E-posta şablonunda kullanacaksanız birkaç farklı istemcide test edin.
Çıktı metni tek bir uzun satırdır. Kopyalarken başını veya sonunu kaçırmak görselin hiç görünmemesine yol açar.
SVG gibi zaten metin tabanlı görsellerde Base64 yerine SVG kodunu doğrudan kullanmak çoğu zaman daha kısa ve okunaklı olur.

Sık sorulan sorular

Görselim sunucuya gönderiliyor mu?

Hayır, işlem tamamen tarayıcınızda (Canvas API ile) yapılır, görseliniz cihazınızdan çıkmaz.

Kalite kaybı olur mu?

Format dönüşümlerinde ve sıkıştırmada bir miktar kalite kaybı olması normaldir; JPG gibi kayıplı formatlarda bu daha belirgindir.

Hangi formatlar destekleniyor?

JPG, PNG ve WebP formatları desteklenir.