چرا JPEGهای خیلی ریز تو کروم فرق دارن
فرانتاند
گوگلخلاصهٔ کاملتر
نویسنده تعریف میکنه یه بار روی کامپیوتر همکارش دید یه لوگو نازکتر و به تصویر اصلی نزدیکتره، ولی روی سیستم خودش ضخیمتر رندر شده. تصویر یه JPEG بود که تو اندازهٔ ۱۵ پیکسل نشون داده میشد و تو فایرفاکس و کروم دو جور دیده میشد. عوضکردنش با SVG مشکل رو حل کرد، ولی سؤال اصلی سر جاش موند: چرا اصلاً اینطوری رندر میشه؟
ریشهٔ ماجرا به شکل ذخیرهسازی JPEG برمیگرده. موقع فشردهسازی، تصویر به بلوکهای ۸×۸ تقسیم میشه و با تبدیلی به اسم DCT به حوزهٔ فرکانس میره. هر بلوک اونجا میشه مجموعهای از ضرایب که میگن هر الگو چقدر تو اون بلوک حضور داره؛ پایینترین حالت همون مؤلفهٔ ثابت یا رنگ یکنواخته و بالاترینش شبیه صفحهٔ شطرنجیه.
نکتهای که نویسنده روش دست میذاره اینه که وقتی تصویر خیلی کوچیک میشه، چیزی که از دست میره تصادفی نیست و بیشترش جزئیات پرفرکانسه. پس بهجای بازکردن کامل تصویر میشه ضرایب فرکانسبالا رو نادیده گرفت و مستقیم نسخهٔ درشتدانه رو ساخت. اسم فنی این کار partial IDCT scaling هست و برای هر کسری با مخرج ۸ جواب میده.
صرفهجوییش هم کم نیست: یه بیتمپ کامل از تصویر ۲۰۰۰×۲۰۰۰ حدود ۱۲ مگابایت حافظه میخواد، در حالی که خروجی نهایی ۲۰×۲۰ فقط حدود ۱.۲ کیلوبایت میشه. کروم رمزگشایی تصویر رو به Skia میسپره و Skia برای JPEG سراغ libjpeg-turbo میره که همین تکنیک رو پیاده کرده؛ نزدیکترین کسر با مخرج ۸ حساب میشه، تصویر تو همون مقیاس باز میشه و بعد با یه الگوریتم معمولی تا اندازهٔ نهایی کوچیک میشه.
برای اون لوگوی ریز یعنی رمزگشایی تو مقیاس یکهشتم و باقیموندن فقط مؤلفهٔ ثابت هر بلوک، برای همین نرمی لبهها و گرادیانها کلاً از بین رفته بود. نویسنده بعداً تو یه اصلاحیه اضافه کرده که خود الگوریتم کوچیکسازی هم سهم مهمی داره، پس افت کیفیت ترکیبی از هر دوئه. جمعبندیش هم سادهست: JPEG و بهینهسازیهاش حول ادراک ما از عکس طراحی شدن، پس برای آیکون و لوگو سراغش نرید.
نکات کلیدی:
- کروم تصویرهای خیلی کوچیک رو کامل باز نمیکنه و مستقیم تو کسری با مخرج ۸ رمزگشایی میکنه
- JPEG هر بلوک ۸×۸ رو با DCT به ضرایب فرکانسی تبدیل میکنه؛ تو مقیاس ریز فقط مؤلفهٔ ثابت میمونه
- زنجیرهٔ کروم به Skia و از اونجا به libjpeg-turbo میرسه که partial IDCT scaling داره
- بخشی از افت کیفیت هم به الگوریتم کوچیکسازی برمیگرده، نه فقط IDCT
- برای آیکون و لوگو SVG یا PNG انتخاب درستتریه
