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

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

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

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

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

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

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

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

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

กว้าง × สูง

สีเติม

โปร่งใส สีทึบ

ขนาดที่ใช้บ่อย1×116×1688×31320×50300×250728×90160×600300×600970×2501200×6301920×1080

1×1 · 43 ไบต์

ดาวน์โหลด GIF คัดลอก data URI คัดลอก URL ฮอตลิงก์ ตรวจดูไบต์เหล่านี้ ใช้ในตัวอย่างโค้ด

ฮอตลิงก์

ลิงก์ไปยังไฟล์เหล่านี้ได้โดยตรงจากเว็บไซต์ อีเมล หรือแอปใดก็ได้ ไฟล์เสิร์ฟจาก edge ของ Cloudflare โดยแคชได้นาน และเปิด CORS ให้ทุกคน

• ไฟล์ 43 ไบต์https://emptygif.com/1x1.gif
• ขนาดใดก็ได้ โปร่งใสhttps://emptygif.com/px/300x250.gif
• ขนาดใดก็ได้ สีทึบhttps://emptygif.com/px/300x250/ff5a1f.gif
• JSON API: ขนาด, base64 และ data URIhttps://emptygif.com/api/gif?w=300&h=250
• ตัวอย่างโค้ดทั้งหมดในรูปแบบ JSONhttps://emptygif.com/snippets.json
• สรุปสำหรับเอเจนต์ AIhttps://emptygif.com/llms.txt

HTTP/2 200
content-type: image/gif
content-length: 43
cache-control: public, max-age=31536000, immutable
access-control-allow-origin: *
cross-origin-resource-policy: cross-origin
timing-allow-origin: *

<img src="https://emptygif.com/1x1.gif" width="1" height="1" alt="">

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

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

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);

คำถาม

ทำไมถึงเรียกว่าว่างเปล่า ทั้งที่มีพิกเซลอยู่?

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

ไฟล์ 43 ไบต์นี้ถูกต้องตามสเปกไหม?

ถูกต้อง เป็นไปตามสเปก GIF89a ทุกประการ และทุกเอนจินในตารางด้านบนวาดออกมาโปร่งใส

ทำไมใช้ GIF ไม่ใช่ PNG หรือ WebP?

เพราะเล็กกว่า PNG โปร่งใสขนาดเล็กสุด และทุกเบราว์เซอร์ ไคลเอนต์อีเมล และไลบรารีภาพในช่วง 35 ปีที่ผ่านมาอ่านได้

ควรใช้ data URI หรือไฟล์?

data URI ช่วยประหยัดคำขอหนึ่งครั้ง เหมาะกับตัวยึดตำแหน่งและ CSS ส่วนไฟล์หรือ endpoint จำเป็นเมื่อตัวคำขอเองคือเป้าหมาย เช่น พิกเซลติดตาม

ควรส่ง Content-Type อะไร?

image/gif และเพิ่ม Cache-Control: no-store หากทุกคำขอต้องไปถึงเซิร์ฟเวอร์ของคุณ