Kullanım Görselden Data URI / Base64 Dönüştürücü

Maksimum dosya boyutu: 20 MB
Resminizi buraya bırakın
veya tıklayarak göz atın
Resme göz at
JPG, PNG, GIF, WebP, BMP, SVG, AVIF
İpucu: Veri URI’si MIME önekini içerir; sadece Base64 ise ham yüküdür.
Araç Bağlantısı
Panoya kopyalandı.
Bu Aracın Geliştirilmesine Katkıda Bulunun
2.38K
Kullanılan Süre
1.83K
Toplam Kullanıcı Sayısı
5+ yıl
Servis edildi
En son 6 gün önce. tarihinde gözden geçirilmiştir. Kullanım rakamları, periyodik denetimler sırasında güncellenmektedir. (Raporlama, . tarihinden beri devam etmektedir.21 Feb 2022)
Uyuşmazlığı bildir

İçeriği Oku

Bu aracın nasıl çalıştığını ve ne zaman kullanılması gerektiğini öğrenin.

Birden fazla görsel dosyanızı çevrimiçi ve ücretsiz olarak Data Uri ve base64 formatına dönüştürün. 

Görselden Data URI / Base64 Dönüştürücü

Bir görselden data URI / Base64 dönüştürücü, bir görseli bir web sayfasında veya diğer çevrimiçi uygulamalarda kullanılabilen bir metin dizisine hızlı ve kolay bir şekilde dönüştürmenizi sağlayan kullanışlı bir araçtır. Bu tür bir dönüştürücü, görseli kodunuza gömmek istediğiniz ancak harici bir dosya barındırma hizmeti kullanmak istemediğiniz durumlarda faydalıdır.


 

Görselden Base64 Kodlama Sistemi Nedir

Hiç bir görseli data url veya base 64 dizgesine dönüştürme ihtiyacı duydunuz mu?

Görselden Base64, herhangi bir görseli veri kaybı olmadan okunamaz bir metin formatına dönüştüren bir görsel kodlama sistemidir. Oluşturulan Base64 kodlu metinler artı, eğik çizgi, eşittir, Latin harfleri ve rakamlardan oluşur.

Base64 kodlama, ikili bilgiyi metin formatında saklamanın çok kullanışlı bir yoludur. Amacı, ikili verileri (görseller, sesler, video klipler gibi) ASCII karakterlerini (alfabedeki harfler + rakamlar) kullanarak temsil etmektir.

Neden Data URI / Base64?

Bir görsel, data URI adı verilen bir yöntem kullanılarak base64 dizgesine dönüştürülebilir. Bu, görsel için bir URL oluşturmamıza ve bunu bir web sayfasına eklememize olanak tanır. Süreç, orijinal dosya(lar)ımızı bir bayt dizisine (bayt koleksiyonu) dönüştürmeyi içerir. Ardından bayt dizimizi base64 kodlu bir dizgeye kodlayabiliriz.

Data URI'lar, yerel dosyalara kıyasla birkaç avantaj sağlar. İstemci (tarayıcı) önbelleğinde yer tasarrufu sağlar, normal görsellere göre daha küçük boyuttadır ve web sitelerinin daha az bant genişliği kullanarak daha büyük görseller sunmasına imkan verir. Base 64 dizgeleri ayrıca yaygın metin düzenleyicileri kullanılarak kolayca görüntülenebildiği için okunması daha kolaydır.

Data URI'lar ile görseli harici bir dosya yüklemeden doğrudan HTML kodunuza gömebilirsiniz. Bu, sayfa yükleme sürelerinizi hızlandırabilir ve aslında yapması oldukça kolaydır. Bu yazıda, görselleri saniyeler içinde data URI'lara nasıl dönüştüreceğinizi göstereceğiz.

Görseli Saniyeler İçinde Base64 Kodlu / Data URI'ya Nasıl Dönüştürürüm

Hiç web sitenizdeki görsellerin daha hızlı yüklenmesini sağlamak için nasıl yapılacağını merak ettiniz mi? Bunun bir yolu data URI'ları kullanmaktır. Sadece Sürükle & Bırak veya cihazınızdan manuel olarak yükleyin ya da web'den görsel URL'sini yapıştırarak hedeflediğiniz görseli Base64 / Data URI metin formatına dönüştürebilirsiniz.

Görselden Base64 Kodlu Örnek

Base64 Kodlu bir görsel çıktısı şuna benzer data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC....

Görselden Base64 Kodlu Kullanımları

Görsel Kaynağı (img src) için:

< img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC..." />

Arka Plan Görseli URL'si (background-image: url) için:

background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC...")

Data URI / Base64 Nasıl Kullanılır

Data URI / Base64 dönüştürücüyü kullanmak için, oluşturulan kodu gömülü görselin görünmesini istediğiniz projenize kopyalayıp yapıştırmanız yeterlidir. Doğru görüntüleme biçimlendirmesi için gerekli olduklarından kod içindeki satır sonlarını veya boşlukları kaldırmadığınızdan emin olun. Ayrıca dönüştürülen görselleri nasıl kullanmayı planladığınıza bağlı olarak bazı ayarları değiştirmeniz gerekebilir - örneğin boyutlarını değiştirmek veya etraflarına kenarlık/boşluk eklemek gibi.

Yorumlar (0)

Kullanıcı tartışmaları, istisnai durumlar ve ek ipuçları için.
Yorum bırakın
Yorumunuz, gönderildikten sonra herkese açık olarak görüntülenecektir.
Henüz yorum yok. İlk yorum yapan siz olun!
Bize Bildirin!
Bu araçla ilgili bir sorunu bildirin

Karşılaştığınız sorunu açıklayın; böylece sorunu inceleyip aracı iyileştirebiliriz.

En çok ne yardımcı olur?
Giriş bilgisini, beklenen sonucu, gerçek sonucu, tarayıcıyı/cihazı ve gerekirse bir ekran görüntüsünü ekleyin.
Ekran görüntüsü düğmesi, tarayıcıdaki sayfayı yakalar ve oluşturulan görüntüyü bu forma ekler.
Tam sayfa ekran görüntüsü
newisty ile tarayıcınızda yakalandı.
Henüz ekran görüntüsü alınmadı.
Araç Rapor