Kod Araçları, 7 araç

Çeviriciler, 4 araç

Metin Araçları, 5 araç

Renk Araçları, 2 araç

Üreteçler, 3 araç

Resim Araçları, 4 araç

PDF Araçları, 6 araç

Hesaplama, 4 araç

Açık araçlar · 0

Hakkında

Resmi Base64’e Çevirme

Bir resmi bırakın; türüyle birlikte data: URI olarak sarılmış tek satırlık bir Base64 olarak geri gelir: data:image/png;base64, ve ardından resmin kendisi. Bunu ya da bir stil dosyası veya <img> etiketi için hazır satırı kopyalayın; resim, barındırılacak ayrı bir dosya olmadan kodun içinde taşınır.

Neler yapar

  • Bir data: URI’deki tür dosyadan gelir; dosya söylemiyorsa ilk baytlarından okunur.
  • Bir data: URI, diğer ayarlar ne derse desin, tarayıcıların beklediği gibi standart alfabeyle, dolgulu ve tek satır yazılır.
  • CSS olarak kopyala bir background-image satırı, <img> olarak kopyala ise resmi içinde taşıyan bir etiket verir.
  • Base64 resimden üçte bir büyüktür: 12 KB’lık bir simge yaklaşık 16 KB metin olur.
  • Yazı tipleri de aynı şekilde çalışır: bir WOFF2 dosyası, @font-face kuralı için data:font/woff2 URI’si olur.
  • Resim sonucun yanında gösterilir, doğru resim olduğunu görürsünüz.

Nasıl kullanılır

  1. Resmi pencereye bırakın.
  2. HTML ya da CSS için Data URI işaretli kalsın; düz Base64 için işareti kaldırın.
  3. Gereken satırı kopyalayın: URI, CSS ya da <img>.

Neleri yapmaz

  • E-postadaki resimler: Gmail ve Outlook data: URI resimlerini göstermez, bu yüzden bir e-postanın resimleri ek ya da bağlantı olarak gitmeli.
  • SVG için daha kısa URI’ler: bir SVG, data: URI’ye URL kodlu metin olarak, çoğu zaman Base64’ten küçük girebilir, ama bu araç her dosya için Base64 yazar.

Sorular

Bir resmi ne zaman data URI’ye koymalıyım?

Bir kez kullanılan küçük şeyler için, örneğin bir simge ya da küçük bir arka plan: bir isteği kurtarmak eklediği üçte birden değerliyse. Büyük bir resim, tarayıcının önbelleğe alıp sayfayla birlikte yükleyebileceği ayrı bir dosyada durmalı.

Data URI her tarayıcıda çalışır mı?

Evet, güncel her tarayıcıda; img etiketlerinde, CSS arka planlarında ve yazı tiplerinde. Katı bir İçerik Güvenliği Politikası (CSP) olan bir site resimler için data:’ya izin vermeli, yoksa resim engellenir.

Base64’ü nasıl tekrar resme çeviririm?

Base64 kutusuna yapıştırın: çözücü data: kısmını okur, PNG’yi ya da JPEG’i ilk baytlarından tanır ve dosyayı indirmeye sunar.

Buradaki her şey tarayıcınızda çalışır. Yazdığınız, yapıştırdığınız ya da açtığınız hiçbir şey yüklenmez; hesap da sıra da yoktur. Bu nasıl oluyor.

Sık birlikte kullanılanlar

Çeviriciler klasöründe diğerleri

  • Birim Çevirici: Uzunluk, ağırlık, sıcaklık, hacim, alan, hız, veri boyutu ve dokuz büyüklük daha, iki yönde ve formülüyle.
  • CSV Görüntüleyici ve Düzenleyici: Bir CSV, Excel ya da JSON dosyasını tablo olarak açın, düzenleyin (boşluklar, tekrarlar, bozuk harfler, tarihler ve sayılar) ve CSV, .xlsx ya da JSON olarak kaydedin.
  • JSON, YAML, XML ve TOML: JSON, YAML, XML ve TOML arasında çevirin; yorumlar, anahtar sırası ve sayılar yazıldığı gibi kalır, her biçimin neyi taşıyamadığı söylenir.

Bütün araçlarutilbrew hakkındaGizlilik