emptygif
भाषा: मराठी

सर्वात लहान ट्रान्सपरंट GIF 43 बाइटचा असतो.

संपूर्ण फाइल एवढीच आहे. कोणताही बाइट निवडा आणि तो काय करतो ते पाहा, मग फाइल कॉपी करा, डाउनलोड करा, हॉटलिंक करा किंवा तुमच्या स्वतःच्या कोडमधून सर्व्ह करा.

43 बाइटचा GIF, मोठा करून दाखवलेला: एक ट्रान्सपरंट पिक्सेल
0000
0010
0020
1×1.gif डाउनलोड करा

R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

प्रत्येक बाइट काय करतो

GIF म्हणजे ब्लॉक्सचा एक क्रम. यात सात ब्लॉक्स आहेत, आणि या पेजवरचा प्रत्येक रंग त्यापैकी एका ब्लॉकचा आहे. वाचण्यासाठी एखादा बाइट किंवा ब्लॉक निवडा. संख्या little-endian पद्धतीने स्टोअर होतात: लो बाइट आधी येतो, म्हणून 01 00 म्हणजे 1.

बाइटफील्डअर्थ
हेडर डिकोडरला सांगतो की हा GIF आहे आणि फॉरमॅटचे कोणते व्हर्जन अपेक्षित आहे.
47 49 46सिग्नेचरASCII अक्षरे “GIF”. प्रत्येक GIF फाइल यांनीच सुरू होते.
38 39 61व्हर्जन“89a”. ट्रान्सपरन्सीसाठी 89a आवश्यक आहे; 87a मध्ये ग्राफिक कंट्रोल एक्स्टेंशन नसतो.
लॉजिकल स्क्रीन डिस्क्रिप्टर कॅनव्हासचा साइज आणि त्याच्या कलर टेबलची रचना.
01 00कॅनव्हासची रुंदी१ px.
01 00कॅनव्हासची उंची१ px.
80पॅक्ड फ्लॅग्जएका बाइटमध्ये चार सेटिंग्ज बसवल्या आहेत. सर्वात वरचा बिट सांगतो की पुढे ग्लोबल कलर टेबल आहे; शेवटचे तीन बिट त्याचा साइज सांगतात.
00बॅकग्राउंड कलर इंडेक्सपॅलेट एंट्री ०. ब्राउझर याकडे दुर्लक्ष करतात आणि इमेजच्या मागे जे आहे तेच दाखवतात.
00पिक्सेल आस्पेक्ट रेशो0 म्हणजे चौरस पिक्सेल, कोणतेही करेक्शन नाही.
ग्लोबल कलर टेबल पॅलेट. पिक्सेलमध्ये रंग नव्हे, तर या यादीतील इंडेक्स स्टोअर होतो.
FF FF FFपॅलेट एंट्रीलाल, हिरवा आणि निळा, प्रत्येकी एक बाइट: #ffffff. दोन एंट्रीचे टेबल हे GIF मध्ये शक्य असलेले सर्वात लहान टेबल आहे.
00 00 00पॅलेट एंट्रीलाल, हिरवा आणि निळा, प्रत्येकी एक बाइट: #000000. दोन एंट्रीचे टेबल हे GIF मध्ये शक्य असलेले सर्वात लहान टेबल आहे.
ग्राफिक कंट्रोल एक्स्टेंशन GIF89a मध्ये जोडलेला ऐच्छिक ब्लॉक. इथे तो पॅलेट एंट्री 0 ट्रान्सपरंट करतो.
21एक्स्टेंशन इंट्रोड्यूसर0x21 (“!”) पुढे एक्स्टेंशन ब्लॉक असल्याचे सांगतो.
F9ग्राफिक कंट्रोल लेबल0xF9 सांगतो की हे एक्स्टेंशन ग्राफिक कंट्रोल एक्स्टेंशन आहे.
04ब्लॉक साइजपुढे ४ बाइटच्या सेटिंग्ज आहेत.
01पॅक्ड फ्लॅग्जसर्वात खालचा बिट ट्रान्सपरन्सी फ्लॅग आहे. तो ऑन आहे, म्हणून खाली दिलेला ट्रान्सपरंट इंडेक्स वापरला जातो.
00 00डिलेसेकंदाचे ० शतांश भाग. हे फक्त ॲनिमेशनसाठी महत्त्वाचे असते.
00ट्रान्सपरंट कलर इंडेक्सपॅलेट एंट्री ० पूर्णपणे ट्रान्सपरंट ड्रॉ होते.
00ब्लॉक टर्मिनेटरशून्य लांबीचा सब-ब्लॉक, जो ब्लॉक बंद करतो.
इमेज डिस्क्रिप्टर इमेज कॅनव्हासवर कुठे आहे आणि किती मोठी आहे.
2Cइमेज सेपरेटर0x2C (“,”) पासून इमेज सुरू होते.
00 00लेफ्टइमेज कॅनव्हासच्या डाव्या कडेपासून ० px वर सुरू होते.
00 00टॉपइमेज कॅनव्हासच्या वरच्या कडेपासून ० px वर सुरू होते.
01 00इमेजची रुंदी१ px.
01 00इमेजची उंची१ px.
00पॅक्ड फ्लॅग्जलोकल कलर टेबल नाही, इंटरलेस्ड नाही. इमेज ग्लोबल पॅलेट वापरते.
इमेज डेटा पिक्सेल, LZW ने कॉम्प्रेस करून जास्तीत जास्त 255 बाइटच्या सब-ब्लॉक्समध्ये विभागलेले.
02LZW मिनिमम कोड साइज२, म्हणून कॉम्प्रेस्ड कोड सुरुवातीला ३ बिट रुंद असतात.
02सब-ब्लॉक साइजपुढे २ बाइट कॉम्प्रेस्ड डेटा आहे.
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पिक्सेल: पॅलेट एंट्री ०
  3. 101101 = 5इमेजचा शेवट
  4. 0000000 न वापरलेले पॅडिंग बिट

