چگونه GIF های متحرک در واقع کار می کنند - از فریم های بوم گرفته تا LZW Compression

چرا GIF ها هنوز وجود دارند

فرمت تبادل گرافیکی توسط CompuServe در سال 1987 (CompuServe، 1987) ایجاد شد. از انیمیشن، شفافیت و فشرده سازی بی ضرر پشتیبانی می کند. محدود به 256 رنگ در هر فریم است. صوتی ندارد. فایل های بزرگ تولید می کند. با هر اندازه گیری فنی، باید دهه ها قبل جایگزین شود.

و با این حال: Discord، Slack، Twitter، Reddit و ایمیل همه از GIF ها به صورت بومی پشتیبانی می کنند. GIPHY بیش از 10 میلیارد GIF در روز (GIPHY، 2020) خدمت می کند. این فرمت همچنان ادامه دارد زیرا در همه جا کار می کند، نیازی به کدک ندارد و به طور خودکار بازی می کند. هیچ فرمت دیگری این ترکیب از پشتیبانی جهانی و پخش صفر را ندارد.

درک چگونگی کار GIF ها فراتر از trivia مفید است - توضیح می دهد که چرا GIF صادر شده شما 4MB است، چرا گرادیان به نظر می رسد باند، و آنچه شما می توانید در مورد آن انجام دهید.

مرحله 1: Capture

GIF متحرک یک توالی از تصاویر (frames) است که به منظور تاخیر بین هر کدام نمایش داده می شود. برای ایجاد یکی از انیمیشن های بوم، شما باید در فواصل منظم، بوم دولتی را ثبت کنید.

در یک مرورگر، این بدان معنی است که خواندن داده های پیکسلی از یک عنصر HTML <canvas>0Q0Q در هر زمان فریم - به طور معمول از طریق canvas.toDataURL() یا ctx.getImageData(). انیمیشن برای زمان هدف پیشرفت می کند، بوم رندر می شود و پیکسل ها جذب می شوند. محدودیت کلیدی: شما باید قبل از خواندن پیکسل ها منتظر چرخه رنگ مرورگر (requestAnimationFrameQ) باشید، در غیر این صورت یک بافر است.

GIF در 15 FPS برای 3 ثانیه نیاز به ثبت 45 فریم دارد. در رزولوشن 1080×1080، هر فریم تقریبا 4.7 میلیون پیکسل دارد.

مرحله دوم: اندازه گیری رنگ

GIF حداکثر ۲۵۶ رنگ در هر فریم را پشتیبانی می کند که در یک جدول رنگی ذخیره می شود. یک فریم معمولی دارای هزاران رنگ متمایز است. کاهش ۲۵۶ بدون تخریب قابل مشاهده، سخت ترین بخش رمزگذاری GIF است.

رویکرد استاندارد الگوریتم برش **median * [Heckbert, 1982] است: همه پیکسل ها را از طریق کانال قرمز خود مرتب کنید، لیست را در رسانه ها تقسیم کنید، برای سبز و آبی تکرار کنید، تقسیم فضای رنگ به 256 منطقه. متوسط هر منطقه به یک ورودی پالت تبدیل می شود. این چیزی است که gif.js - PinePaper کتابخانه استفاده می کند - پیاده سازی در کارکنان وب برای موازی سازی (Rubaxa، gif.js).

تشخیص رنگ به همین دلیل است که GIF ها به خوبی گرافیک های رنگی را اداره می کنند اما با عکس ها و گرادیان ها مبارزه می کنند. شیب در سراسر 1080 پیکسل ممکن است از 500 رنگ متمایز استفاده کند. فشرده سازی به 256 تولید باند قابل مشاهده - گام های گسسته که شیب باید صاف باشد.

** آنچه شما می توانید در مورد آن انجام دهید: از رنگ های کمتری در طراحی خود استفاده کنید. شکل های تخت، پر جامد و متن به خوبی تعیین می شود. گرادیان و بافت های عکاسی خوب نیستند. اگر GIF شما باند، ساده کردن پالت، نه رزولوشن.

مرحله 3: LZWRON

شاخص های پیکسل هر فریم (مداخله در پالت ۲۵۶ رنگ) با استفاده از Lempel-Ziv-Welch (LZW) فشرده سازی فشرده (Welch، ۱۹۸۴). LZW یک فرهنگ لغت از توالی های تکراری را ایجاد می کند، زیرا داده ها را اسکن می کند. هنگامی که با یک توالی مواجه می شود که قبلا دیده شده است، به جای بایت های خام، شاخص فرهنگ لغت را می سازد.

