یه سایت کامل رو تو یه فاویکون جا داد
جاوااسکریپت
فرانتاندخلاصهٔ کاملتر
نویسنده که قبلاً داده رو تو رجیستر DPI ماوسش قایم کرده بود، اینبار سراغ فاویکون رفته — همون آیکون کوچیک گوشهی تب مرورگر. منطقش سادهست: فاویکون فقط یه تصویره، تصویرم فقط پیکسله، و پیکسلم فقط بایته. پس چرا نشه یه چیزی توش ذخیره کرد؟
اولش فکر میکرده سراغ استگانوگرافی بره (پنهون کردن داده تو یه عکس معمولی بدون اینکه تابلو بشه)، ولی به گفتهی خودش لازم نبوده فاویکون اصلاً شبیه آیکون باشه؛ میتونسته تبدیل به فضای ذخیرهی خالص بشه. هر پیکسل سه مقدار قرمز و سبز و آبی داره، یعنی سه بایت. کافی بوده بایتهای UTF-8 متن HTML رو مستقیم بریزه تو همین کانالهای رنگ. برای مرورگر اینا فقط رنگن، ولی برای نویسنده HTMLان.
چیزی که بیشتر از همه غافلگیرش کرده، کوچیکی نتیجه بوده. پیلود نهایی فقط ۲۰۸ بایت شده و با یه هدر ۴ بایتی که طول پیلود رو نگه میداره (تا معلوم باشه دادهی واقعی کجا تموم میشه)، میرسه به ۲۱۲ بایت. این یعنی ۷۱ پیکسل، که تو کوچیکترین مربع ممکن یعنی یه تصویر ۹ در ۹ پیکسلی (۸۱ پیکسل) جا میگیره — حدود ۸۷ درصدش پر میشه.
خوندن دوبارهی داده هم از امکاناتی که خود مرورگر داره استفاده میکنه: فاویکون بهعنوان تصویر لود میشه، روی یه canvas کشیده میشه، و API کانوس اجازه میده جاوااسکریپت تکتک پیکسلها رو بخونه. بعد فرایند برعکس میشه: مقادیر RGB خونده میشن، آرایهی بایتها بازسازی میشه، چهار بایت اول برای طول پیلود خونده میشه و در آخر متن UTF-8 دیکد میشه.
یه نکتهی مهم اینه که فاویکون خودِ کل سایت رو نداره، فقط محتواش رو داره؛ هنوز به یه لودر کوچیک جاوااسکریپتی نیاز داری که تصویر رو دیکد کنه، وگرنه فاویکون فقط یه PNG معمولیه. نویسنده صادقانه میگه این کار اصلاً مفید نیست — حجم داده ناچیزه و به JS وابستهست — ولی کل ماجرا سر امتحان کردن مرزهاست. آخرشم چند مسیر جایگزین پیشنهاد میده: ذخیرهی مارکآپ تو فاویکون SVG، استفاده از چانکهای کامنت PNG مثل tEXt و zTXt و iTXt، یا فرمت ico که چند آیکون با رزولوشن مختلف رو نگه میداره.
نکات کلیدی:
- محتوای HTML مستقیم تو کانالهای رنگ (RGB) پیکسلهای فاویکون ذخیره میشه، هر پیکسل سه بایت.
- یه هدر ۴ بایتی طول پیلود رو نگه میداره تا انتهای داده معلوم باشه.
- کل پیلود ۲۰۸ بایتی تو یه تصویر ۹ در ۹ پیکسلی جا میگیره.
- خوندن دوباره با کشیدن تصویر روی canvas و خوندن پیکسلها با جاوااسکریپت انجام میشه؛ به یه لودر JS نیاز داره.
