Apa efek pengkodean gambar di base64?

97

Jika saya mengonversi gambar (jpg atau png) ke base64, apakah akan lebih besar, atau ukurannya sama? Seberapa besar itu?

Apakah disarankan untuk menggunakan gambar yang dikodekan base64 di situs web saya?

— Danny Fox
sumber

1

Satu-satunya saat Anda ingin melakukan hal seperti itu adalah jika Anda dibatasi pada sumber teks biasa, dan tidak dapat menggunakan format gambar mentah karena alasan tertentu.

— Wug

Ada jawaban yang bagus di sini: stackoverflow.com/questions/1533113/…

— Steed

base64 membuat tautan dalam menjadi tidak mungkin. Ini bisa menjadi nilai tambah.

— damoeb

@Wug - Ketahuilah bahwa ini adalah balasan yang jauh dari terlambat dan bahwa banyak hal telah berubah tetapi pasti adalah saat-saat di mana Anda dapat mencapai peningkatan kinerja dengan mengirimkan bas64. Mengirim pesan melalui websockets dengan gambar berenkode base64 (yang kecil) akan lebih berkinerja daripada meminta setiap gambar sendiri.

— Philip

Itu pertanyaan yang bagus. Saya mencari jawaban yang bagus untuk "simpan gambar biner atau base64 yang dikodekan?" dan saya menemukan beberapa jawaban bagus seperti ini

— moreirapontocom

132

Ini akan menjadi sekitar 37% lebih besar:

Secara kasar, ukuran akhir data biner berenkode Base64 sama dengan 1,37 kali ukuran data asli

Sumber: http://en.wikipedia.org/wiki/Base64

— Blender
sumber

28

Tidak tidak 137% lebih besar, 137% dari ukuran aslinya :-) 37% lebih besar (menurut sumber Anda).

— Eric J.

4

Saya akan mengatakan itu kurang lebih 4/3 dari ukuran aslinya.

— kiwixz

Apakah ada batasan ukuran gambar untuk mengonversi gambar ke base64?

— 151291

2

@ Blender Tetapi dalam kasus saya ketika saya mengubah bitmap 70kb menjadi string menjadi 500kb. Ini bukan 37%. Saya telah mengompresi gambar 5mb menjadi 70kb dan kemudian mengubah gambar yang dikompresi itu menjadi string yang menjadi 500kb.

— KJEjava48

@ KJEjava48: Bagaimana Anda mengubahnya menjadi string?

— Blender

16

Berikut adalah ikhtisar yang sangat membantu tentang kapan harus menyandikan base64 dan kapan tidak oleh David Calhoun.

Jawaban dasar = file yang dikodekan base64 dengan gzip akan secara kasar sebanding dalam ukuran file dengan biner standar (jpg / png). File biner Gzip akan memiliki ukuran file yang lebih kecil.

Takeaway = Ada beberapa keuntungan untuk menyandikan dan meng-gzip ikon UI Anda, dll, tetapi tidak bijaksana untuk melakukan ini untuk gambar yang lebih besar.

— buldog
sumber

14

Ini akan lebih besar di base64.

Base64 menggunakan 6 bit per byte untuk menyandikan data, sedangkan biner menggunakan 8 bit per byte. Juga, ada sedikit bantalan tambahan dengan Base64. Tidak semua bit digunakan dengan Base64 karena itu dikembangkan pertama kali untuk menyandikan data biner pada sistem yang hanya dapat memproses data non-biner dengan benar.

Itu berarti gambar yang dienkode akan menjadi sekitar 25% lebih besar, ditambah overhead konstan untuk padding.

— Eric J.
sumber

7

Mengenkode gambar ke base64 akan membuatnya sekitar 30% lebih besar.

Lihat detailnya di artikel wikipedia tentang skema URI Data , yang menyatakan:

URI data berenkode Base64 berukuran 1/3 lebih besar dari padanan binernya. (Namun, overhead ini dikurangi menjadi 2-3% jika server HTTP mengompresi respons menggunakan gzip)

— Oded
sumber

7

Jawabannya adalah: Tergantung.

Meskipun gambar base64 lebih besar, ada beberapa kondisi di mana base64 adalah pilihan yang lebih baik.

Ukuran gambar base64

Base64 menggunakan 64 karakter berbeda dan ini adalah 2 ^ 6. Jadi base64 menyimpan 6bit per karakter 8bit. Jadi proporsinya adalah 6/8 dari data yang tidak dikonversi ke data base64. Ini bukan kalkulasi pasti, tapi perkiraan kasar.

Contoh:

Gambar 48kb membutuhkan sekitar 64kb sebagai gambar yang dikonversi base64.

Perhitungan: (48/6) * 8 = 64

Kalkulator CLI sederhana pada sistem Linux:

$ cat /dev/urandom|head -c 48000|base64|wc -c
64843

Atau menggunakan gambar:

$ cat my.png|base64|wc -c

Gambar dan situs web Base64

Pertanyaan ini jauh lebih sulit untuk dijawab. Secara umum, karena gambar yang lebih besar kurang masuk akal menggunakan base64. Tetapi pertimbangkan poin-poin berikut:

Banyak gambar yang disematkan dalam File HTML atau File CSS dapat memiliki string serupa. Untuk PNG, Anda sering menemukan karakter "A" yang berulang. Menggunakan gzip (terkadang disebut "deflate"), bahkan mungkin ada keuntungan dalam hal ukuran. Tapi itu tergantung konten gambar.
Meminta overhead HTTP1.1: Terutama dengan banyak cookie, Anda dapat dengan mudah memiliki beberapa kilobyte overhead per permintaan. Menyematkan gambar base64 mungkin menghemat bandwidth.
Jangan menyandikan gambar SVG base64, karena gzip lebih efektif di XML daripada di base64.
Pemrograman: Pada gambar yang dibuat secara dinamis, lebih mudah untuk mengirimkannya dalam satu permintaan untuk mengoordinasikan dua permintaan yang bergantung.
Tautan dalam: Jika Anda ingin mencegah pengunduhan gambar, akan lebih sulit untuk mengekstrak gambar dari halaman HTML.

— Trendfischer
sumber

3

Ini pasti akan membebani Anda lebih banyak ruang & bandwidth jika Anda ingin menggunakan gambar yang dikodekan base64. Namun jika situs Anda memiliki banyak gambar kecil, Anda dapat mengurangi waktu pemuatan halaman dengan mengkodekan gambar Anda ke base64 dan menempatkannya ke dalam html. Dengan cara ini, browser klien tidak perlu membuat banyak koneksi ke gambar, tetapi akan memilikinya dalam format html.

— Brad Larson
sumber

Namun ini tidak akan menjadi masalah setelah HTTP 2 benar-benar muncul.

— Philip

@Philip Itu benar, tetapi saya menyukai faktor portabilitas karena memiliki semua sumber daya yang terdapat dalam file HTML. Itu akan membantu dengan caching web seluler di area dengan jaringan jerawatan.

— aalaap

@aalaap Masalahnya adalah jika Anda melakukan satu perubahan pada halaman, maka Anda perlu memuat ulang semua konten termasuk gambar. Dimana jika Anda memiliki aset yang terpisah Anda dapat memiliki usia yang lebih tinggi pada aset tersebut dan itu akan disimpan dalam cache dan tidak dimuat ulang pada cache yang kedaluwarsa pada halaman itu sendiri.

— Philip