Konverter Data URI CSS
Ubah gambar atau file kecil menjadi data URI CSS — dapatkan aturan background-image siap tempel, nilai url(), tag HTML <img>, dan data URI mentah. Berjalan di browser Anda.
Input
File dibaca secara lokal — tidak akan pernah diunggah.
Output
Cara lain menggunakan alat ini
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-data-uri-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Konverter Data URI CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
Juga tersedia melalui
Panduan
Ubah gambar kecil menjadi CSS yang bisa langsung ditempel ke stylesheet. Unggah file dan dapatkan empat keluaran siap pakai: aturan background-image lengkap, nilai url("data:…") saja, tag HTML <img>, dan data URI mentah.
Cara menggunakan
- Letakkan gambar (PNG, JPEG, GIF, WebP, SVG, atau aset kecil lainnya).
- Atur selector CSS yang akan dituju aturan tersebut dan, jika perlu, teks
altuntuk tag<img>. - Salin cuplikan yang Anda butuhkan.
Kapan menanamkan gambar secara inline
Penanaman inline menghemat satu permintaan HTTP, yang membantu untuk ikon kecil, pola, dan placeholder. Base64 menambah ukuran sekitar 33% dan aset tidak lagi bisa di-cache secara terpisah, jadi simpan untuk file berukuran beberapa kilobyte — gunakan file tautan biasa untuk yang lebih besar.
Privasi
File dibaca oleh browser Anda dan dikonversi secara lokal; file tidak pernah diunggah.
Alat terkait
Untuk string mentah saja, gunakan Generator Data URI atau File ke Base64. Untuk mengubah Base64 kembali menjadi file, gunakan Base64 ke File.