Kodlama
Data URI / Base64 Görsel
Bir görseli CSS/HTML içine eklemek için Data URI (data:image/…;base64,…) olarak kodlama ve bir Data URI veya ham Base64'ü tekrar dosyaya çözme — hepsi doğrudan tarayıcıda.
Görsel önizlemesi burada görünecek.
A Data URI embeds a file's contents (usually an image) directly into HTML or CSS as a Base64 string, instead of linking to a separate file. This removes an extra network request at the cost of a larger document.
How to use it
- Encode: upload an image and the tool generates a ready data:image/…;base64,… string to paste into src, href, or CSS.
- Decode: paste a Data URI or raw Base64 to get the original file back for download.
- The copied string can be pasted straight into an HTML attribute or a CSS property with no extra processing.
Common uses
- Embedding small icons or sprites in CSS to avoid an extra HTTP request.
- Building email templates, where external images can get blocked by the email client.
- Quickly previewing an image as a self-contained string without uploading the file anywhere.
Things to keep in mind
Base64 encoding grows the data by about 33% — for large images, a Data URI is usually a worse choice than a separate file with browser caching.
A Data URI isn't cached separately from the document it's embedded in — it gets re-downloaded along with the page every time.
Bu araç hakkında makale: Data URI: görselleri doğrudan koda ne zaman gömmeli
Sıkça sorulan sorular
Normal bir görsel dosyası yerine ne zaman Data URI kullanmalıyım?
Data URI'ler, ekstra bir HTTP isteğinden kaçınmak istediğiniz simge veya logo gibi küçük, sık kullanılan görseller için kullanışlıdır; örneğin bir görseli doğrudan CSS veya satır içi HTML'ye gömerken.
Görseller için Data URI kullanmanın dezavantajları var mı?
Evet. Base64 nedeniyle dosya boyutunu yaklaşık %33 artırırlar, tarayıcı tarafından gerçek bir görsel URL'si gibi ayrıca önbelleğe alınmazlar ve birçok tarayıcı ile e-posta istemcisi Data URI boyutuna pratik sınırlar koyar.
Bu araç görselimi bir yere yüklüyor mu?
Hayır. Görsel tamamen tarayıcınızda okunup kodlanır — asla bir sunucuya gönderilmez.
Data URI'yi SVG için Base64 olmadan kullanabilir miyim?
Evet. SVG bir metindir (XML), bu yüzden Base64 yerine özel karakterlerin percent-encoding'i yeterlidir: data:image/svg+xml,%3Csvg...%3E. Bu yaklaşım daha kompakttır ve doğrudan CSS dosyasının içinde düzenlenebilir kalır.
Data URI'yi href veya background-image özniteliğine ekleyebilir miyim?
Evet, Data URI, bir kaynağa referans beklenen her yerde çalışır — src, href, CSS'te background-image ve hatta @import içinde. Söz dizimi ve boyut sınırları img etiketiyle aynıdır.