मोठ्या इमेजमध्येही हीच युक्ती वापरली जाते: प्रत्येक नवीन कोड आधीच्या कोडपेक्षा एक पिक्सेल लांब रन दर्शवतो, म्हणून 1000×1000 चा ट्रान्सपरंट GIF फक्त १,७४३ बाइटचा होतो.

तो आणखी लहान होऊ शकतो का?

हो, जर तुम्ही असे भाग काढून टाकले जे नसले तरी डिकोडर चालवून घेतात. आम्ही प्रत्येक व्हेरिएंट तीन ब्राउझर इंजिन आणि Pillow मध्ये उघडला आणि त्यांनी काय ड्रॉ केले ते नोंदवले.

साइजव्हेरिएंटChromiumFirefoxWebKitPillow
४३या पेजवरची स्टँडर्ड फाइल.ट्रान्सपरंटट्रान्सपरंटट्रान्सपरंटट्रान्सपरंट
४२ट्रेलर बाइट नाही. डिकोडर तसेही डेटा संपल्यावर थांबतात.ट्रान्सपरंटट्रान्सपरंटट्रान्सपरंटट्रान्सपरंट
३७पॅलेट अजिबात नाही. तरीही वैध: स्पेसिफिकेशन डिकोडरला स्वतःचे पॅलेट वापरण्याची मुभा देते, आणि इंडेक्स 0 तसाही ट्रान्सपरंट आहे.ट्रान्सपरंटट्रान्सपरंटट्रान्सपरंटट्रान्सपरंट
३६पॅलेटही नाही आणि ट्रेलरही नाही.ट्रान्सपरंटट्रान्सपरंटट्रान्सपरंटट्रान्सपरंट
३५ट्रान्सपरन्सी ब्लॉक नाही: पिक्सेल पॅलेट कलर 0 म्हणजे पांढऱ्या रंगात ड्रॉ होतो.पांढरापांढरापांढरापांढरा
३५1987 चा फॉरमॅट. यात एखादा रंग ट्रान्सपरंट म्हणून मार्क करण्याचा कोणताही मार्ग नाही.पांढरापांढरापांढरापांढरा
३४ट्रान्सपरन्सी ब्लॉक आहे, पण कॉम्प्रेस्ड पिक्सेल नाहीत.ट्रान्सपरंटट्रान्सपरंटट्रान्सपरंटएरर
३३तेच, पण ट्रेलरशिवाय.ट्रान्सपरंटट्रान्सपरंटट्रान्सपरंटएरर
२९पॅलेटही नाही आणि ट्रान्सपरन्सीही नाही. प्रत्येक इंजिन स्वतःचा रंग निवडते.काळापांढराट्रान्सपरंटकाळा
२६अशी इमेज, जिच्यात कॉम्प्रेस्ड डेटाच नाही.ट्रान्सपरंटट्रान्सपरंटट्रान्सपरंटएरर
१४फक्त हेडर, कॅनव्हास साइज आणि ट्रेलर. यात कोणतीही इमेज नाही.ट्रान्सपरंटएररट्रान्सपरंटएरर

