Base64 Görsel Kodlayıcı

Görselleri HTML ve CSS için Base64 data URI'ye kodlayın

Görseli buraya bırakın veya yüklemek için tıklayın

PNG, JPG, SVG, WebP, GIF, AVIF desteklenir

Base64 Görsel Kodlama Nedir?

Base64 görsel kodlama, ikili görsel verilerini ASCII dizesine dönüştürür; bu dize dış dosyaya referans vermeden doğrudan HTML, CSS veya JSON içine gömülebilir. Sonuç bir data URI'dir — data:image/png;base64, ile başlayan, ardından görselin Base64 ile kodlanmış baytlarını içeren bağımsız bir dizedir. Tarayıcılar data URI'leri tıpkı dış görsel URL'leri gibi işler: Base64 yükünü çözer ve görseli satır içi olarak gösterir.

Bu teknik RFC 2397 (data URI şeması) ve RFC 4648 (Base64 kodlama) tarafından tanımlanmaktadır. Bir görsel Base64 ile kodlandığında her 3 bayt ikili piksel verisi 4 ASCII karakterine dönüşür ve yük boyutu yaklaşık %33 artar. Bu ek yüke karşın satır içi görseller varlık başına bir HTTP isteğini ortadan kaldırır — görseller küçük olduğunda (simgeler, logolar, 1x1 izleme pikselleri) bu optimizasyon anlamlıdır; ayrı bir isteğin gidiş-dönüş gecikmesi ekstra baytların maliyetini aşabilir.

Data URI'ler tüm modern tarayıcılarda, e-posta istemcilerinde (bazı kısıtlamalarla) ve standart URI söz dizimini kabul eden her bağlamda desteklenir. Tek sayfalık uygulamalarda, HTML e-posta şablonlarında, SVG sprite'larında ve CSS background-image bildirimlerinde geniş çapta kullanılır; burada toplam ağ isteği sayısının azaltılması algılanan yükleme süresini iyileştirir.

Bu Base64 Görsel Kodlayıcıyı Neden Kullanmalısınız?

Bu araç, herhangi bir görseli doğrudan tarayıcınızda kullanıma hazır data URI'ye dönüştürür — yükleme, sunucu veya hesap gerekmez.

Anında Dönüştürme
Bir görsel sürükleyip bırakın veya dosya seçin; tam data URI hemen görünür. Sunucu işlemi beklenmez — FileReader API her şeyi yerel olarak halleder.
🔒
Gizlilik Öncelikli İşlem
Görselleriniz hiçbir zaman cihazınızı terk etmez. Kodlama, tarayıcıda yerel FileReader.readAsDataURL() yöntemi kullanılarak tamamen çalışır. Herhangi bir sunucuya veri iletilmez.
🌐
Tüm Büyük Biçimler Desteklenir
PNG, JPEG, SVG, WebP, GIF, ICO, BMP ve tarayıcınızın desteklediği diğer tüm görsel biçimlerini kabul eder. MIME türü dosyadan otomatik olarak algılanır.
📦
Kopyalamaya Hazır Çıktı
Çıktı eksiksiz bir data URI dizesidir — HTML img src, CSS url() bildirimi veya JSON yüküne herhangi bir manuel biçimlendirme yapmadan doğrudan yapıştırın.

Base64 Görsel Kodlama Kullanım Senaryoları

