emptygif
ภาษา: ไทย

GIF โปร่งใสที่เล็กที่สุดมีขนาด 43 ไบต์

นี่คือทั้งหมดของมัน เลือกไบต์ใดก็ได้เพื่อดูว่ามันทำหน้าที่อะไร จากนั้นคัดลอกไฟล์ ดาวน์โหลด ฮอตลิงก์ หรือเสิร์ฟจากโค้ดของคุณเอง

GIF ขนาด 43 ไบต์แบบขยาย: พิกเซลโปร่งใสหนึ่งพิกเซล
0000
0010
0020
ดาวน์โหลด 1×1.gif

R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

ตรวจ GIF ของคุณเอง

แต่ละไบต์ทำหน้าที่อะไร

GIF คือลำดับของบล็อก ไฟล์นี้มีเจ็ดบล็อก และทุกสีบนหน้านี้เป็นของบล็อกใดบล็อกหนึ่ง เลือกไบต์หรือบล็อกเพื่ออ่านคำอธิบาย ตัวเลขจัดเก็บแบบ little-endian: ไบต์ต่ำมาก่อน ดังนั้น 01 00 จึงหมายถึง 1

ไบต์ฟิลด์ความหมาย
ส่วนหัว บอกตัวถอดรหัสว่านี่คือ GIF และเป็นรูปแบบเวอร์ชันใด
47 49 46ลายเซ็นตัวอักษร ASCII “GIF” ไฟล์ GIF ทุกไฟล์ขึ้นต้นด้วยตัวอักษรเหล่านี้
38 39 61เวอร์ชัน“89a” ต้องใช้ 89a จึงจะโปร่งใสได้ ส่วน 87a ไม่มีส่วนขยายควบคุมกราฟิก
ตัวอธิบายหน้าจอเชิงตรรกะ ขนาดของแคนวาสและวิธีตั้งค่าตารางสี
01 00ความกว้างแคนวาส1 พิกเซล
01 00ความสูงแคนวาส1 พิกเซล
80แฟล็กแบบแพ็กการตั้งค่าสี่อย่างอัดรวมอยู่ในไบต์เดียว บิตบนสุดบอกว่ามีตารางสีส่วนกลางตามมา ส่วนสามบิตล่างสุดบอกขนาดของตาราง
00ดัชนีสีพื้นหลังรายการที่ 0 ของพาเลต เบราว์เซอร์จะไม่สนใจค่านี้และแสดงสิ่งที่อยู่ด้านหลังภาพแทน
00อัตราส่วนพิกเซล0 หมายถึงพิกเซลสี่เหลี่ยมจัตุรัส ไม่มีการปรับแก้
ตารางสีส่วนกลาง พาเลตสี พิกเซลจะเก็บดัชนีที่ชี้ไปยังรายการนี้แทนการเก็บสี
FF FF FFรายการในพาเลตแดง เขียว และน้ำเงิน อย่างละหนึ่งไบต์: #ffffff ตารางสีของ GIF มีได้เล็กสุดสองรายการ
00 00 00รายการในพาเลตแดง เขียว และน้ำเงิน อย่างละหนึ่งไบต์: #000000 ตารางสีของ GIF มีได้เล็กสุดสองรายการ
ส่วนขยายควบคุมกราฟิก บล็อกเสริมที่เพิ่มเข้ามาใน GIF89a ในที่นี้ใช้ทำให้รายการที่ 0 ของพาเลตโปร่งใส
21ตัวนำส่วนขยาย0x21 (“!”) ประกาศว่าต่อไปเป็นบล็อกส่วนขยาย
F9ป้ายควบคุมกราฟิก0xF9 บอกว่าส่วนขยายนี้คือส่วนขยายควบคุมกราฟิก
04ขนาดบล็อกตามด้วยการตั้งค่า 4 ไบต์
01แฟล็กแบบแพ็กบิตต่ำสุดคือแฟล็กความโปร่งใส ซึ่งเปิดอยู่ จึงใช้ดัชนีสีโปร่งใสด้านล่าง
00 00หน่วงเวลา0 ในร้อยวินาที มีผลเฉพาะกับภาพเคลื่อนไหว
00ดัชนีสีโปร่งใสรายการที่ 0 ของพาเลตจะถูกวาดให้โปร่งใสทั้งหมด
00ตัวปิดบล็อกบล็อกย่อยความยาวศูนย์ที่ใช้ปิดบล็อก
ตัวอธิบายภาพ ตำแหน่งของภาพบนแคนวาสและขนาดของภาพ
2Cตัวคั่นภาพ0x2C (“,”) เริ่มต้นภาพ
00 00ซ้ายภาพเริ่มห่างจากขอบซ้ายของแคนวาส 0 พิกเซล
00 00บนภาพเริ่มห่างจากขอบบนของแคนวาส 0 พิกเซล
01 00ความกว้างภาพ1 พิกเซล
01 00ความสูงภาพ1 พิกเซล
00แฟล็กแบบแพ็กไม่มีตารางสีเฉพาะที่ ไม่ใช่แบบอินเทอร์เลซ ภาพใช้พาเลตส่วนกลาง
ข้อมูลภาพ พิกเซลที่บีบอัดด้วย LZW และแบ่งเป็นบล็อกย่อยขนาดไม่เกิน 255 ไบต์
02ขนาดโค้ดขั้นต่ำของ LZW2 ดังนั้นโค้ดที่บีบอัดจะเริ่มต้นที่ความกว้าง 3 บิต
02ขนาดบล็อกย่อยตามด้วยข้อมูลที่บีบอัด 2 ไบต์
44 01พิกเซลที่บีบอัดโค้ด LZW ที่แพ็กเรียงจากบิตต่ำสุดขึ้นไป ดูวิธีถอดรหัสได้ด้านล่าง
00ตัวปิดบล็อกบล็อกย่อยความยาวศูนย์ที่ใช้ปิดบล็อก
ส่วนท้าย ไบต์เดียวที่ระบุจุดสิ้นสุดของไฟล์
3Bส่วนท้าย0x3B (“;”) ปิดท้ายไฟล์

