ตัวแปลงรูปภาพเป็น Data URI / Base64
เพียงลากและวางหรืออัปโหลดรูปภาพจากอุปกรณ์ของคุณ หรือวาง URL รูปภาพจากเว็บ เพื่อแปลงรูปภาพที่ต้องการเป็นรูปแบบข้อความ Base64 / Data URI แปลงรูปภาพเป็นรูปแบบข้อความ Data URI / Base64
ตัวแปลง Data URI / Base64 เป็นรูปภาพ
ใช้ ตัวแปลงรูปภาพเป็น Data URI / Base64
อ่านเนื้อหา
แปลงไฟล์รูปภาพหลายไฟล์เป็นรูปแบบ Data URI และ Base64 ออนไลน์ ฟรี
ตัวแปลงรูปภาพเป็น Data URI / Base64
ตัวแปลงรูปภาพเป็น Data URI / Base64 เป็นเครื่องมือที่สะดวก ช่วยให้คุณแปลงรูปภาพเป็นสตริงข้อความได้อย่างรวดเร็วและง่ายดาย เพื่อนำไปใช้ในเว็บไซต์หรือแอปพลิเคชันออนไลน์อื่น ๆ เครื่องมือนี้มีประโยชน์เมื่อคุณต้องการฝังรูปภาพในโค้ด แต่ไม่ต้องการใช้บริการโฮสต์ไฟล์ภายนอก
ระบบเข้ารหัสรูปภาพเป็น Base64 คืออะไร
คุณเคยต้องการแปลงรูปภาพเป็น URL ข้อมูลหรือสตริง Base64 หรือไม่?
การแปลงรูปภาพเป็น Base64 เป็นระบบเข้ารหัสรูปภาพที่แปลงรูปภาพใด ๆ เป็นรูปแบบข้อความที่อ่านไม่ได้โดยไม่สูญเสียข้อมูล ข้อความที่เข้ารหัส Base64 ที่สร้างขึ้นจะประกอบด้วยเครื่องหมายบวก เครื่องหมายทับ เครื่องหมายเท่ากับ ตัวอักษรละติน และตัวเลข
การเข้ารหัส Base64 เป็นวิธีที่มีประโยชน์มากในการจัดเก็บข้อมูลไบนารีในรูปแบบข้อความ เป้าหมายคือการแสดงข้อมูลไบนารี (เช่น รูปภาพ เสียง คลิปวิดีโอ) โดยใช้ตัวอักษร ASCII (ตัวอักษรจากอักษรภาษาอังกฤษ + ตัวเลข)
ทำไมต้องใช้ Data URI / Base64?
รูปภาพสามารถแปลงเป็นสตริง Base64 ได้โดยใช้วิธีที่เรียกว่า Data URI ซึ่งช่วยให้เราสร้าง URL สำหรับรูปภาพที่สามารถนำไปใช้ในเว็บเพจได้ กระบวนการนี้เกี่ยวข้องกับการแปลงไฟล์ต้นฉบับเป็นอาร์เรย์ไบต์ (ชุดของไบต์) จากนั้นเราสามารถเข้ารหัสอาร์เรย์ไบต์นั้นเป็นสตริง Base64
Data URI มีข้อดีหลายประการเมื่อเทียบกับไฟล์ในเครื่อง ช่วยประหยัดพื้นที่ในแคชของไคลเอนต์ (เบราว์เซอร์) มีขนาดเล็กกว่ารูปภาพทั่วไป และช่วยให้เว็บไซต์สามารถแสดงรูปภาพขนาดใหญ่โดยใช้แบนด์วิดท์น้อยลง สตริง Base64 ยังอ่านง่ายกว่า เนื่องจากสามารถดูได้ง่ายโดยใช้โปรแกรมแก้ไขข้อความทั่วไป
ด้วย Data URI คุณสามารถฝังรูปภาพลงในโค้ด HTML ของคุณได้โดยตรง โดยไม่ต้องโหลดไฟล์ภายนอก ซึ่งช่วยให้เว็บเพจโหลดเร็วขึ้น และทำได้ง่ายมาก ในบทความนี้ เราจะแสดงวิธีแปลงรูปภาพเป็น Data URI ภายในไม่กี่วินาที
วิธีแปลงรูปภาพเป็น Base64 / Data URI ภายในไม่กี่วินาที
คุณเคยสงสัยหรือไม่ว่าจะทำให้รูปภาพโหลดเร็วขึ้นบนเว็บไซต์ของคุณได้อย่างไร? วิธีหนึ่งคือการใช้ Data URI เพียง ลากและวางหรืออัปโหลดรูปภาพจากอุปกรณ์ของคุณ หรือวาง URL รูปภาพจากเว็บ เพื่อแปลงรูปภาพที่ต้องการเป็นรูปแบบข้อความ Base64 / Data URI
ตัวอย่างการเข้ารหัสรูปภาพเป็น Base64
ผลลัพธ์ที่เข้ารหัส Base64 สำหรับรูปภาพจะมีลักษณะดังนี้ data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC....
การใช้งานการเข้ารหัสรูปภาพเป็น Base64
สำหรับแหล่งที่มาของรูปภาพ (img src):
< img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC..." />
สำหรับ URL รูปภาพพื้นหลัง (background-image: url):
background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC...")
วิธีใช้ Data URI / Base64
ในการใช้ตัวแปลง Data URI / Base64 เพียงคัดลอกและวางโค้ดที่สร้างขึ้นลงในโปรเจ็กต์ของคุณในตำแหน่งที่คุณต้องการให้รูปภาพที่ฝังแสดงผล อย่าลบการขึ้นบรรทัดใหม่หรือช่องว่างภายในโค้ด เนื่องจากจำเป็นสำหรับการแสดงผลที่ถูกต้อง คุณอาจต้องปรับการตั้งค่าบางอย่าง ขึ้นอยู่กับวิธีที่คุณวางแผนจะใช้รูปภาพที่แปลงแล้ว เช่น การเปลี่ยนขนาดหรือเพิ่มขอบ/ระยะห่างรอบ ๆ รูปภาพ
ความคิดเห็น (0)
โปรดอธิบายปัญหาที่คุณพบ เพื่อให้เราสามารถตรวจสอบและปรับปรุงเครื่องมือได้