การฝังอิมเมจ Base64

564

หมดความอยากรู้อยากเห็นแล้วภาพ Base64 ของเบราว์เซอร์ใดที่ทำงานได้ดี? สิ่งที่ผมหมายถึงคือนี้

ฉันรู้ว่ามันไม่ได้เป็นวิธีแก้ปัญหาที่ดีสำหรับทุกสิ่งส่วนใหญ่เพราะมันเพิ่มขนาดหน้ากระดาษได้เล็กน้อย - ฉันแค่อยากรู้อยากเห็น

ตัวอย่างบางส่วน:

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
แหล่งที่มา

ทำไมไม่ตั้งค่าหน้าด้วยตัวอย่างที่เราทุกคนจะผ่านไปและดำเนินการทดสอบจริงสดและรายงานได้ที่นี่

— Nir ประกาศ

64 บิตใช้เวลาเพียง 6 ตัวอักษร 2 ^ 6 สตริงข้อความจะมี 8 บิตต่อตัวอักษรอย่างน้อยขึ้นอยู่กับชนิดของการเข้ารหัส คุณสูญเสียประสิทธิภาพอย่างน้อย 25% .... การทดสอบอย่างรวดเร็วของฉันแสดงว่าขาดทุนประมาณ 30%

ที่สำคัญคุณอาจสูญเสียความสามารถในการแคชสิ่งของของคุณได้อย่างมีประสิทธิภาพ

— Hut8 8

@BrianHaak "อย่างมาก" ไม่พูดอะไรเลย ฉันเคยใช้ภาพ base64 หลายครั้งกับ ReactJs ในช่วงสองสามปีที่ผ่านมาและไม่มีปัญหาการแสดงผลเลย โปรดระบุการวัด

— Lukas Liesis

@LukasLiesis ฉันทำการวัดใน Google Chrome เพื่อวัตถุประสงค์ทางการค้าดังนั้นจึงไม่มีรายงานสาธารณะที่นี่ มันอาจจะโอเคสำหรับการแสดงผลภาพที่ไม่ซ้ำกัน แต่คุณต้องพิจารณาว่าแคชไม่ทำงานเลย ใน React.js มันสำคัญมากเมื่อมันนำไปสู่การเรนเดอร์ชิ้นส่วนที่สมบูรณ์อีกครั้ง (เช่นการเปลี่ยนแปลงการนำทางเป็นต้น)

— Brian Haak

คำตอบ:

361

อัปเดต: 2017-01-10

ขณะนี้เบราว์เซอร์หลักทุกแห่งสนับสนุน Data URIs IE รองรับการฝังภาพตั้งแต่รุ่น 8 เช่นกัน

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

ขณะนี้เว็บเบราว์เซอร์ดังต่อไปนี้รองรับ Data URIs แล้ว:

Gecko-based เช่น Firefox, SeaMonkey, XeroBank, Camino, Fennec และ K-Meleon

Konqueror ผ่าน KIO ของ KDE ซึ่งเป็นระบบทาสอินพุต / เอาท์พุต

Opera (รวมถึงอุปกรณ์เช่น Nintendo DSi หรือ Wii)

WebKit-based เช่น Safari (รวมถึง iOS), เบราว์เซอร์ของ Android, Epiphany และ Midori (WebKit เป็นอนุพันธ์ของเอ็นจิ้น KHTML ของ Konqueror แต่ Mac OS X ไม่ได้แชร์สถาปัตยกรรม KIO ดังนั้นการใช้งานจึงแตกต่างกัน) และ Webkit / ใช้ Chromium เช่น Chrome

ตรีศูล

Internet Explorer 8: Microsoft จำกัด การสนับสนุนเนื้อหาบางอย่าง "ไม่สามารถนำทางได้" เพื่อเหตุผลด้านความปลอดภัยรวมถึงข้อกังวลว่า JavaScript ฝังอยู่ในข้อมูล URI อาจไม่สามารถตีความได้โดยตัวกรองสคริปต์เช่นที่ใช้โดยไคลเอนต์อีเมลบนเว็บ URI ของข้อมูลต้องมีขนาดเล็กกว่า 32 KiB ในเวอร์ชัน 8 [3]