ภายในไบต์แบบแพ็ก

สามไบต์นี้แต่ละไบต์เก็บการตั้งค่าเล็กๆ หลายอย่าง บิต 7 อยู่ซ้ายสุด

ตัวอธิบายหน้าจอเชิงตรรกะ 0x80
1มีตารางสีส่วนกลาง
000ความละเอียดสี
0พาเลตเรียงตามความสำคัญ
000ขนาดตาราง: 2^(n+1) รายการ
ส่วนขยายควบคุมกราฟิก 0x01
000สงวนไว้
000วิธีจัดการเฟรม
0รออินพุตจากผู้ใช้
1เปิดความโปร่งใส
ตัวอธิบายภาพ 0x00
0มีตารางสีเฉพาะที่
0อินเทอร์เลซ
0พาเลตเรียงตามความสำคัญ
00สงวนไว้
000ขนาดตารางเฉพาะที่

สองไบต์เก็บหนึ่งพิกเซลได้อย่างไร

เมื่อขนาดโค้ดขั้นต่ำเป็น 2 ตัวถอดรหัสจะอ่านโค้ดขนาด 3 บิต โค้ด 4 ล้างตาราง โค้ด 5 จบภาพ และโค้ด 0 ถึง 3 คือรายการในพาเลต ไบต์ 44 01 อ่านจากบิตต่ำสุดขึ้นไป:

0x44 010001000x01 00000001

  1. 001100 = 4ล้าง: เริ่มด้วยตารางใหม่
  2. 000000 = 0พิกเซล: รายการที่ 0 ของพาเลต
  3. 101101 = 5จบภาพ
  4. 0000000 บิตเติมที่ไม่ได้ใช้

ภาพที่ใหญ่กว่าก็ใช้วิธีเดียวกัน โค้ดใหม่แต่ละตัวแทนช่วงพิกเซลที่ยาวกว่าตัวก่อนหน้าหนึ่งพิกเซล GIF โปร่งใสขนาด 1000×1000 จึงใช้เพียง 1,743 ไบต์

เล็กกว่านี้ได้ไหม?

ได้ ถ้าตัดส่วนที่ตัวถอดรหัสยอมให้ขาดได้ออกไป เราส่งแต่ละแบบให้เอนจินเบราว์เซอร์สามตัวและ Pillow แล้วบันทึกว่าแต่ละตัววาดอะไรออกมา

