Tada File

Gambar ke Data URI

Ubah gambar menjadi data URI lengkap, siap ditempel ke atribut src HTML atau nilai url() CSS.

Gambar ke Data URI mengubah file gambar menjadi data URI: satu baris teks yang berisi jenis file sekaligus gambar yang dienkode Base64. Anda bisa menempelkannya langsung ke atribut src pada img atau nilai url() di CSS, dan gambar tampil tanpa file terpisah. Jenis MIME di awalan diambil dari file Anda, dan byte gambar tidak diubah.

Cara memakai Gambar ke Data URI

  1. 1

    Buka gambar

    Letakkan, pilih, atau tempel file gambar apa pun, seperti ikon, logo, atau grafik kecil.

  2. 2

    Dapatkan data URI

    Data URI lengkap, yang diawali data:image/, muncul beserta panjang dan perkiraan ukurannya.

  3. 3

    Salin

    Klik Salin data URI, atau gunakan Salin HTML atau Salin CSS untuk potongan kode siap pakai.

  4. 4

    Tempel ke halaman Anda

    Pakai di mana saja URL gambar biasa bisa dipakai, seperti tag img atau background CSS.

Fungsinya

Jenis MIME yang benar
Awalan sesuai dengan file Anda, misalnya image/png, image/jpeg, atau image/svg+xml.
Byte asli
File dienkode apa adanya, jadi kualitas dan ukuran tidak berubah karena kompresi ulang.
Potongan kode siap salin
Dapatkan tag img lengkap atau aturan background-image yang sudah berisi data URI.
Privat
Data URI dibuat di browser Anda, jadi gambar tidak diunggah.

Pertanyaan

Apa itu data URI?

Data URI adalah tautan yang berisi file itu sendiri, bukan menunjuk ke file. Untuk gambar, data URI diawali data:image/png;base64, atau awalan serupa, dan browser menampilkannya seperti URL gambar biasa.

Bagaimana cara memakai data URI di CSS?

Klik Salin CSS untuk mendapatkan aturan background-image dengan URI lengkap di dalam url(), lalu tempelkan ke stylesheet Anda.

Kapan sebaiknya saya tidak memakai data URI?

Hindari untuk gambar besar dan gambar yang dipakai di banyak halaman. Teks hasil enkode sekitar sepertiga lebih besar dari filenya, dan browser tidak bisa menyimpannya di cache secara terpisah.

Apakah gambar data URI bisa tampil di email?

Dukungannya berbeda-beda. Banyak program email, termasuk beberapa layanan webmail, tidak menampilkan gambar data URI, jadi uji email Anda atau pakai gambar yang di-hosting online.

Jenis gambar apa saja yang didukung?

Gambar apa pun yang bisa dibuka browser Anda, seperti JPG, PNG, GIF, WebP, AVIF, dan SVG. Foto HEIC dari iPhone dikonversi ke PNG dulu, jadi data URI-nya memakai image/png.