Ön Uç Geliştirme
HTTP isteklerini ortadan kaldırmak için küçük simgeleri ve UI varlıklarını doğrudan HTML veya CSS'ye gömin. Bu, kritik ekranın üst kısmındaki görseller için şelale gecikmesini azaltır ve Largest Contentful Paint (LCP) puanlarını iyileştirir.
HTML E-posta Şablonları
Pek çok e-posta istemcisi dış görselleri varsayılan olarak engeller. Satır içi Base64 görseller, alıcının "görselleri yükle" seçeneğine tıklaması gerekmeden hemen görüntülenir; bu açılma oranlarını ve görsel tutarlılığı artırır.
Tek Sayfalık Uygulamalar
Toplam ağ isteği sayısını azaltmak için küçük varlıkları JavaScript veya CSS'nizdeki data URI'leri olarak paketleyin. Webpack ve Vite, yapılandırılabilir boyut eşiğinin altındaki varlıklar için otomatik Base64 satır içi desteği sunar.
API ve JSON Yükleri
Kullanıcı avatarlarını, imzaları veya küçük resimleri Base64 dizeleri olarak kodlayarak JSON API yanıtlarına doğrudan ekleyin. Bu, küçük görseller için ayrı bir dosya barındırma uç noktası ihtiyacını ortadan kaldırır.
Belgeler ve Markdown
Diyagramları veya ekran görüntülerini Markdown dosyalarına veya README belgelerine data URI olarak gömin. Görseller belgeyle birlikte taşınır ve dış barındırma olmadan doğru görüntülenir.
Test ve Prototipleme
Base64 data URI'lerini test düzeneklerinde, Storybook hikayelerinde veya prototip HTML dosyalarında yer tutucu görsel olarak kullanın. Erken geliştirmede statik dosya sunucusu kurmak veya görsel varlıklarını yönetmek gerekmez.

Data URI Yapısı

Bir data URI, görsel biçimini ve ikili içeriği tek bir dizede kodlar. Yapısını anlamak, data URI'leri programatik olarak oluştururken veya ayrıştırırken işe yarar:

BileşenAçıklama
data:URI scheme identifier
image/pngMIME type of the image
;base64,Encoding declaration
iVBORw0KGgo...Base64-encoded binary data

Base64 Kodlama İçin Görsel Biçim Karşılaştırması

Görsel biçimi seçimi Base64 çıktı boyutunu, tarayıcı desteğini ve görüntüleme özelliklerini etkiler. İçerik türünüze en uygun biçimi kullanın:

BiçimMIME TürüŞeffaflıkEn İyi Kullanım
PNGimage/pngYesScreenshots, icons, UI elements
JPEGimage/jpegNoPhotos, gradients, large images
SVGimage/svg+xmlYesLogos, icons, scalable graphics
WebPimage/webpYesModern web images, smaller files
GIFimage/gifYes (1-bit)Simple animations, small icons
ICOimage/x-iconYesFavicons

Kod Örnekleri

Popüler dil ve ortamlarda görselleri Base64 data URI'ye dönüştürme:

JavaScript (browser)
// Convert a File object to a Base64 data URI
function fileToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(file)
    // reader.result → "data:image/png;base64,iVBORw0KGgo..."
  })
}

// Convert a canvas element to a data URI
const dataUri = canvas.toDataURL('image/png')
// → "data:image/png;base64,iVBORw0KGgo..."

// Convert with quality parameter (JPEG/WebP only)
const jpegUri = canvas.toDataURL('image/jpeg', 0.8)
// → "data:image/jpeg;base64,/9j/4AAQ..."
Python
import base64

# Read an image file and encode it to a data URI
with open('logo.png', 'rb') as f:
    encoded = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:image/png;base64,{encoded}'
# → "data:image/png;base64,iVBORw0KGgo..."

# Detect MIME type automatically
import mimetypes
mime, _ = mimetypes.guess_type('photo.jpg')
# mime → "image/jpeg"

with open('photo.jpg', 'rb') as f:
    b64 = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:{mime};base64,{b64}'
Node.js
import { readFileSync } from 'fs'
import { lookup } from 'mime-types'

// Read file and encode to data URI
const buffer = readFileSync('icon.png')
const base64 = buffer.toString('base64')
const mime = lookup('icon.png') // → "image/png"

const dataUri = `data:${mime};base64,${base64}`
// → "data:image/png;base64,iVBORw0KGgo..."

// From a Buffer received via HTTP/API
function bufferToDataUri(buf, mimeType) {
  return `data:${mimeType};base64,${buf.toString('base64')}`
}
CLI (bash)
# Encode an image to Base64 (macOS)
base64 -i logo.png | tr -d '\n'

# Encode an image to a full data URI (Linux)
echo -n "data:image/png;base64,$(base64 -w 0 logo.png)"