ขนาดแบบChromiumFirefoxWebKitPillow
43ไฟล์มาตรฐานบนหน้านี้โปร่งใสโปร่งใสโปร่งใสโปร่งใส
42ไม่มีไบต์ส่วนท้าย อย่างไรก็ตามตัวถอดรหัสจะหยุดเมื่อถึงท้ายข้อมูลอยู่แล้วโปร่งใสโปร่งใสโปร่งใสโปร่งใส
37ไม่มีพาเลตเลย แต่ยังถูกต้อง: สเปกอนุญาตให้ตัวถอดรหัสใช้พาเลตของตัวเอง และดัชนี 0 ก็โปร่งใสอยู่แล้วโปร่งใสโปร่งใสโปร่งใสโปร่งใส
36ไม่มีพาเลตและไม่มีส่วนท้ายโปร่งใสโปร่งใสโปร่งใสโปร่งใส
35ไม่มีบล็อกความโปร่งใส: พิกเซลจะถูกวาดด้วยสีที่ 0 ของพาเลต คือสีขาวขาวขาวขาวขาว
35รูปแบบปี 1987 ไม่มีวิธีกำหนดให้สีใดโปร่งใสขาวขาวขาวขาว
34มีบล็อกความโปร่งใส แต่ไม่มีพิกเซลที่บีบอัดโปร่งใสโปร่งใสโปร่งใสข้อผิดพลาด
33เหมือนข้างบน แต่ไม่มีส่วนท้ายโปร่งใสโปร่งใสโปร่งใสข้อผิดพลาด
29ไม่มีพาเลตและไม่มีความโปร่งใส แต่ละเอนจินเลือกสีเองดำขาวโปร่งใสดำ
26ภาพที่ไม่มีข้อมูลบีบอัดเลยโปร่งใสโปร่งใสโปร่งใสข้อผิดพลาด
14มีเพียงส่วนหัว ขนาดแคนวาส และส่วนท้าย ไม่มีภาพอยู่ข้างในโปร่งใสข้อผิดพลาดโปร่งใสข้อผิดพลาด

ใช้ 43 ไบต์เมื่อต้องทำงานได้ทุกที่ 37 ไบต์ยังเป็น GIF ที่ถูกต้องและโปร่งใสในทุกเอนจินที่เราทดสอบ ถ้าเล็กกว่านั้นจะต้องพึ่งความยืดหยุ่นของตัวถอดรหัส และไฟล์ 29 ไบต์ก็แสดงให้เห็นว่าแต่ละเอนจินให้ผลต่างกัน

ตรวจสอบเมื่อ 23 กันยายน 2569 ด้วย Chromium 153.0.8010.12, Firefox 155.0, WebKit 26.6, Pillow 12.2.0

พิกเซลเดียวกันในรูปแบบอื่น

ไฟล์ 1×1 โปร่งใสที่เล็กที่สุดที่เราสร้างได้ในแต่ละรูปแบบ ส่งให้เอนจินสี่ตัวเดิม เปิดแถวเพื่อดูไบต์ของไฟล์ ซึ่งระบายสีเหมือนบล็อก GIF ที่ทำหน้าที่เดียวกัน

ขนาดไฟล์data URIChromiumFirefoxWebKitPillow
28
WebP เหมือนข้างบน แต่ไม่มีไบต์ส่วนเติมสองไบต์ WebKit ปฏิเสธไฟล์ WebP ที่สั้นกว่า 30 ไบต์
52 49 46 46 14 00 00 00 57 45 42 50 56 50 38 4c 08 00 00 00 2f 00 00 00 10 88 88 08
  • RIFF … WEBP คอนเทนเนอร์ 12
  • VP8L chunk คอนเทนเนอร์ 8
  • 0x2F ลายเซ็น 1
  • width, height, alpha ขนาด 4
  • prefix codes พิกเซล 3
63โปร่งใสโปร่งใสข้อผิดพลาดโปร่งใส
30
WebP VP8L แบบไม่สูญเสียคุณภาพ ทุกรหัสนำหน้ามีสัญลักษณ์เดียว พิกเซลจึงไม่ใช้บิตเลย และไฟล์มีขนาดเท่าเดิมไปจนถึง 16384×16384
52 49 46 46 16 00 00 00 57 45 42 50 56 50 38 4c 0a 00 00 00 2f 00 00 00 10 88 88 08 00 00
  • RIFF … WEBP คอนเทนเนอร์ 12
  • VP8L chunk คอนเทนเนอร์ 8
  • 0x2F ลายเซ็น 1
  • width, height, alpha ขนาด 4
  • prefix codes พิกเซล 3
  • padding ส่วนเติม 2