फाइल सगळीकडे चालणे आवश्यक असेल तर 43 बाइटची फाइल वापरा. 37 बाइटची फाइलही वैध GIF आहे आणि आम्ही तपासलेल्या प्रत्येक इंजिनमध्ये ट्रान्सपरंट दिसली. त्याहून लहान फाइल्समध्ये तुम्ही डिकोडरच्या सैलपणावर अवलंबून असता, आणि 29 बाइटची फाइल दाखवते की इंजिन्सचे निकाल एकमेकांशी कसे जुळत नाहीत.

२३ सप्टेंबर, २०२६ रोजी Chromium 153.0.8010.12, Firefox 155.0, WebKit 26.6, Pillow 12.2.0 वर तपासले.

कोणत्याही साइजचा बनवा

ट्रान्सपरंट किंवा एकाच रंगाने भरलेला, 1×1 पासून 65535×65535 पर्यंत. तो तुमच्या ब्राउझरमध्येच तयार होतो; काहीही अपलोड होत नाही.

फिल
नेहमीचे साइज

1×1 · ४३ बाइट

GIF डाउनलोड करा

तुमच्या स्टॅकमधून सर्व्ह करा

चालवायला तयार १७३ स्निपेट. तुमचा निवडा: प्रत्येक स्निपेट तुम्ही निवडलेल्या पाथवर image/gif रिस्पॉन्स देतो. तुम्ही वर साइज किंवा रंग बदलला असेल, तर स्निपेट तोच GIF वापरतात.

Elixir, Erlang & Gleam

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 सपोर्ट अपूर्ण असतो.
  • टेस्ट आणि मॉक, ज्यांना खरी इमेज हवी असते, पण इमेज फाइल सोबत ठेवायची नसते.

ट्रॅकिंग पिक्सेल दिसतात तितके विश्वसनीय नसतात

Mail Privacy Protection ऑन असताना Apple Mail रिमोट इमेज प्रॉक्सीद्वारे आधीच लोड करून ठेवतो, त्यामुळे एखादे “open” कदाचित कोणत्याही व्यक्तीने केलेले नसते. Gmail सुद्धा इमेज स्वतःच्या प्रॉक्सीद्वारे फेच करून कॅश करतो. अनेक क्लायंट रिमोट इमेज डीफॉल्टने ब्लॉक करतात. पेज ॲनालिटिक्ससाठी इमेजऐवजी अनेकदा navigator.sendBeacon() किंवा 204 No Content रिस्पॉन्स जास्त योग्य ठरतो.

प्रश्न

यात पिक्सेल असूनही याला empty का म्हणतात?
GIF मध्ये किमान एक पिक्सेल असावाच लागतो. हा 1×1 आहे आणि त्याचा एकमेव रंग ट्रान्सपरंट म्हणून मार्क केला आहे, म्हणून काहीच दिसत नाही.
43 बाइटची फाइल वैध आहे का?
हो. ती GIF89a स्पेसिफिकेशनचे तंतोतंत पालन करते, आणि वरच्या टेबलमधील प्रत्येक इंजिन ती ट्रान्सपरंट ड्रॉ करते.
PNG किंवा WebP ऐवजी GIF का?
तो सर्वात लहान ट्रान्सपरंट PNG पेक्षाही लहान आहे, आणि गेल्या 35 वर्षांतील प्रत्येक ब्राउझर, ईमेल क्लायंट आणि इमेज लायब्ररी तो वाचू शकते.
data URI वापरू की फाइल?
data URI एक रिक्वेस्ट वाचवतो आणि प्लेसहोल्डर व CSS साठी योग्य आहे. जेव्हा रिक्वेस्ट हाच मुख्य उद्देश असतो, जसे ट्रॅकिंग पिक्सेलमध्ये, तेव्हा फाइल किंवा endpoint लागतो.
कोणता Content-Type पाठवू?
image/gif. प्रत्येक रिक्वेस्ट तुमच्या सर्व्हरपर्यंत पोहोचणे आवश्यक असेल तर Cache-Control: no-store जोडा.