تبدیل PNG به AVIF

برای فهم اینکه چرا فایل‌های PNG شفاف در وب‌سایت‌های مدرن بیش از حد سنگین می‌شوند، باید محدودیت‌های ریاضی جریان بیت PNG را تحلیل کرد. یک تصویر RGBA ‏۳۲ بیتی برای هر یک از رنگ‌های قرمز، سبز و آبی ۸ بیت و برای کانال آلفا (شفافیت) ۸ بیت دیگر اختصاص می‌دهد. در یک گرافیک ۲۰۰۰×۲۰۰۰ پیکسلی، بیت‌مپ رستری فشرده‌نشده به ۱۶ میلیون بایت (۱۶ مگابایت) داده خام نیاز دارد. اگرچه PNG پیش‌بین‌های خط افقی (Sub، Up، Average، Paeth) و سپس فشرده‌سازی LZ77 zlib ‏(DEFLATE) را اعمال می‌کند، این معماری بر کشف دنباله‌های بایتی دقیق و تکراری در ردیف‌های افقی مجاور تکیه دارد.

اما گرافیک‌های دیجیتال مدرن به‌ندرت از برش‌های هندسی تخت ابتدایی با شفافیت دودویی روشن/خاموش تشکیل شده‌اند. در عوض، دارایی‌های بصری امروزی سایه‌های نرم گاوسی، شکست‌های شیشه‌ای چندلایه، انسداد نور محیطی و ضدنقص زیرپیکسلی در امتداد منحنی‌های ارگانیک دارند. چون این درجه‌بندی‌های ظریف آلفا تغییرات عددی پیوسته‌ای میان پیکسل‌های مجاور ایجاد می‌کنند، موتور دیکشنری LZ77 نمی‌تواند رشته‌های بایتی منطبق پیدا کند. فشرده‌ساز ناچار است مقادیر بایتی لفظی فشرده‌نشده را هم برای کانال‌های رنگ و هم برای کانال آلفا ذخیره کند و PNGهای شفاف به بارهای عظیم چندمگابایتی تبدیل می‌شوند که دستگاه‌های موبایل را خفه می‌کنند.

AVIF دوراهی گرافیک شفاف را با یک نوآوری معماری که در ISO/IEC 23000-22 تدوین شده حل می‌کند: مالتی‌پلکس صفحه آلفای کمکی. AVIF به‌جای ذخیره شفافیت به‌صورت بایت رنگ چهارم درهم‌تنیده و فشرده‌نشده، شفافیت را با ساخت یک صفحه تصویر تک‌رنگ کمکی مستقل که دقیقاً ابعاد فضایی تصویر رنگی اصلی را دارد رمزگذاری می‌کند.

این صفحه آلفای کمکی با تمام قدرت پیش‌بینی کدک ویدیویی مدرن AV1 فشرده می‌شود. رمزگذار از تقسیم بازگشتی بلوک (از بلوک‌های ۶۴×۶۴ تا زیربلوک‌های ۴×۴) استفاده می‌کند و ۵۶ زاویه پیش‌بینی فضایی جهت‌دار متمایز را ارزیابی می‌کند. سایه‌های شعاعی نرم، لبه‌های پرمانند خز و منحنی‌های ضدنقص از پیکسل‌های همسایه پیش‌بینی و با کارایی ریاضی فوق‌العاده نمایش داده می‌شوند. هنگام رمزگشایی توسط موتورهای مرورگر مدرن، صفحه آلفای کمکی در حافظه سخت‌افزاری دوباره با کانال‌های رنگ مالتی‌پلکس می‌شود و برش‌های محصول کاملاً تیز بدون هیچ حاشیه رنگی و هاله تیره‌ای پدید می‌آورد.

در توسعه وب واکنش‌گرای مدرن — به‌ویژه فروشگاه‌های اینترنتی پرترافیک (Shopify، WooCommerce، برنامه‌های headless با Next.js و Astro) — برش‌های محصول باید بی‌نقص روی تم‌های پس‌زمینه متنوع، از جمله کارت‌های محصول سفید تمیز، کشوهای مقایسه خاکستری خنثی و پالت‌های رابط حالت تاریک اشباع‌شده، شناور باشند. اگر دارایی روی یک پس‌زمینه یکدست ثابت چسبانده شده باشد، تغییر به حالت تاریک فوراً حاشیه‌های مستطیلی سفید زشت دور محصولات را آشکار می‌کند.

فروشگاه‌های اینترنتی با تبدیل برش‌های PNG محصولات به AVIF، سازگاری کامل با حالت تاریک را حفظ می‌کنند و بار دارایی صفحات دسته‌بندی را از ۶۰ مگابایت به کمتر از ۸ مگابایت می‌رسانند. ضدنقص دور شبح محصولات در گذارهای CSS ‏`background-color` بی‌نقص ترکیب می‌شود، بدون حاشیه سفید ناخوشایند یا آرتیفکت‌های پله‌پله‌ای که روش‌های خام ماسک‌گذاری با کلید رنگ ایجاد می‌کنند.

