ผลของการเข้ารหัสรูปภาพใน base64 คืออะไร?

ถ้าฉันแปลงรูปภาพ (jpg หรือ png) เป็น base64 ภาพจะใหญ่ขึ้นหรือจะมีขนาดเท่ากัน? จะยิ่งใหญ่ขนาดไหน?

แนะนำให้ใช้รูปภาพที่เข้ารหัส base64 บนเว็บไซต์ของฉันหรือไม่

จะใหญ่ขึ้นประมาณ 37%:

โดยประมาณขนาดสุดท้ายของข้อมูลไบนารีที่เข้ารหัส Base64 จะเท่ากับ 1.37 เท่าของขนาดข้อมูลดั้งเดิม

ที่มา: http://en.wikipedia.org/wiki/Base64

นี่คือภาพรวมที่เป็นประโยชน์อย่างมากว่าเมื่อใดควรเข้ารหัส base64 และเมื่อใดที่ไม่ควรเข้ารหัส โดย David Calhoun

คำตอบพื้นฐาน = ไฟล์ที่เข้ารหัส gzipped base64 จะเทียบได้กับขนาดไฟล์กับไบนารีมาตรฐาน (jpg / png) ไฟล์ไบนารีของ Gzip จะมีขนาดไฟล์ที่เล็กกว่า

Takeaway = มีข้อได้เปรียบบางประการในการเข้ารหัสและการบีบอัดไอคอน UI ของคุณ ฯลฯ แต่ไม่ฉลาดที่จะทำเช่นนี้สำหรับภาพขนาดใหญ่

มันจะใหญ่กว่าใน base64

Base64 ใช้ 6 บิตต่อไบต์ในการเข้ารหัสข้อมูลในขณะที่ไบนารีใช้ 8 บิตต่อไบต์ นอกจากนี้ยังมีช่องว่างภายในเล็กน้อยด้วย Base64 ไม่ได้ใช้บิตทั้งหมดกับ Base64 เนื่องจากได้รับการพัฒนามาตั้งแต่แรกเพื่อเข้ารหัสข้อมูลไบนารีบนระบบที่สามารถประมวลผลข้อมูลที่ไม่ใช่ไบนารีได้อย่างถูกต้องเท่านั้น

นั่นหมายความว่าภาพที่เข้ารหัสจะมีขนาดใหญ่ขึ้นประมาณ 25% พร้อมค่าใช้จ่ายคงที่สำหรับการขยาย

การเข้ารหัสรูปภาพเป็น base64 จะทำให้ใหญ่ขึ้นประมาณ 30%

ดูรายละเอียดในบทความวิกิพีเดียเกี่ยวกับโครงร่าง Data URIโดยระบุว่า:

URI ของข้อมูลที่เข้ารหัส Base64 มีขนาดใหญ่กว่าไบนารีเทียบเท่า 1/3 (อย่างไรก็ตามค่าใช้จ่ายนี้จะลดลงเหลือ 2-3% หากเซิร์ฟเวอร์ HTTP บีบอัดการตอบสนองโดยใช้ gzip)

คำตอบคือมันขึ้นอยู่กับ

แม้ว่าภาพ base64 จะมีขนาดใหญ่กว่า แต่ก็มีเงื่อนไขบางประการที่ base64 เป็นตัวเลือกที่ดีกว่า

ขนาดฐาน 64 ภาพ

Base64 ใช้อักขระที่แตกต่างกัน 64 ตัวและนี่คือ 2 ^ 6 ดังนั้น base64 จึงเก็บ 6 บิตต่ออักขระ 8 บิต ดังนั้นสัดส่วนคือ 6/8 จากข้อมูลที่ไม่ได้แปลงเป็นข้อมูล base64 นี่ไม่ใช่การคำนวณที่แน่นอน แต่เป็นการประมาณคร่าวๆ

ตัวอย่าง:

ภาพ 48kb ต้องการประมาณ 64kb เป็นภาพที่แปลง base64

การคำนวณ: (48/6) * 8 = 64

เครื่องคิดเลข CLI อย่างง่ายบนระบบ Linux:

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

หรือใช้รูปภาพ:

$ cat my.png|base64|wc -c

Base64- รูปภาพและเว็บไซต์

คำถามนี้ตอบยากกว่ามาก โดยทั่วไปเมื่อภาพมีขนาดใหญ่ขึ้นและมีความรู้สึกน้อยลงโดยใช้ base64 แต่พิจารณาประเด็นต่อไปนี้:

• รูปภาพที่ฝังจำนวนมากในไฟล์ HTML หรือไฟล์ CSS อาจมีสตริงที่คล้ายกัน สำหรับ PNG คุณมักจะพบตัวอักษร "A" ซ้ำ ๆ การใช้ gzip (บางครั้งเรียกว่า "deflate") อาจทำให้ได้ขนาด แต่ขึ้นอยู่กับเนื้อหาของภาพ
• ขอค่าใช้จ่าย HTTP1.1: โดยเฉพาะอย่างยิ่งกับคุกกี้จำนวนมากคุณสามารถมีค่าใช้จ่ายเพียงไม่กี่กิโลไบต์ต่อคำขอ การฝังอิมเมจ base64 อาจช่วยประหยัดแบนด์วิดธ์
• อย่า base64 เข้ารหัสรูปภาพ SVG เนื่องจาก gzip มีประสิทธิภาพใน XML มากกว่าบน base64
• การเขียนโปรแกรม: บนภาพที่สร้างขึ้นแบบไดนามิกจะง่ายกว่าในการส่งมอบในคำขอเดียวเพื่อประสานสองคำขอที่เกี่ยวข้องกัน
• ลิงก์ในรายละเอียด: หากคุณต้องการป้องกันไม่ให้ดาวน์โหลดรูปภาพการแยกรูปภาพจากหน้า HTML จะยุ่งยากกว่าเล็กน้อย

แน่นอนว่าจะทำให้คุณเสียพื้นที่และแบนด์วิดท์มากขึ้นหากคุณต้องการใช้ภาพที่เข้ารหัส base64 อย่างไรก็ตามหากไซต์ของคุณมีรูปภาพขนาดเล็กจำนวนมากคุณสามารถลดเวลาในการโหลดหน้าเว็บได้โดยการเข้ารหัสรูปภาพของคุณเป็น base64 และวางเป็น html ด้วยวิธีนี้เบราว์เซอร์ไคลเอนต์ไม่จำเป็นต้องทำการเชื่อมต่อกับรูปภาพจำนวนมาก แต่จะมีในรูปแบบ html