63โปร่งใสโปร่งใสโปร่งใสโปร่งใส
43
GIF GIF 43 ไบต์จากด้านบนของหน้านี้
47 49 46 38 39 61 01 00 01 00 80 00 00 ff ff ff 00 00 00 21 f9 04 01 00 00 00 00 2c 00 00 00 00 01 00 01 00 00 02 02 44 01 00 3b
  • ส่วนหัว 6
  • ตัวอธิบายหน้าจอเชิงตรรกะ 7
  • ตารางสีส่วนกลาง 6
  • ส่วนขยายควบคุมกราฟิก 8
  • ตัวอธิบายภาพ 10
  • ข้อมูลภาพ 5
  • ส่วนท้าย 1
82โปร่งใสโปร่งใสโปร่งใสโปร่งใส
58
BMP เฮดเดอร์ 40 ไบต์แบบดั้งเดิมไม่มีมาสก์อัลฟา ไบต์ที่สี่จึงถูกละเลย และพิกเซลเป็นสีดำในทุกเอนจิน
42 4d 3a 00 00 00 00 00 00 00 36 00 00 00 28 00 00 00 01 00 00 00 01 00 00 00 01 00 20 00 00 00 00 00 04 00 00 00 13 0b 00 00 13 0b 00 00 00 00 00 00 00 00 00 00 00 00 00 00
  • BITMAPFILEHEADER ลายเซ็น 14
  • BITMAPINFOHEADER ขนาด 40
  • BGRA พิกเซล 4
102ดำดำดำดำ
62
SVG อิลิเมนต์ svg ว่างที่มีความกว้างและความสูง Pillow อ่าน SVG ไม่ได้
<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"/>
  • <svg xmlns> ลายเซ็น 39
  • width, height ขนาด 21
  • /> ส่วนท้าย 2
85โปร่งใสโปร่งใสโปร่งใสข้อผิดพลาด
67
PNG ทรูคัลเลอร์พร้อมอัลฟา สแกนไลน์เดียวที่เป็นศูนย์ทั้งหมดถูกบีบอัดด้วยมือ สั้นกว่า zlib ที่ตั้งค่าดีที่สุดหนึ่งไบต์
89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 01 00 00 00 01 08 06 00 00 00 1f 15 c4 89 00 00 00 0a 49 44 41 54 78 01 63 00 01 00 00 05 00 01 36 d0 88 dd 00 00 00 00 49 45 4e 44 ae 42 60 82
  • PNG signature ลายเซ็น 8
  • IHDR ขนาด 25
  • IDAT พิกเซล 22
  • IEND ส่วนท้าย 12
114โปร่งใสโปร่งใสโปร่งใสโปร่งใส
70
ICO ไอคอนเว็บ (favicon) ที่บรรจุบิตแมป 32 บิตและ AND mask 1 บิต
00 00 01 00 01 00 01 01 00 00 01 00 20 00 30 00 00 00 16 00 00 00 28 00 00 00 01 00 00 00 02 00 00 00 01 00 20 00 00 00 00 00 08 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 80 00 00 00
  • ICONDIR ลายเซ็น 6
  • ICONDIRENTRY ขนาด 16
  • BITMAPINFOHEADER ขนาด 40
  • BGRA พิกเซล 4
  • AND mask ความโปร่งใส 4
121โปร่งใสโปร่งใสโปร่งใสโปร่งใส
74
BMP เฮดเดอร์ 56 ไบต์ที่มีมาสก์อัลฟา WebKit โหลดไม่ได้
42 4d 4a 00 00 00 00 00 00 00 46 00 00 00 38 00 00 00 01 00 00 00 01 00 00 00 01 00 20 00 03 00 00 00 04 00 00 00 13 0b 00 00 13 0b 00 00 00 00 00 00 00 00 00 00 00 00 ff 00 00 ff 00 00 ff 00 00 00 00 00 00 ff 00 00 00 00
  • BITMAPFILEHEADER ลายเซ็น 14
  • BITMAPV3INFOHEADER ขนาด 56
  • BGRA พิกเซล 4
