Cara mengubah gambar menjadi data URI base64, dan kapan sebaiknya tidak

Mengubah file menjadi data URI selalu berhasil. Justru itu masalahnya: tidak ada apa pun dalam proses konversi yang memperingatkan bahwa menempelkan foto 200 KB ke stylesheet baru saja membuat setiap halaman yang memuatnya menjadi lebih lambat. Proses encoding hanya butuh beberapa detik. Keputusan apakah perlu memakainya, itulah bagian yang patut dipikirkan dengan benar.

Dua istilah terlebih dulu

Data URI adalah URI yang membawa byte sebuah file di dalam dirinya sendiri, alih-alih menunjuk ke file di tempat lain. Formatnya ditulis sebagai data:, MIME type file, ;base64,, lalu byte yang sudah di-encode, jadi PNG diawali dengan data:image/png;base64,.

Base64 adalah encoding yang membuat data biner aman dimasukkan ke dalam teks. Encoding ini mengambil file tiga byte sekaligus, membagi 24 bit itu menjadi empat kelompok berisi 6 bit, dan menulis setiap kelompok sebagai satu karakter dari alfabet berisi 64 karakter (2⁶ = 64). Tiga byte masuk, empat karakter keluar, apa pun isinya.

Mengonversi file

1. Buka data URI converter lalu tekan “Choose a file”, atau jatuhkan file di mana saja pada halaman. Alat ini menerima apa saja: gambar, SVG, font. Markup SVG yang ditempel di luar kotak teks juga bisa, dan “Try a sample” memuat sebuah ikon kecil.
2. Baca tiga angka yang muncul: “File” (file asli), “Inlined” (data URI lengkap, termasuk prefiks), dan “Overhead” (selisihnya dalam persentase).
3. Baca baris di bawahnya. Isinya “Reasonable to inline.” (wajar untuk di-inline) atau “Use a normal file reference instead.” (gunakan referensi file biasa), diikuti alasannya.
4. Salin salah satu dari tiga kotak dengan tautan copy-nya: “Data URI” (string mentah), “CSS” (deklarasi background-image dengan URI di dalam tanda kutip, karena base64 bisa berisi garis miring), atau “HTML” (tag <img> untuk gambar, tautan unduhan untuk jenis file lain). Anda juga bisa memilih snippet di “Copy as” lalu menyalinnya dengan tombol besar di bawahnya, atau mengunduhnya sebagai file .txt dari bilah di bagian bawah.

Snippet HTML menulis alt="", yang memberi tahu pembaca layar bahwa gambar itu dekoratif. Jika gambar membawa makna, ganti dengan deskripsi sebelum Anda menempelkannya.

Ke mana sepertiga tambahan itu pergi

Rasio 4:3 itu tetap, jadi base64 untuk file apa pun bisa diprediksi: empat karakter untuk setiap tiga byte, dibulatkan ke atas menjadi satu kelompok empat yang utuh. Angka “Inlined” di alat ini juga menghitung prefiksnya, itulah sebabnya overhead-nya terbaca sekitar satu poin di atas 33% pada file kecil: data:image/png;base64, saja sudah 22 karakter.

File	Byte	Base64 saja	Data URI lengkap	Overhead yang ditampilkan	Kata alat ini
Ikon PNG	3 072	4 096	4 118	+34%	Reasonable to inline
Ikon SVG	3 072	4 096	4 122	+34%	Reasonable to inline
PNG, satu byte melewati batas	4 097	5 464	5 486	+34%	Use a normal file reference instead
Foto JPEG	204 800	273 068	273 091	+33%	Use a normal file reference instead, dengan tiga alasan

Setiap baris adalah aritmetika: 4 × ⌈3 072 ÷ 3⌉ = 4,096, dan 4 096 + 22 = 4 118. Prefiks SVG, data:image/svg+xml;base64,, panjangnya 26 karakter; prefiks JPEG 23.

