ตัวแปลง GIF เป็น Base64

เกี่ยวกับรูปแบบ GIF

GIF (Graphics Interchange Format, ชนิด MIME image/gif) มีมาตั้งแต่ปี 1987 แต่ละเฟรมใช้จานสีที่มีได้ไม่เกิน 256 สี และบีบอัดแบบไม่สูญเสียข้อมูลด้วย LZW ความโปร่งใสมีเพียงแบบโปร่งใสทั้งหมดหรือไม่โปร่งใสเลย กล่าวคือกำหนดให้สีหนึ่งในจานสีเป็นสีโปร่งใสได้ แต่ไม่มีความโปร่งแสงบางส่วน ไฟล์หนึ่งไฟล์เก็บได้หลายเฟรม โดยแต่ละเฟรมมีระยะหน่วงของตัวเองและกำหนดจำนวนรอบการวนซ้ำได้ GIF จึงกลายเป็นรูปแบบสำหรับภาพเคลื่อนไหวสั้น ๆ

Base64 ของ GIF ขึ้นต้นด้วย R0lGODlh สำหรับเวอร์ชัน GIF89a ที่ใช้กันทั่วไป หรือ R0lGODdh สำหรับ GIF87a ซึ่งเป็นเวอร์ชันที่เก่ากว่า

การรักษาภาพเคลื่อนไหว

เมื่อคุณเลือก “คงรูปแบบเดิม” เครื่องมือจะเข้ารหัสไบต์ของไฟล์ตามที่เป็นอยู่ data URI จึงเคลื่อนไหวได้เหมือนไฟล์ต้นฉบับทุกประการ ไม่ว่าจะใช้ในแท็ก <img> หรือเป็นพื้นหลัง CSS

การแปลงเป็น PNG, JPEG หรือ WebP หรือการตั้งความกว้างสูงสุด จะวาดรูปภาพใหม่ในเบราว์เซอร์ และจะเหลือเพียงเฟรมแรกเท่านั้น วิธีนี้มีประโยชน์เมื่อต้องการภาพนิ่งตัวอย่างของภาพเคลื่อนไหว แต่หากต้องการเวอร์ชันที่เคลื่อนไหว ให้ปิดทั้งสองตัวเลือกไว้

กรณีที่ data URI ของ GIF ยังเหมาะสม

• ไอคอนหมุนแสดงการโหลดและไอคอนสถานะแบบเคลื่อนไหวขนาดเล็กใน CSS
• พิกเซลโปร่งใสขนาด 1x1 แบบคลาสสิกที่ใช้เป็น src สำหรับตัวยึดตำแหน่ง ซึ่งใช้พื้นที่เพียงไม่กี่สิบไบต์ และยาวไม่ถึง 100 อักขระ Base64
• ลายเส้นเรียบง่ายที่มีสีไม่มาก ซึ่ง GIF จัดเก็บได้อย่างกะทัดรัด

ภาพเคลื่อนไหวขนาดใหญ่ไม่เหมาะกับวิธีนี้ GIF รีแอ็กชันขนาด 2 MB จะกลายเป็นข้อความประมาณ 2.7 MB ที่แคชแยกต่างหากไม่ได้ ไฟล์วิดีโอที่โฮสต์ไว้หรือ WebP แบบเคลื่อนไหวจะเบากว่ามาก

.loading {
  background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}

<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">