122โปร่งใสโปร่งใสข้อผิดพลาดโปร่งใส
89
ICO ไอคอนเว็บ (favicon) ที่บรรจุ PNG 67 ไบต์
00 00 01 00 01 00 01 01 00 00 01 00 20 00 43 00 00 00 16 00 00 00 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 01 00 00 00 01 08 06 00 00 00 1f 15 c4 89 00 00 00 0a 49 44 41 54 78 01 63 00 01 00 00 05 00 01 36 d0 88 dd 00 00 00 00 49 45 4e 44 ae 42 60 82
  • ICONDIR ลายเซ็น 6
  • ICONDIRENTRY ขนาด 16
  • PNG signature ลายเซ็น 8
  • IHDR ขนาด 25
  • IDAT พิกเซล 22
  • IEND ส่วนท้าย 12
145โปร่งใสโปร่งใสโปร่งใสโปร่งใส
126
BMP เฮดเดอร์ V4 WebKit ละเลยมาสก์อัลฟาและวาดเป็นสีดำ
42 4d 7e 00 00 00 00 00 00 00 7a 00 00 00 6c 00 00 00 01 00 00 00 01 00 00 00 01 00 20 00 03 00 00 00 04 00 00 00 13 0b 00 00 13 0b 00 00 00 00 00 00 00 00 00 00 00 00 ff 00 00 ff 00 00 ff 00 00 00 00 00 00 ff 42 47 52 73 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
  • BITMAPFILEHEADER ลายเซ็น 14
  • BITMAPV4INFOHEADER ขนาด 108
  • BGRA พิกเซล 4
190โปร่งใสโปร่งใสดำโปร่งใส
142
BMP เฮดเดอร์ V5 ได้ผลเหมือนกันใน WebKit
42 4d 8e 00 00 00 00 00 00 00 8a 00 00 00 7c 00 00 00 01 00 00 00 01 00 00 00 01 00 20 00 03 00 00 00 04 00 00 00 13 0b 00 00 13 0b 00 00 00 00 00 00 00 00 00 00 00 00 ff 00 00 ff 00 00 ff 00 00 00 00 00 00 ff 42 47 52 73 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
  • BITMAPFILEHEADER ลายเซ็น 14
  • BITMAPV5INFOHEADER ขนาด 124
  • BGRA พิกเซล 4
214โปร่งใสโปร่งใสดำโปร่งใส
437
AVIF เหมือนข้างบน แต่ใช้การสุ่มสี 4:0:0 ซึ่งตัดระนาบสีออก
00 00 00 1c 66 74 79 70 61 76 69 66 00 00 00 00 61 76 69 66 6d 69 66 31 6d 69 61 66 00 00 01 6a 6d 65 74 61 00 00 00 00 00 00 00 21 68 64 6c 72 00 00 00 00 00 00 00 00 70 69 63 74 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 0e 70 69 74 6d 00 00 00 00 00 01 00 00 00 2c 69 6c 6f 63 00 00 00 00 44 00 00 02 00 01 00 00 00 01 00 00 01 a0 00 00 00 15 00 02 00 00 00 01 00 00 01 8e 00 00 00 12 00 00 00 42 69 69 6e 66 00 00 00 00 00 02 00 00 00 1a 69 6e 66 65 02 00 00 00 00 01 00 00 61 76 30 31 43 6f 6c 6f 72 00 00 00 00 1a 69 6e 66 65 02 00 00 00 00 02 00 00 61 76 30 31 41 6c 70 68 61 00 00 00 00 1a 69 72 65 66 00 00 00 00 00 00 00 0e 61 75 78 6c 00 02 00 01 00 01 00 00 00 a7 69 70 72 70 00 00 00 81 69 70 63 6f 00 00 00 14 69 73 70 65 00 00 00 00 00 00 00 01 00 00 00 01 00 00 00 0e 70 69 78 69 00 00 00 00 01 08 00 00 00 0c 61 76 31 43 81 00 1c 00 00 00 00 13 63 6f 6c 72 6e 63 6c 78 00 01 00 0d 00 06 80 00 00 00 38 61 75 78 43 00 00 00 00 75 72 6e 3a 6d 70 65 67 3a 6d 70 65 67 42 3a 63 69 63 70 3a 73 79 73 74 65 6d 73 3a 61 75 78 69 6c 69 61 72 79 3a 61 6c 70 68 61 00 00 00 00 1e 69 70 6d 61 00 00 00 00 00 00 00 02 00 01 04 01 02 83 04 00 02 04 01 02 83 05 00 00 00 2f 6d 64 61 74 12 00 0a 04 18 00 06 15 32 08 10 00 00 18 e1 42 72 10 12 00 0a 07 18 00 06 18 08 68 35 32 08 10 00 00 18 e1 42 72 10
  • ftyp ลายเซ็น 28
  • meta เมทาดาทา 362
  • mdat พิกเซล 47