Kompresi server memulihkan sebagian dari sepertiga itu saat transfer, tetapi tidak sebanyak yang mungkin Anda harapkan, karena base64 mengacak pola byte berulang yang menjadi andalan kompresor.

Batas di 4 096 byte, dan harga melewatinya

Putusannya ditentukan oleh ukuran file asli. Hingga 4 096 byte, alat ini menyetujui inline: satu request lebih sedikit, tidak ada yang perlu dikelola di cache. Pada 4 097 byte, putusannya beralih ke “Use a normal file reference instead”, dan alasannya makin banyak seiring bertambahnya ukuran file.

• Caching, untuk setiap file di atas batas. File eksternal diambil sekali lalu dipakai ulang di setiap halaman. File yang di-inline ikut di dalam induknya, jadi diunduh ulang bersama setiap dokumen atau stylesheet yang menyematkannya.
• Gambar responsif, untuk gambar di atas batas. Data URI tidak punya URL yang bisa dinegosiasikan browser, jadi Anda kehilangan srcset, lazy loading, dan optimasi gambar apa pun yang akan diterapkan CDN. Font di atas batas mendapat peringatan caching, tetapi tidak yang ini.
• Render-blocking, di atas 32 768 byte (8 × 4 096). Di dalam stylesheet, base64 harus tiba sebelum halaman bisa dirender, dan satu perubahan CSS yang tidak berkaitan akan membatalkan salinan cache dari setiap aset yang disematkan bersamanya.

Foto 200 KB di tabel terkena ketiganya. Kalimat dari alat ini untuk foto itu berbunyi “At 200 KB this becomes roughly 267 KB inlined” (pada 200 KB, ini menjadi sekitar 267 KB setelah di-inline), dan 267 KB itu ikut terbawa bersama stylesheet di setiap kunjungan saat stylesheet belum ada di cache.

Kapan data URI adalah pilihan yang tepat

Kecil, dipakai di satu tempat, dan mandiri: satu ikon di dalam blok style inline adalah contoh klasiknya. Buat file sekecil mungkin sebelum Anda meng-encode-nya, karena setiap 3 byte yang dihemat menghapus 4 karakter dari hasilnya. SVG bisa diproses dulu lewat SVG optimiser, dan PNG lewat image compressor, yang menulis ulang file tanpa mengubah satu piksel pun.

	Data URI converter	Perintah base64	Encoder online biasa
File keluar dari perangkat Anda	Tidak	Tidak	Tergantung layanannya
Prefiks data: dan MIME type	Ditulis otomatis	Anda tambahkan sendiri	Bervariasi
Ukuran ditampilkan beserta prefiks	Ya, sebagai “Inlined”	Tidak	Bervariasi
Saran apakah perlu di-inline	Ya, dengan alasan	Tidak	Jarang

Cara lain untuk melakukannya

Di command line, alat base64 melakukan encoding-nya:

base64 -i icon.png        # macOS
base64 -w0 icon.png       # GNU/Linux

Output-nya adalah string base64 polos. Untuk memakainya sebagai data URI, tambahkan data:image/png;base64, di depannya, dengan MIME type yang sesuai dengan file; jika type-nya salah, file mungkin tidak tampil: browser menebak beberapa jenis gambar dari byte-nya, tetapi SVG harus diberi label image/svg+xml.

Memastikan tidak ada yang diunggah

File dibaca ke memori di browser Anda dan di-encode di sana, yang juga berarti tidak ada batas ukuran selain kapasitas memori Anda sendiri. Untuk memastikannya, buka developer tools browser Anda di tab Network sebelum menyeret file: proses encoding tidak menambahkan request apa pun.

Lakukan konversinya, sekaligus ambil keputusannya, di data URI converter. Jika putusannya menyarankan untuk tidak meng-inline, mengecilkan file dengan image compressor lalu menyajikannya seperti biasa biasanya merupakan pilihan yang lebih baik.