Kullanım senaryolarıÖrnekler

Base64 görseller nasıl kullanılır

En yaygın senaryolar ve kopyalamaya hazır örnekler burada. Hızlı test için örnek değeri dönüştürdüğünüz sonuçla değiştirin.

İki format alırsınız: Data URL (MIME önekiyle) ve ham Base64 (öneksiz)

Data URL (önerilir)

data:image/png;base64,QUJDZA==

Ham Base64

QUJDZA==

Sayfada doğrudan gösterme (HTML)

Hızlı önizleme, statik sayfaya gömme veya ek varlık barındırmak istemediğiniz durumlar için uygundur

<img
  src="data:image/png;base64,QUJDZA=="
  alt="Base64 Image"
  width="240"
/>

Arka plan görseli olarak kullanma (CSS)

İkonlar, yer tutucular ve küçük dekoratif görseller için idealdir; bir varlık isteğini azaltır

.banner {
  background-image: url("data:image/png;base64,QUJDZA==");
  background-size: cover;
  background-position: center;
}

API / JSON aktarımı

Hata ayıklama, prototipler ve geçici aktarım için kullanışlıdır. Büyük görselleri üretimde uzun süre satır içi kullanmanız önerilmez.

{
  "filename": "image.png",
  "mime": "image/png",
  "dataUrl": "data:image/png;base64,QUJDZA=="
}

Backend yalnızca ham Base64’e ihtiyaç duyuyorsa QUJDZA== gönderin ve MIME/type bilgisini ayrıca iletin.

Mobil / çapraz platform kullanım (örnekler)

Base64 destekleyen her çalışma zamanında çalışır. Hızlı değiştirme ve doğrulama için yaygın parçalar sağlanır.

import 'dart:convert';
import 'package:flutter/widgets.dart';

final bytes = base64Decode("QUJDZA==");
final image = Image.memory(bytes);

Base64’ten ne zaman kaçınmalısınız?

Büyük görselleri uzun süre satır içi kullanmak boyutu ciddi artırır ve yüklemeyi kötüleştirir
CDN önbelleği ve uzun süreli yeniden kullanım gerektiren statik varlıklar
İlk yükleme performansı ve önbellek stratejisinin kritik olduğu üretim görselleri

Base64, eksiksiz bir statik varlık hattının yerine geçmek için değil, veri akışı ve hızlı teslim için en uygundur