# Encode and copy to clipboard (macOS)
echo -n "data:image/png;base64,$(base64 -i logo.png | tr -d '\n')" | pbcopy

# Detect MIME type and encode (Linux, requires file command)
MIME=$(file -b --mime-type image.webp)
echo -n "data:$MIME;base64,$(base64 -w 0 image.webp)"

Sık Sorulan Sorular

Base64 kodlama için maksimum görsel boyutu nedir?
Base64 spesifikasyonunun kendisinde sabit bir sınır yoktur. Tarayıcı data URI desteği farklılık gösterir: çoğu modern tarayıcı birkaç megabayta kadar data URI'leri işler. Ancak Base64 kodlama boyutu %33 artırdığından 1 MB'lık bir görsel yaklaşık 1,33 MB metin olur. 10-20 KB'den büyük görseller için bunları ayrı dosyalar olarak uygun önbelleklemeyle sunmak daha verimlidir.
Base64 kodlama görsel kalitesini düşürür mü?
Hayır. Base64 kayıpsız bir kodlamadır — ikili veriyi içeriği değiştirmeden metne dönüştürür. Çözülen veri orijinal dosyayla bayt bayt aynıdır. Kalite kaybı, Base64 kodlamadan değil görsel biçiminin kendisinden kaynaklanır (örneğin JPEG sıkıştırması).
Base64 kodlanmış çıktı neden orijinal görselden daha büyük?
Base64, 3 bayt ikili veriyi 4 ASCII karakterle temsil eder ve %33 boyut artışına yol açar. Bir data URI ayrıca yaklaşık 25-30 karakterden oluşan bir önek ekler (ör. data:image/png;base64,). Küçük görseller (2-5 KB altı) için bu ek yük, HTTP isteğinin ortadan kalkmasıyla telafi edilir. Büyük görseller için boyut cezası dış dosyaları daha verimli kılar.
Base64 görselleri CSS background-image'de kullanabilir miyim?
Evet. Data URI'yi url() fonksiyonunun değeri olarak kullanın: background-image: url('data:image/png;base64,...'). Bu tüm modern tarayıcılarda çalışır. HTTP isteğinden kaçınmanın hafifçe daha büyük CSS dosyası maliyetini dengelediği küçük, sık kullanılan arka plan desenleri veya simgeler için en etkili yöntemdir.
Base64 görsel kodlama hassas görseller için güvenli midir?
Base64 bir kodlama yöntemidir, şifreleme değil. Data URI'yi gören herkes onu orijinal görsele geri çözebilir. Gizli görselleri korumak için Base64'e güvenmeyin. Bu araç görselleri tamamen tarayıcınızda işler — herhangi bir sunucuya veri gönderilmez — ancak oluşan data URI, HTML veya CSS kaynağınıza erişimi olan herkes tarafından okunabilen düz metindir.
Base64 data URI'yi nasıl tekrar görsel dosyasına dönüştürürüm?
JavaScript'te data URI ile fetch() kullanın ve yanıt üzerinde blob() çağırın, ardından bir indirme bağlantısı oluşturun. Python'da dizeyi virgülden ayırın, Base64 bölümünü base64.b64decode() ile çözün ve baytları bir dosyaya yazın. Bu sitedeki Base64 Görsel Çözücüsü aracını da kullanabilirsiniz.
Web sitemizdeki tüm görselleri Base64 ile kodlamalı mıyım?
Hayır. Base64 satır içi yerleştirme, HTTP isteği yükünün %33 boyut cezasını aştığı küçük görseller (simgeler, logolar, 1x1 pikseller) için faydalıdır. Büyük görseller için uygun önbellek başlıklarıyla ayrı dosyalar kullanın — tarayıcı bunları bağımsız olarak önbelleğe alabilir ve paralel olarak yükleyebilir. Yaygın eşik 2-8 KB'dir: bu boyutun altındaki görseller satır içi yerleştirmeden yararlanırken daha büyük görseller dış dosyalar olarak sunulmalıdır.