607โปร่งใสโปร่งใสโปร่งใสโปร่งใส
471
AVIF สิ่งที่ libavif เขียนออกมาที่ quality 100: ภาพ AV1 หนึ่งภาพสำหรับสีและอีกหนึ่งภาพสำหรับอัลฟา อยู่ในกล่อง ISO BMFF
00 00 00 20 66 74 79 70 61 76 69 66 00 00 00 00 61 76 69 66 6d 69 66 31 6d 69 61 66 4d 41 31 42 00 00 01 86 6d 65 74 61 00 00 00 00 00 00 00 21 68 64 6c 72 00 00 00 00 00 00 00 00 70 69 63 74 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 0e 70 69 74 6d 00 00 00 00 00 01 00 00 00 2c 69 6c 6f 63 00 00 00 00 44 00 00 02 00 01 00 00 00 01 00 00 01 c0 00 00 00 17 00 02 00 00 00 01 00 00 01 ae 00 00 00 12 00 00 00 42 69 69 6e 66 00 00 00 00 00 02 00 00 00 1a 69 6e 66 65 02 00 00 00 00 01 00 00 61 76 30 31 43 6f 6c 6f 72 00 00 00 00 1a 69 6e 66 65 02 00 00 00 00 02 00 00 61 76 30 31 41 6c 70 68 61 00 00 00 00 1a 69 72 65 66 00 00 00 00 00 00 00 0e 61 75 78 6c 00 02 00 01 00 01 00 00 00 c3 69 70 72 70 00 00 00 9d 69 70 63 6f 00 00 00 14 69 73 70 65 00 00 00 00 00 00 00 01 00 00 00 01 00 00 00 10 70 69 78 69 00 00 00 00 03 08 08 08 00 00 00 0c 61 76 31 43 81 00 0c 00 00 00 00 13 63 6f 6c 72 6e 63 6c 78 00 01 00 0d 00 06 80 00 00 00 0e 70 69 78 69 00 00 00 00 01 08 00 00 00 0c 61 76 31 43 81 00 1c 00 00 00 00 38 61 75 78 43 00 00 00 00 75 72 6e 3a 6d 70 65 67 3a 6d 70 65 67 42 3a 63 69 63 70 3a 73 79 73 74 65 6d 73 3a 61 75 78 69 6c 69 61 72 79 3a 61 6c 70 68 61 00 00 00 00 1e 69 70 6d 61 00 00 00 00 00 00 00 02 00 01 04 01 02 83 04 00 02 04 01 05 86 07 00 00 00 31 6d 64 61 74 12 00 0a 04 18 00 06 15 32 08 10 00 00 18 e1 42 72 10 12 00 0a 08 18 00 06 08 08 68 34 20 32 09 10 00 00 00 07 c8 24 c6 62
  • ftyp ลายเซ็น 32
  • meta เมทาดาทา 390
  • mdat พิกเซล 49
651โปร่งใสโปร่งใสโปร่งใสโปร่งใส

WebP ขนาด 30 ไบต์ เป็นไฟล์ที่เล็กที่สุดที่ออกมาโปร่งใสในเอนจินทั้งสี่ตัว เล็กกว่า GIF 13 ไบต์

ความยาวของ data URI เป็นจำนวนอักขระ: SVG เป็นข้อความที่เข้ารหัสแบบ URL ส่วนที่เหลือเป็น base64 ตรวจสอบเมื่อ 24 กันยายน 2569 ด้วย Chromium 153.0.8010.12, Firefox 155.0, WebKit 26.6, Pillow 12.2.0 AVIF สร้างด้วย libavif 1.4.1