این بدان معنی است که فشرده سازی GIF زمانی موثر است که مناطق بزرگی از رنگ های تکراری وجود دارد - پس زمینه های جامد، اشکال مسطح، متن بر روی یک سطح یکنواخت. بافت های پیچیده با تنوع سطح پیکسل نسبت های فشرده سازی ضعیف را تولید می کنند، زیرا فرهنگ لغت LZW چند توالی تکراری را پیدا می کند.

** عدم قطعیت: 1080×1080 GIF از متن سفید بر روی یک پس زمینه سیاه ممکن است تا 200KB فشرده شود. همان رزولوشن GIF از یک عکس پیچیده ممکن است 8MB باشد. اندازه فایل به پیچیدگی بصری بیشتر از رزولوشن یا شمارش فریم بستگی دارد.

مرحله 4: Frame Disposal and Optimization

فریم های GIF می توانند یک روش غیر مجاز را مشخص کنند: آیا قبل از کشیدن فریم بعدی، فریم قبلی را قابل مشاهده بگذارید یا به فریم قبلی بازگردانید. پس زمینه رمزگذاری کننده های هوشمند GIF از ** فریم متفاوت استفاده می کنند - رمزگذاری فقط پیکسل هایی که بین فریم ها تغییر کرده اند، نه کل فریم.

اگر انیمیشن شما دارای یک پس زمینه استاتیک با یک عنصر متحرک کوچک است، یک GIF بهینه شده، پس زمینه را یک بار و تنها منطقه را به روز می کند که در آن عنصر حرکت می کند. این به طور چشمگیری اندازه فایل را کاهش می دهد. رمزگذار PinePaper از gif.js استفاده می کند که این بهینه سازی را به طور خودکار اعمال می کند.

اعداد

برای یک انیمیشن معمولی PinePaper (1080، 15 FPS، 3 ثانیه، پس زمینه تاریک با متن متحرک):

اجزاء	اندازه
فریم های خام (45 × 4.7M پیکسل × 3 بایت)	~634 MB
پس از تحمل (256 رنگ، 1 بایت / پیکسل)	~211 MB
پس از فشرده سازی LZW	~2-4 MB
با استفاده از فریم اختلاف	~1-2 MB

نسبت فشرده سازی از خام تا نهایی تقریباً 300:1 تا 600:1 است. بسیاری از این موارد از اندازه گیری رنگ (3: 1) و LZW (50:1 تا 100:1) می آید.

هنگام استفاده از GIF در مقابل دیگر فرمت ها

فرمت Format	بهترین برای	محدودیت
GIF	پشتیبانی جهانی، auto-play، برنامه های پیام رسانی	۲۵۶ رنگ، فایل های بزرگ، بدون صدا
WebM (VP9)	بهترین کیفیت، کوچکترین فایل ها، وب	پشتیبانی محدود در Safari، iMessage
MP4 (H.264)	رسانه های اجتماعی، بازیکنان ویدئویی	نیاز به کدک، بدون شفافیت
APNG	انیمیشن کامل رنگی با شفافیت	پشتیبانی محدود در مرورگرهای قدیمی

GIF انتخاب درست زمانی است که شما نیاز به سازگاری جهانی و بازی خودکار دارید. برای کیفیت یا اندازه فایل، WebM یا MP4 بهتر است.

سعی کنید

باز [PinePaper Studio] (/editorQ)، ایجاد یک طراحی و صادرات به عنوان GIF. مشاهده کنید که اندازه فایل چگونه تغییر می کند:

• افزایش تعداد فریم ( فریم های بیشتر = فایل بزرگتر، متناسب)
• اضافه کردن گرادیان (تقاد ضعیف = فایل بزرگتر)
• استفاده از رنگ های جامد (ثبت نام خوب = فایل کوچکتر)
• افزایش اندازه بوم (بیش از پیکسل در هر فریم = فایل بزرگتر)

هر تغییر اندازه گیری خط لوله فشرده سازی است. شما فقط یک GIF ایجاد نمی کنید – شما مشاهده می کنید که چگونه تئوری اطلاعات برای طراحی شما کاربرد دارد.

ارجاعات

• CompuServe (1987) گرافیک Interchange Format، نسخه 87a.
• GIPHY (2020) گزارش سالانه: 10 میلیارد خدمت روزانه.
• Heckbert، P. (1982) اندازه گیری تصویر رنگی برای فریم Display. * گرافیک کامپیوتری (SIGRAPH)، 16 (3)، 297-124.
• Rubaxa github.com/jnordberg/gif.js.
• Welch, T.A. (1984) یک تکنیک برای فشرده سازی داده های با کیفیت بالا (IEEE computer) ، 17 (2001) ، 8-19.

---

صادرات GIF GIF رایگان است – بدون علامت، هیچ نشانه ای. Open [pinepaper.studio/editor] (/editorQQQ) و اولین انیمیشن خود را صادر کنید.