Görüntü → Base64 Dönüştürücü

Herhangi bir görüntüyü Base64 veri URI'sine kodlayın veya veri URI'sini yapıştırarak görüntüye geri çözün. Sonucu kopyalayın veya CSS url() snippet'ini alın. Hiçbir şey cihazınızı terk etmez.

Görüntüden Base64'e nasıl çalışır

Görüntüden Base64'e aracı, görüntü dosyanızı okur ve onu ayrı bir dosya isteğine gerek kalmadan doğrudan HTML, CSS veya JSON'a gömebileceğiniz bir Base64 veri URI'sine kodlar. Dönüştürme tarayıcınızdaki FileReader API'sini kullanır; görüntünüzden hiçbir bayt sunucuya gönderilmez. Ayrıca bir Base64 dizesini geri yapıştırarak görüntüyü çözebilir ve önizleyebilirsiniz, tümü yerel olarak.

Bir Base64 veri URI'si, üç baytlık her grubun dört ASCII karakterine genişlemesi nedeniyle ikili orijinalden yaklaşık yüzde 33 daha büyüktür. Bu boyut artışı, bir görüntüyü belge veya stil sayfasına satır içi yerleştirmenin kolaylığı için beklenen bir dengedir. Araç hem ham Base64 dizesini hem de kullanıma hazır bir HTML img etiketi ve projenize hızlıca kopyalayıp yapıştırabileceğiniz bir CSS background-image parçacığı gösterir.

Yazan: Bastien Sulyan

Görüntüden Base64'e nasıl kullanılır, adım adım

Yükleme alanına bir görüntü dosyası sürükleyin veya göz atmak için tıklayın. Kabul edilen formatlar: JPEG, PNG, WebP, GIF, SVG.
Base64 veri URI'si çıktı alanında hemen görünür.
Ham Base64 dizesini veya önceden biçimlendirilmiş HTML img etiketini ya da CSS background-image parçacığını kopyalayın.
Çözmek için giriş alanına bir Base64 dizesi yapıştırın ve görüntüyü önizlemek için çözme moduna geçin.
Herhangi bir parçacığı panoya kopyalamak için yanındaki kopyala düğmesine tıklayın.

Yaygın kullanım örnekleri

Bir ön uç geliştirici, fazladan HTTP isteğini ortadan kaldırmak için CSS dosyasında küçük bir ikonu veri URI'si olarak satır içi hale getiriyor.
Bir geliştirici, JavaScript paketi yüklenmeden önce yer tutucu görüntünün mevcut olması için küçük bir yükleme animasyonunu Base64 src özelliği olarak yerleştiriyor.
Bir QA mühendisi, bir API testi için JSON yüküne doğrudan yapıştırmak üzere test görüntüsünün Base64'ünü kopyalıyor.
Bir e-posta şablonu oluşturucu, bazı e-posta istemcileri harici görüntü isteklerini engellediği için imza logosunu Base64 veri URI'si olarak satır içi hale getiriyor.

Sık sorulan sorular

Base64 çıktısı neden orijinal dosyamdan yaklaşık üçte bir daha büyük?

Base64 kodlaması her üç ikili baytı dört ASCII karakteri olarak temsil eder (4/3 oranı). İkili olarak 100 KB olan bir görüntü, Base64 dizesi olarak yaklaşık 133 KB olur. Bu, kodlama şemasının doğasında var olan bir durumdur, araç sınırlaması değildir.

Görüntü içeriği kodlama sırasında sunucuya iletiliyor mu?

Hayır. FileReader API, ikili dosyayı yerel diskinizden okur ve sonucu doğrudan tarayıcı sekmenizdeki JavaScript kodlama işlevine iletir. Görüntü verisi cihazınızdan çıkmaz.

Veri URI çıktısını herhangi bir HTML veya CSS bağlamında kullanabilir miyim?

Evet. data:image/jpeg;base64, ile başlayıp kodlanmış dize ile devam eden bir veri URI'si, img etiketinin src özelliği olarak veya CSS background-image özelliğindeki url() değeri olarak kullanılabilir. Tüm modern tarayıcılar veri URI'lerini destekler. Çok büyük veri URI'leri sayfa oluşturmayı yavaşlatabilir, bu nedenle satır içi genellikle birkaç kilobaytın altındaki küçük görüntüler için ayrılır.

Araç animasyonlu GIF'leri destekliyor mu?

Araç, animasyonlu GIF'ler dahil sağladığınız herhangi bir dosyanın tam ikili içeriğini kodlar. Bir img etiketinin src'si olarak kullanıldığında ortaya çıkan veri URI, GIF animasyonunu destekleyen tarayıcılarda animasyonu oynatır.

Bir Base64 dizesini tekrar görüntüye çevirmek için ne yapmalıyım?

Aracı çözme moduna geçirin, Base64 dizenizi yapıştırın (data: öneki ile veya olmadan) ve araç onu çözerek ikili görüntüyü indirme olarak sunar ve önizleme gösterir.

İlgili araçlar

Her şeyi yerel tutun, tamamlayıcı araçları keşfedin.

Tüm görsel araçları