Data URIs ได้รับการสนับสนุนสำหรับองค์ประกอบและ / หรือแอตทริบิวต์ต่อไปนี้เท่านั้น:

วัตถุ (ภาพเท่านั้น)

img

ประเภทอินพุต = ภาพ

ลิงค์

ประกาศ CSS ที่ยอมรับ URL เช่นภาพพื้นหลัง, พื้นหลัง, สไตล์ลิสต์, ลิสต์สไตล์และที่คล้ายกัน

Internet Explorer 9: Internet Explorer 9 ไม่มีข้อ จำกัด 32KiB และได้รับอนุญาตในองค์ประกอบที่กว้างขึ้น

TheWorld Browser: IE เชลล์เบราว์เซอร์ที่มีการสนับสนุนในตัวสำหรับโครงการ Data URI

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

— Philippe Gerber
แหล่งที่มา

สวัสดี Philippe มีวิธีแก้ปัญหาสำหรับการ จำกัด ขนาด 32 KiB ใน IE8 หรือไม่? base64 รองรับใน IE7 และ IE6 หรือไม่ หากไม่มีการแก้ไขปัญหาใด ๆ (ไม่ จำกัด ขนาด) ถ้าใช่ขนาด จำกัด ใด ๆ ถ้าใช่วิธีแก้ปัญหาใด ๆ

— SexyBeast

ลองดูสิ่งนี้บางทีมันอาจช่วยได้: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under

มาตรฐานพูดอะไรหรือไม่ แน่ใจ upvote สำหรับคำตอบที่ดี update =)

— Ciro Santilli 郝海东冠状病六四事件法轮功

ข้อ จำกัด IE8 - สิ่งที่ฉันพบคือ IE8 มีขีด จำกัด สูงสุดของตัวอักษรอิมเมจสูงสุดที่ 32,768 ( ต่อไมโครซอฟท์ ) และอิมเมจแบบฝังของฉันมีมากกว่า 35,000 ตัว ดังนั้นเมื่อbackground-imageคุณสมบัติ CSS ( url(...embedded image) พยายามโหลดใน IE8 เนื่องจากเกินจำนวนอักขระสูงสุดแล้วทั้งหมดclassที่มีคุณสมบัติไม่ถูกโหลด ฉันไม่ได้แก้ไขปัญหานี้ฉันกลับไปimgใช้รูปภาพที่ฝังซึ่งเกินค่าสูงสุดและโหลดรูปภาพของฉันอย่างเหมาะสม

— id.ot

เบราว์เซอร์เดสก์ท็อปที่ทันสมัยที่สุดเช่น Chrome, Mozilla และ Internet Explorer รองรับภาพที่เข้ารหัสเป็น URL ข้อมูล แต่มีปัญหาในการแสดง URL ของข้อมูลในเบราว์เซอร์มือถือบาง: Android แจ้งเบราว์เซอร์และ Dolphin เบราว์เซอร์จะไม่แสดงJPEGs ฝังตัว

ฉันขอแนะนำให้คุณใช้เครื่องมือต่อไปนี้สำหรับการเข้ารหัส / ถอดรหัส base64 ออนไลน์:

เลือกตัวเลือก "Format as Data URL" เพื่อจัดรูปแบบเป็น Data Data

— Brig Ader
แหล่งที่มา

คุณไม่จำเป็นต้องมีเครื่องมือออนไลน์ในการเข้ารหัสเป็น base64 คุณสามารถใช้เครื่องมือบรรทัดคำสั่ง base64 บน Linux หรือ Mac OS X: echo "data: image / jpeg; base64," $ (cat file.jpg | base64)

— cstroe

ฉันสามารถใช้ ( http://caniuse.com/#feat=datauri ) แสดงการสนับสนุนในเบราว์เซอร์หลักที่มีปัญหาเล็กน้อยใน IE

— kehers
แหล่งที่มา