Menanamkan Gambar Base64

564

Murni karena penasaran, browser apa yang digunakan untuk menanamkan gambar Base64? Yang saya maksud adalah ini .

Saya menyadari itu biasanya bukan solusi yang baik untuk sebagian besar hal, karena ini meningkatkan ukuran halaman cukup - saya hanya ingin tahu.

Beberapa contoh:

HTML:

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

CSS:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
html base64 browser S Pangborn
sumber
3
mengapa tidak menyiapkan halaman dengan contoh, kita semua akan melalui dan melakukan pengujian langsung dan melaporkannya di sini
Nir Levy
4
64 bit hanya membutuhkan 6 karakter 2 ^ 6. String teks akan memiliki minimal 8 bit per karakter, tergantung pada jenis penyandian. Anda kehilangan setidaknya 25% efisiensi .... tes cepat saya menunjukkan kerugian sekitar 30%.
4
Lebih penting lagi, Anda mungkin kehilangan kemampuan untuk menyimpan barang Anda secara efektif.
Hut8
6
@BrianHaak "sangat" tidak mengatakan apa-apa. Saya secara pribadi telah menggunakan gambar base64 beberapa kali dengan ReactJs selama beberapa tahun terakhir dan tidak memiliki masalah rendering sama sekali. Tolong berikan beberapa pengukuran.
Lukas Liesis
1
@LukasLiesadalah saya melakukan pengukuran di Google Chrome untuk tujuan komersial, jadi tidak ada laporan publik di sini. Mungkin baik untuk rendering gambar unik tetapi Anda harus mempertimbangkan bahwa cache tidak berfungsi sama sekali. Di React.js, itu sangat penting ketika mengarah untuk menyelesaikan rendering bagian (pada perubahan navigasi, misalnya).
Brian Haak

Jawaban:

361

Pembaruan: 2017-01-10

URI data sekarang didukung oleh semua browser utama. IE mendukung penyematan gambar sejak versi 8 juga.

http://caniuse.com/#feat=datauri

URI data sekarang didukung oleh browser web berikut:

  • Berbasis Gecko, seperti Firefox, SeaMonkey, XeroBank, Camino, Fennec dan K-Meleon
  • Konqueror, melalui sistem input / output budak KIO KDE
  • Opera (termasuk perangkat seperti Nintendo DSi atau Wii)
  • Berbasis WebKit, seperti Safari (termasuk di iOS), browser Android, Epiphany dan Midori (WebKit adalah turunan dari mesin KHTML Konqueror, tetapi Mac OS X tidak berbagi arsitektur KIO sehingga implementasinya berbeda), serta Webkit / Berbasis Chromium, seperti Chrome
  • Trisula
    • Internet Explorer 8: Microsoft telah membatasi dukungannya untuk konten "tidak dapat dinavigasi" tertentu untuk alasan keamanan, termasuk kekhawatiran bahwa JavaScript yang tertanam dalam data URI mungkin tidak dapat ditafsirkan oleh filter skrip seperti yang digunakan oleh klien email berbasis web. Data URI harus lebih kecil dari 32 KiB dalam Versi 8 [3].
    • Data URI hanya didukung untuk elemen dan / atau atribut berikut [4]:
      • objek (hanya gambar)
      • img
      • tipe input = gambar
      • tautan
    • Deklarasi CSS yang menerima URL, seperti gambar latar, latar belakang, tipe gaya daftar, gaya daftar dan sejenisnya.
    • Internet Explorer 9: Internet Explorer 9 tidak memiliki batasan 32KiB dan diizinkan dalam elemen yang lebih luas.
    • TheWorld Browser: Browser shell IE yang memiliki dukungan bawaan untuk skema Data URI

http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

Philippe Gerber
sumber
Hai Philippe, apakah ada solusi untuk batas ukuran 32 KiB di IE8? Apakah base64 didukung di IE7 dan IE6? Jika tidak, ada solusi (tanpa batas ukuran)? Jika ya, ada batasan ukuran? Jika ya, ada solusi?
SexyBeast
Lihat ke dalam ini, mungkin itu akan membantu: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under
Apakah standar mengatakan sesuatu? Suara positif tertentu untuk pembaruan jawaban yang baik =).
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
5
Keterbatasan IE8 - Apa yang saya temukan adalah bahwa IE8 memiliki batas karakter maks gambar tertanam 32.768 ( per Microsoft ) dan gambar tertanam saya memiliki lebih dari 35.000. Jadi ketika background-imageproperti CSS ( url(...embedded image) berusaha memuat di IE8, karena batas karakter telah terlampaui, seluruh classyang berisi properti tidak dimuat. Saya tidak meminta perbaikan untuk ini, saya kembali lagi ke imguntuk gambar tertanam yang melebihi maks dan gambar saya dimuat dengan tepat.
id.ot
53

Sebagian besar browser desktop modern seperti Chrome, Mozilla dan Internet Explorer mendukung gambar yang disandikan sebagai URL data. Tetapi ada masalah dalam menampilkan URL data di beberapa peramban seluler: Android Stock Browser dan Dolphin Browser tidak akan menampilkan JPEG tersemat .

Saya merekomendasikan Anda untuk menggunakan alat berikut untuk pengkodean / decoding base64 online:

Centang opsi "Format sebagai Data URL" untuk memformat sebagai URL Data.

Brig Ader
sumber
3
Anda tidak memerlukan alat online untuk menyandikan ke base64. Alih-alih, Anda dapat menggunakan alat baris perintah base64 di Linux atau Mac OS X: echo "data: image / jpeg; base64," $ (cat file.jpg | base64)
cstroe