RevealTheme logo

Görüntüden Base64'e Dönüştürücü

Herhangi bir görüntü dosyasını bir Base64 veri URL'sine dönüştürün. Sonucu doğrudan CSS, HTML veya JSON içine yapıştırın.

Bu araç nasıl kullanılır

  1. 1

    Click the file picker and choose an image (PNG, JPEG, GIF, WebP, SVG, or any format your browser accepts).

  2. 2

    Wait a moment while the browser reads the file and renders a preview thumbnail.

  3. 3

    Review the generated data URL in the text box below the preview.

  4. 4

    Click Copy to put the full data URL on your clipboard, then paste it into your stylesheet or markup.

Görüntüden Base64'e Dönüştürücü Nedir?

Bir Base64 veri URL'si, bir görüntünün ikili içeriğini doğrudan HTML veya CSS içine gömer. Bu, küçük simgeler ve grafikler için HTTP isteğini ortadan kaldırır ve bu da algılanan yükleme süresini iyileştirebilir. Bunun bir bedeli vardır: Base64 kodlaması dosya boyutunu yaklaşık %33 oranında şişirir, bu nedenle 5 KB'den küçük simgeler için idealdir.

Yaygın kullanım örnekleri

  • Inline a small icon directly in a CSS background-image: url(...) rule to save an HTTP request.

  • Embed a logo in a single self-contained HTML email or offline page with no external files.

  • Paste image data into a JSON payload or API request that only accepts text fields.

  • Store a tiny placeholder image as a string in a config file or environment variable.

  • Drop an avatar or sprite straight into a React or Vue component without a separate asset import.

  • Generate a quick data URL to test how a graphic renders in a sandbox or CodePen snippet.

Sıkça sorulan sorular

Base64 görüntülerini ne zaman kullanmalıyım?
Bir HTTP isteğini ortadan kaldırmak istediğiniz küçük simgeler, logolar veya sprite'lar için. Büyük görüntülerde bundan kaçının: kodlamanın ek yükü her türlü faydayı ortadan kaldırır.
Bunu CSS içinde kullanabilir miyim?
Evet: veri URL'sini doğrudan bir background-image: url(...) bildirimine yapıştırın.

İlgili araçlar