در فریم‌ورک‌های وب مدرن مبتنی بر کامپوننت (React، Next.js، Nuxt، SvelteKit و Astro)، تصاویر شفاف بیش‌ازاندازه بزرگ گلوگاه‌های کارایی پنهانی ایجاد می‌کنند. وقتی مرورگر یک تصویرسازی اصلی PNG پنج‌مگابایتی را دانلود می‌کند، نه‌تنها جریان‌های شبکه HTTP/2 را اشباع می‌کند — و دانلود بسته‌های حیاتی جاوااسکریپت و شیوه‌نامه‌ها را معطل می‌کند — بلکه هنگام بازگشایی به حافظه سمت کاربر فشار می‌آورد. باز کردن PNGهای عظیم مرورگرهای موبایل را به تخصیص‌های بزرگ heap وادار می‌کند و به رقابت رشته‌ها، افت فریم‌های انیمیشن و تأخیر طولانی Interaction to Next Paint ‏(INP) می‌انجامد.

ارائه همان دارایی بصری به‌صورت AVIF شفاف ۴۵۰ کیلوبایتی ازدحام شبکه را از میان برمی‌دارد و Largest Contentful Paint ‏(LCP) را تا بسیار پایین‌تر از آستانه ۲.۵ ثانیه‌ای گوگل سریع‌تر می‌کند. چون AVIF درون خطوط رندر اختصاصی مرورگر کارآمد رمزگشایی می‌شود، کامپوننت‌های رابط کاربری روان هیدراته می‌شوند و انیمیشن‌های اسکرول ۶۰ فریم در ثانیه روان را حفظ می‌کنند.

هنگام تبدیل گرافیک‌های PNG به AVIF، انتخاب راهبرد فشرده‌سازی درست به محتوای بصری و نیت طراحی بستگی دارد:

۱. رندرهای سه‌بعدی پیچیده، گرافیک‌های اصلی تصویرسازی‌شده و برش‌های محصول: برای دارایی‌های بصری غنی با نورپردازی ظریف، سایه‌های نرم یا بافت‌های واقع‌گرایانه، AVIF با افت همراه رمزگذاری آلفای کمکی بی‌رقیب است. این روش ۶۰٪ تا ۸۰٪ کاهش بایت عظیم فراهم می‌کند و شفافیت را نرم و بدون نوار نگه می‌دارد.

۲. تایپوگرافی پرکنتراست و نشان‌های مینیمال برند زیر ۲۰ کیلوبایت: برای آیکون‌های تخت ساده با کمتر از ۲۵۶ رنگ یکدست و خطوط هندسی تیز، PNG اندیس‌دار (PNG-8) یا SVG برداری فوق‌العاده فشرده می‌ماند. تبدیل آیکون‌های تخت کوچک زیر ۲۰ کیلوبایت به AVIF به دلیل سربار سرآیند ظرف ISOBMFF ممکن است صرفه‌جویی ناچیزی داشته باشد. صرفه‌جویی حجم فایل را برای هر دارایی جداگانه ارزیابی کنید.

برای رسیدن به اوج بهینه‌سازی در کل جریان دارایی‌های دیجیتال، این جریان کاری نظام‌مند را دنبال کنید:

گام ۱ - جداسازی پس‌زمینه: اگر از یک عکس خام روی پس‌زمینه یکدست استودیویی شروع می‌کنید، با ابزارهای «حذف پس‌زمینه» یا «شفاف‌سازی» پیکسل‌های اضافی را بزدایید و شفافیت آلفای ۸ بیتی تمیز بسازید.

گام ۲ - برش بوم: فاصله‌های خالی غیرضروری دور سوژه را حذف و گرافیک فعال را با ابزار «برش تصویر» در مرکز قرار دهید.

گام ۳ - مقیاس‌دهی ابعاد: ابعاد بوم را با ابزار «تغییر اندازه تصویر» مطابق عرض واقعی ظرف چیدمان CSS کوچک کنید (مثلاً عرض ۸۰۰ پیکسل برای پنجره‌های محصول به‌جای خروجی خام ۴۰۰۰ پیکسلی بوم).

گام ۴ - رمزگذاری در قالب نسل جدید: گرافیک را به همین ابزار «تبدیل PNG به AVIF» بدهید تا صفحه‌های رنگ و آلفا در یک ظرف AVIF سبک و نسل جدید رمزگذاری شوند.

گام ۵ - استقرار پیشرونده HTML: AVIF خود را با نشانه‌گذاری استاندارد HTML ‏`<picture>` و جایگزین WebP یا PNG منتشر کنید تا بارگذاری سریع برای ۱۰۰٪ بازدیدکنندگان جهانی وب تضمین شود.