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 যোগ করুন।