สร้างขนาดใดก็ได้

โปร่งใสหรือสีทึบ ตั้งแต่ 1×1 ถึง 65535×65535 สร้างในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดใดๆ

สีเติม
รูปแบบ
ขนาดที่ใช้บ่อย

1×1 · 43 ไบต์

ดาวน์โหลด GIF

เสิร์ฟจากสแตกของคุณ

ตัวอย่างโค้ดพร้อมรัน 191 ชุด เลือกแบบที่คุณใช้ ทุกชุดตอบกลับด้วย image/gif ที่พาธที่คุณเลือก ถ้าคุณเปลี่ยนขนาดหรือสีไว้ด้านบน ตัวอย่างโค้ดจะใช้ GIF นั้น

Express JavaScript

ติดตั้ง
npm i express
ไฟล์
server.mjs
รัน
node server.mjs
import express from 'express';

const GIF = Buffer.from('R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==', 'base64');

const app = express();

app.get('/pixel.gif', (req, res) => {
  res.set('Cache-Control', 'no-store');
  res.type('gif').send(GIF);
});

app.listen(8080);

เรารันตัวอย่างโค้ดนี้และเทียบไบต์ที่ได้กลับมาแล้ว เปิดหน้า

ใช้ทำอะไร

  • พิกเซลติดตามและบีคอน: เซิร์ฟเวอร์บันทึกคำขอ แล้วตอบกลับด้วยภาพที่ถูกต้องซึ่งเล็กที่สุด
  • ตัวยึดตำแหน่งสำหรับภาพแบบ lazy-load เพื่อให้แท็ก img ถูกต้องก่อนที่ซอร์สภาพจริงจะมาถึง
  • ตัวเว้นระยะขนาดคงที่ในอีเมล HTML ซึ่งรองรับ CSS ได้ไม่สม่ำเสมอ
  • การทดสอบและ mock ที่ต้องการภาพจริงโดยไม่ต้องแนบไฟล์ภาพไปด้วย

พิกเซลติดตามเชื่อถือได้น้อยกว่าที่เห็น

เมื่อเปิดการป้องกันความเป็นส่วนตัวของเมล Apple Mail จะโหลดภาพระยะไกลล่วงหน้าผ่านพร็อกซี ดังนั้น “การเปิดอ่าน” อาจไม่ใช่คนจริงเลย Gmail ก็ดึงภาพผ่านพร็อกซีของตัวเองและแคชไว้ ไคลเอนต์จำนวนมากบล็อกภาพระยะไกลเป็นค่าเริ่มต้น สำหรับการวิเคราะห์หน้าเว็บ navigator.sendBeacon() หรือการตอบกลับ 204 No Content มักเหมาะกว่าภาพ

คำถาม

ทำไมถึงเรียกว่าว่างเปล่า ทั้งที่มีพิกเซลอยู่?
GIF ต้องมีอย่างน้อยหนึ่งพิกเซล ไฟล์นี้มีขนาด 1×1 และสีเดียวของมันถูกกำหนดให้โปร่งใส จึงไม่มีอะไรแสดงออกมา
ไฟล์ 43 ไบต์นี้ถูกต้องตามสเปกไหม?
ถูกต้อง เป็นไปตามสเปก GIF89a ทุกประการ และทุกเอนจินในตารางด้านบนวาดออกมาโปร่งใส
ทำไมใช้ GIF ไม่ใช่ PNG หรือ WebP?
เพราะเล็กกว่า PNG โปร่งใสขนาดเล็กสุด และทุกเบราว์เซอร์ ไคลเอนต์อีเมล และไลบรารีภาพในช่วง 35 ปีที่ผ่านมาอ่านได้
ควรใช้ data URI หรือไฟล์?
data URI ช่วยประหยัดคำขอหนึ่งครั้ง เหมาะกับตัวยึดตำแหน่งและ CSS ส่วนไฟล์หรือ endpoint จำเป็นเมื่อตัวคำขอเองคือเป้าหมาย เช่น พิกเซลติดตาม
ควรส่ง Content-Type อะไร?
image/gif และเพิ่ม Cache-Control: no-store หากทุกคำขอต้องไปถึงเซิร์ฟเวอร์ของคุณ